JavaScript DOM操作有哪些方法

JavaScript DOM（Document Object Model）操作是指与HTML文档进行交互的方法。以下是一些常用的DOM操作方法：

1. 获取元素：

   • getElementById(id)：通过元素的ID获取元素。
   • getElementsByClassName(className)：通过元素的类名获取元素集合。
   • getElementsByTagName(tagName)：通过元素的标签名获取元素集合。
   • querySelector(selector)：通过CSS选择器获取第一个匹配的元素。
   • querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素集合。

2. 修改元素内容：

   • innerHTML：获取或设置元素的HTML内容。
   • innerText：获取或设置元素的文本内容。
   • textContent：获取或设置元素的文本内容（包括子元素）。

3. 修改元素属性：

   • getAttribute(attributeName)：获取元素的属性值。
   • setAttribute(attributeName, value)：设置元素的属性值。
   • removeAttribute(attributeName)：删除元素的属性。

4. 修改元素样式：

   • style：直接通过元素对象的style属性修改样式（不推荐，应使用CSS类）。
   • classList：操作元素的类名。

5. 操作子元素和兄弟元素：

   • appendChild(childNode)：在元素末尾添加子节点。
   • insertBefore(newNode, referenceNode)：在指定节点之前插入新节点。
   • removeChild(childNode)：删除指定子节点。
   • replaceChild(newChild, oldChild)：替换指定子节点。
   • nextSibling：获取当前节点的下一个兄弟节点。
   • previousSibling：获取当前节点的上一个兄弟节点。

6. 遍历DOM树：

   • parentNode：获取当前节点的父节点。
   • childNodes：获取当前节点的所有子节点集合（包括文本节点和元素节点）。
   • firstChild：获取当前节点的第一个子节点。
   • lastChild：获取当前节点的最后一个子节点。

7. 创建和操作文档片段：

   • DocumentFragment：创建一个文档片段，用于临时存储DOM节点，以便一次性添加到文档中。

8. 事件处理：

   • 为元素添加事件监听器，如addEventListener(type, listener)和attachEvent(type, listener)（针对IE浏览器）。

9. 操作CSS样式表：

   • cssText：获取或设置元素的内联样式。
   • classList.add(className)、classList.remove(className)、classList.contains(className)：操作元素的类名。

10. 模拟用户交互：

    • click()、mouseover()、mouseout()等方法：模拟用户点击、鼠标悬停等交互行为。

这些方法提供了对HTML文档进行动态操作的能力，使得JavaScript在网页交互和动态内容生成方面非常有用。在使用这些方法时，应注意性能和浏览器兼容性，尤其是在处理大量DOM操作时，可能需要采用优化策略，如使用虚拟DOM库（如React）或批量修改DOM。