JavaScript DOM操作实战：从入门到精通

JavaScript DOM 核心操作：从内容到节点的实战指南

一、内容操作

1. 文本内容

   • textContent：获取或设置元素的纯文本内容

   const element = document.getElementById("demo"); console.log(element.textContent); // 获取内容 element.textContent = "新文本"; // 设置内容

   • 与innerText的区别：textContent获取所有文本（包括隐藏元素），innerText只渲染可见文本

2. HTML内容

   • innerHTML：操作元素的HTML结构

   element.innerHTML = "<strong>加粗文本</strong>"; // 插入带标签的内容

   • 注意：直接插入HTML可能引发XSS攻击，需对用户输入做转义处理

二、属性操作

1. 标准属性

   • 直接访问：element.id、element.className
   • 通用方法：

     element.setAttribute("data-id", "123"); // 设置属性 console.log(element.getAttribute("data-id")); // 获取属性 element.removeAttribute("data-id"); // 删除属性

2. 自定义属性

   • 推荐使用data-*规范：

   <div>console.log(element.dataset.userId); // 通过 dataset 访问

三、样式操作

1. 修改CSS类

   element.classList.add("active"); // 添加类 element.classList.remove("hidden"); // 移除类 element.classList.toggle("dark-mode"); // 切换类

2. 直接修改样式

   element.style.color = "#ff0000"; // 行内样式 element.style.setProperty("--primary-color", "blue"); // 修改CSS变量

四、节点操作（核心）

1. 节点创建

   const newDiv = document.createElement("div"); // 创建元素 const textNode = document.createTextNode("动态内容"); // 创建文本节点

2. 节点插入

   parentElement.appendChild(newDiv); // 插入子节点末尾 parentElement.insertBefore(newDiv, referenceElement); // 在指定节点前插入

3. 节点替换与删除

   parentElement.replaceChild(newDiv, oldChild); // 替换节点 parentElement.removeChild(oldChild); // 删除节点

4. 节点遍历

   console.log(parentElement.firstChild); // 首个子节点 console.log(parentElement.lastChild); // 末尾子节点 console.log(node.nextSibling); // 下一个兄弟节点

五、事件处理

1. 事件监听

   element.addEventListener("click", (event) => { console.log("点击坐标:", event.clientX, event.clientY); });

2. 事件委托
   利用事件冒泡提高性能：

   document.getElementById("list").addEventListener("click", (e) => { if(e.target.tagName === "LI") { console.log("点击列表项:", e.target.textContent); } });

六、实战注意事项

1. 性能优化

   • 批量操作：使用DocumentFragment减少重绘

   const fragment = document.createDocumentFragment(); for(let i=0; i<100; i++) { const li = document.createElement("li"); fragment.appendChild(li); } document.getElementById("list").appendChild(fragment);

2. 现代API替代方案

   • 使用querySelector/querySelectorAll替代getElementById等

   document.querySelector(".container > button"); // CSS选择器语法

总结

DOM操作的核心在于理解节点树结构，通过内容→属性→样式→节点的递进式操作，结合事件机制实现动态交互。建议优先使用现代API（如classList、dataset）并注意性能与安全性，可显著提升开发效率。