掌握DOM操作是前端开发核心，需先获取元素（如getElementById、querySelector），再修改内容（innerHTML、textContent）、属性（setAttribute）或结构（createElement、appendChild），最后通过style或classList动态控制样式，结合实际场景高效操作节点。
JavaScript操作DOM是前端开发的核心技能之一。通过DOM API，我们可以动态地读取、修改页面结构、样式和内容，实现交互功能。以下是常用的DOM操作API总结，适合js前端基础学习和日常开发参考。
1. 获取DOM元素
要操作页面元素，第一步是获取对应的DOM节点。常用的方法有：
- document.getElementById('id')：通过元素的ID获取单个元素，返回一个对象或null。
- document.querySelector('selector')：使用CSS选择器获取第一个匹配的元素，适用于类、标签、属性等选择器。
- document.querySelectorAll('selector')：返回所有匹配元素的NodeList（类数组），可遍历操作。
- document.getElementsByClassName('class')：通过类名获取元素集合，返回HTMLCollection。
- document.getElementsByTagName('tag')：通过标签名获取元素集合，也返回HTMLCollection。
注意：getElementsByClassName和getElementsByTagName返回的是动态集合，而querySelectorAll返回的是静态快照。
2. 修改元素内容与属性
获取元素后，常需要修改其内容或属性：
立即学习“Java免费学习笔记（深入）”；
- element.innerHTML：设置或获取元素内部的HTML字符串，可包含标签。
- element.textContent：设置或获取元素的纯文本内容，更安全，避免XSS风险。
- element.setAttribute('name', 'value')：设置元素的属性，如添加class或data属性。
- element.getAttribute('name')：获取指定属性的值。
- element.removeAttribute('name')：移除某个属性。
- element.id / element.className：直接读写id和class属性，也可用element.classList进行更灵活的类操作。
推荐使用classList处理类名，它提供了add、remove、toggle、contains等方法，更清晰安全。
3. 操作元素结构
可以动态创建、插入、删除或移动DOM节点：
- document.createElement('div')：创建一个新的元素节点。
- parent.appendChild(child)：将子元素添加到父元素的末尾。
- parent.insertBefore(newNode, referenceNode)：在指定子节点前插入新节点。
- element.removeChild(child)：从父元素中移除指定子元素。
- element.replaceChild(newNode, oldNode)：替换某个子节点。
- element.cloneNode(true/false)：复制节点，true表示深拷贝（包括子元素）。
创建元素后通常先设置属性和内容，再插入到文档中，避免频繁重绘。
4. 修改样式
通过JavaScript可以动态控制元素外观：
- element.style.property：直接设置行内样式，如element.style.color = 'red'。
- element.classList：通过添加/删除类来应用CSS规则，更推荐这种方式，结构与样式分离。
- getComputedStyle(element)：获取元素最终计算后的样式，只读。
注意：style只能读写行内样式，而getComputedStyle能获取实际渲染的样式值。
基本上就这些。掌握这些API，就能完成大多数DOM操作任务。关键是在实践中理解节点关系和操作顺序，写出高效、稳定的代码。
