DOM的方法

DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 文档的接口，使文档操作变得非常优雅、简便。

DOM 最大的特点就是将 HTML 文档表示为 “节点树”。

DOM 元素/节点：就是渲染到页面上的，一个个的 HTML 标签体（标签 + 属性 + 内容）。

常用的DOM方法：

1. 创建节点

document.createElement(tagName)：创建一个新的元素节点。tagName 是你想要创建的元素的名称（例如 "div"、"p" 等）。

document.createTextNode(data)：创建一个新的文本节点。data 是你想要添加到文本节点中的文本内容。

document.createDocumentFragment()：创建一个空的文档片段。文档片段是一个轻量级的文档对象，可以用来暂时存储多个节点。通常，当你需要一次性添加多个节点到DOM中时，可以先将它们添加到文档片段中，然后再将文档片段添加到DOM中，这样可以提高性能。

2. 插入节点

parent.appendChild(child)：将一个节点（child）添加到另一个节点（parent）的子节点列表的末尾。

parentElement.insertBefore(newElement, targetElement)：将一个节点（newElement）插入到另一个节点（targetElement）之前，作为parentElement的子节点。

3. 移除节点

node.removeChild(child)：从父节点中移除一个子节点。

4. 查找节点

document.getElementById(id)：通过元素的ID查找一个元素。

element.getElementsByTagName(tagName)：返回一个包含具有指定标签名称的所有元素的NodeList。

element.getElementsByClassName(className)：返回一个包含具有指定类名的所有元素的NodeList。

document.querySelector(selector) 和 document.querySelectorAll(selector)：使用CSS选择器来查找一个或多个元素。

5. 修改节点

element.innerHTML：获取或设置元素的HTML内容。

element.textContent：获取或设置元素的文本内容。

element.setAttribute(name, value) 和 element.getAttribute(name)：获取或设置元素的属性值。

element.removeAttribute(name)：移除元素的属性。

6. 其他常用方法

node.parentNode：获取节点的父节点。

node.childNodes：获取节点的子节点列表（包括元素节点、文本节点和注释节点）。

node.firstChild 和 node.lastChild：获取节点的第一个和最后一个子节点。

node.nextSibling 和 node.previousSibling：获取节点的下一个和上一个兄弟节点。