DOM操作：从入门到精通，一文掌握！

前端

2023-11-16 03:32:30

DOM操作入门

DOM是什么？

DOM（Document Object Model，文档对象模型）是HTML文档的编程接口，它将HTML文档表示为一个树状结构，每个节点代表HTML文档中的一个元素。通过DOM，我们可以动态地修改HTML文档的内容、结构和样式。

如何操作DOM？

操作DOM主要有以下几种方式：

获取DOM节点 ：可以通过document.getElementById()、document.getElementsByClassName()、document.querySelector()等方法获取DOM节点。
插入节点 ：可以通过parentNode.insertBefore()方法将一个节点插入到另一个节点之前。
删除节点 ：可以通过parentNode.removeChild()方法删除一个节点。
修改节点 ：可以通过node.setAttribute()、node.style.cssText等方法修改节点的属性和样式。
事件处理 ：可以通过node.addEventListener()方法为节点添加事件监听器，当事件触发时执行相应的回调函数。
性能优化 ：DOM操作可能会影响页面的性能，因此需要对DOM操作进行性能优化，如使用文档碎片、减少DOM查询、缓存DOM节点等。

DOM操作进阶

插入节点

除了parentNode.insertBefore()方法，还可以通过node.appendChild()方法将一个节点插入到另一个节点的末尾。另外，还可以使用document.createDocumentFragment()方法创建一个文档碎片，然后将多个节点添加到文档碎片中，最后再将文档碎片插入到DOM树中，这样可以减少DOM查询的次数，提高性能。

删除节点

除了parentNode.removeChild()方法，还可以通过node.remove()方法删除一个节点。另外，还可以使用NodeIterator接口遍历DOM树，并删除符合指定条件的节点。

修改节点

除了node.setAttribute()和node.style.cssText方法，还可以通过node.innerHTML属性修改节点的HTML内容，或者通过node.outerHTML属性修改节点及其所有子节点的HTML内容。

事件处理

除了node.addEventListener()方法，还可以通过node.onclick、node.onmouseover等属性为节点添加事件监听器。另外，还可以使用事件委托的方式来简化事件处理，即为父节点添加事件监听器，然后在回调函数中判断事件的目标节点是否为子节点，如果是则执行相应的操作。

性能优化

除了使用文档碎片、减少DOM查询、缓存DOM节点等方法进行性能优化外，还可以使用MutationObserver接口来监听DOM的变化，并在DOM发生变化时执行相应的操作，这样可以避免不必要的DOM操作，提高页面的性能。

DOM操作实例

动态添加元素

// 获取父节点
const parentNode = document.getElementById("parent");

// 创建一个子节点
const childNode = document.createElement("div");
childNode.innerHTML = "Hello World";

// 将子节点插入到父节点中
parentNode.insertBefore(childNode, null);

动态删除元素

// 获取要删除的节点
const nodeToDelete = document.getElementById("node-to-delete");

// 删除节点
nodeToDelete.parentNode.removeChild(nodeToDelete);

动态修改元素

// 获取要修改的节点
const nodeToModify = document.getElementById("node-to-modify");

// 修改节点的属性
nodeToModify.setAttribute("style", "color: red;");

// 修改节点的样式
nodeToModify.style.backgroundColor = "yellow";

动态添加事件

// 获取要添加事件的节点
const nodeToAddEvent = document.getElementById("node-to-add-event");

// 添加事件监听器
nodeToAddEvent.addEventListener("click", function() {
  alert("Hello World!");
});

性能优化

// 使用文档碎片创建多个节点
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const node = document.createElement("div");
  node.innerHTML = "Hello World";
  fragment.appendChild(node);
}

// 将文档碎片插入到DOM树中
parentNode.insertBefore(fragment, null);

// 使用MutationObserver监听DOM的变化
const observer = new MutationObserver(function(mutations) {
  for (let mutation of mutations) {
    if (mutation.type === "childList") {
      console.log("DOM has changed!");
    }
  }
});

observer.observe(document, {
  childList: true
});