如何实现js修改的功能
修改DOM元素内容
使用innerHTML或textContent属性直接修改元素的HTML或文本内容：
document.getElementById("example").innerHTML = "新内容";
document.querySelector(".class-example").textContent = "纯文本内容"; 修改元素样式
通过style属性调整CSS样式，注意属性名需转换为驼峰命名：
const element = document.getElementById("style-example");
element.style.backgroundColor = "blue";
element.style.fontSize = "16px"; 修改元素属性
使用setAttribute方法或直接访问属性：
const link = document.querySelector("a");
link.setAttribute("href", "https://new-url.com");
link.className = "updated-class"; // 直接修改class 动态添加/移除类名
通过classList添加、移除或切换类名：
const box = document.querySelector(".box");
box.classList.add("active");
box.classList.remove("inactive");
box.classList.toggle("hidden"); 修改表单元素值
直接赋值给value或checked等属性：
const input = document.getElementById("username");
input.value = "新用户";
const checkbox = document.getElementById("agree");
checkbox.checked = true; 监听事件并触发修改
通过事件监听器实现交互式修改：
button.addEventListener("click", () => {
const output = document.getElementById("output");
output.textContent = "按钮已点击";
}); 使用数据驱动修改（如框架）
在Vue/React等框架中，通过状态管理间接修改DOM：
// Vue示例
this.message = "更新后的数据";
// React示例
setState({ content: "新内容" }); 注意事项
- 直接操作DOM可能引发性能问题，建议批量修改或使用文档片段（
DocumentFragment）。 - 框架应用中优先遵循数据驱动原则，避免直接操作DOM。
