如何使用FreshJS控制DOM元素？寻求getElementById等效实现方法

为什么VanillaJS方法无效？ #

Fresh默认采用服务端渲染（SSR），普通组件的代码仅在服务端执行，客户端拿到的是静态HTML内容。直接用document.getElementById()要么因代码执行时机不对找不到元素，要么修改后会被框架的hydration流程覆盖，所以无法生效。

正确实现方式：Island组件 + Preact Hooks #

Fresh的Island组件是支持客户端交互的特殊组件，只有这类组件能在客户端运行代码、操作DOM。结合Preact的useRef钩子可直接获取DOM元素，或用useState通过数据驱动UI更新（这是更符合Fresh/Preact理念的方式）。

示例1：动态修改容器颜色 #

1. 创建Island组件（比如components/ColorBox.tsx）：

/** @jsx h */
import { h, useRef } from "preact";

export default function ColorBox() {
  // 用useRef获取DOM元素引用
  const boxRef = useRef<HTMLDivElement>(null);

  const changeColor = () => {
    if (boxRef.current) {
      // 直接操作DOM修改样式
      boxRef.current.style.backgroundColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
    }
  };

  return (
    <div>
      <div ref={boxRef} style={{ width: "200px", height: "200px", backgroundColor: "#eee" }}></div>
      <button onClick={changeColor}>随机换色</button>
    </div>
  );
}

2. 在页面中引入该组件（比如routes/index.tsx）：

/** @jsx h */
import { h } from "preact";
import ColorBox from "../components/ColorBox.tsx";

export default function Home() {
  return (
    <div class="page">
      <h1>FreshJS DOM操作示例</h1>
      <ColorBox />
    </div>
  );
}

示例2：动态更新菜单项 #

推荐：数据驱动UI更新

用useState维护菜单数据，框架会自动同步UI：

/** @jsx h */
import { h, useState } from "preact";

export default function Menu() {
  const [menuItems, setMenuItems] = useState(["首页", "关于我们"]);

  const addMenuItem = () => {
    setMenuItems([...menuItems, `新菜单${menuItems.length + 1}`]);
  };

  return (
    <div>
      <ul>
        {menuItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addMenuItem}>添加菜单项</button>
    </div>
  );
}

特殊场景：直接操作DOM

如果需要和第三方DOM库集成，可通过useRef获取元素后操作：

/** @jsx h */
import { h, useRef } from "preact";

export default function Menu() {
  const menuRef = useRef<HTMLUListElement>(null);

  const addMenuItem = () => {
    if (menuRef.current) {
      const newLi = document.createElement("li");
      newLi.textContent = `新菜单${menuRef.current.children.length + 1}`;
      menuRef.current.appendChild(newLi);
    }
  };

  return (
    <div>
      <ul ref={menuRef}>
        <li>首页</li>
        <li>关于我们</li>
      </ul>
      <button onClick={addMenuItem}>添加菜单项</button>
    </div>
  );
}

关键注意事项 #

• 只有顶部标注/** @jsx h */并导出默认函数的Island组件，才能在客户端执行代码，普通组件不具备此能力。
• 优先使用useState/useReducer等响应式状态更新UI，尽量避免直接操作DOM，减少与框架状态同步的冲突。
• 若需操作DOM，建议在组件挂载后执行（用useEffect确保元素已渲染）：

import { useEffect, useRef } from "preact";

// ...
useEffect(() => {
  // 组件挂载后执行DOM操作
  if (boxRef.current) {
    boxRef.current.style.backgroundColor = "blue";
  }
}, []);

内容的提问来源于stack exchange，提问作者Shekhar Maharaj