2024年3月30日发(作者：)

DOM的常见方法

DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的API

（应用程序界面）。它提供了一组方法，允许开发人员通过JavaScript

访问和修改文档的内容、结构和样式。下面是DOM的一些常见方法：

1. getElementById(id)

该方法通过指定的id属性值获取文档中的元素节点。它返回匹配的

第一个元素节点，如果没有匹配的元素，则返回null。

2. getElementsByClassName(className)

该方法通过指定的class属性值获取文档中的元素节点。它返回一个

包含所有匹配元素的HTMLCollection对象。

3. getElementsByTagName(tagName)

4. querySelector(selector)

该方法通过指定的CSS选择器获取文档中的第一个匹配元素节点。它

返回匹配的第一个元素节点，如果没有匹配的元素，则返回null。

5. querySelectorAll(selector)

该方法通过指定的CSS选择器获取文档中的所有匹配元素节点。它返

回一个包含所有匹配元素的NodeList对象。

6. createElement(tagName)

7. createTextNode(data)

该方法创建一个包含指定文本内容的文本节点。它返回一个新创建的

文本节点。

8. appendChild(node)

该方法将指定节点作为最后一个子节点添加到目标节点的子节点列表

中。

9. removeChild(node)

该方法从目标节点的子节点列表中删除指定的子节点。

10. replaceChild(newNode, oldNode)

该方法将指定的新节点替换掉目标节点的一个子节点。

11. parentNode

该属性返回当前节点的父节点。

12. childNodes

该属性返回一个包含当前节点所有子节点的NodeList对象。

13. firstChild

该属性返回当前节点的第一个子节点。

14. lastChild

该属性返回当前节点的最后一个子节点。

15. nextSibling

该属性返回当前节点的下一个兄弟节点。

16. previousSibling

该属性返回当前节点的上一个兄弟节点。

17. innerHTML

该属性设置或返回当前节点及其所有子节点的HTML表示。它可以用

来读取或修改节点的内容。

18. style

该属性返回当前节点的样式对象，允许开发人员直接访问和修改节点

的样式属性。

19. classList

该属性返回当前节点的类名列表，允许开发人员直接访问和修改节点

的类名。

20. addEventListener(event, function, useCapture)

该方法为当前节点添加一个事件监听器。它接受三个参数：事件类型、

事件处理函数和一个布尔值，用于指定事件是在捕获阶段还是冒泡阶段触

发。

这些是DOM的一些常见方法，开发人员可以使用它们来访问和操作文

档中的元素节点、属性和内容。DOM提供了一种强大的方式来动态地更新

网页的外观和行为。