深入理解 JavaScript DOM 操作

一、DOM 操作分类

（一）元素查找

1. 根据 ID 值查找：getElementById()，返回符合条件的第一个对象。

        var aa = document.getElementById("aa");console.log(aa);

1. 根据类名查找：getElementsByClassName()，返回符合条件的对象组成的数组。

        var arr = document.getElementsByClassName("aa");console.log(arr);

1. 根据元素名称查找：getElementsByTagName()，返回符合条件组成的数组。

        var arr = document.getElementsByTagName("div");console.log(arr);console.log(arr.length);

1. 根据选择器查找：querySelector()返回符合条件的第一个对象；querySelectorAll()返回所有符合条件的对象组成的数组。

        var obj = document.querySelector(".aa");console.log(obj);var allObjs = document.querySelectorAll(".aa");console.log(allObjs);

（二）关系查找

1. 找父亲：parentElement、parentNode。

        var childElement = document.querySelector(".child");var parent = childElement.parentElement;console.log(parent);

1. 找孩子：childNodes、children。

        var parentElement = document.querySelector(".parent");var childNodes = parentElement.childNodes;console.log(childNodes);var children = parentElement.children;console.log(children);

1. 第一个孩子：firstChild。

        var parentElement = document.querySelector(".parent");var firstChild = parentElement.firstChild;console.log(firstChild);

1. 最后一个孩子：lastChild、lastElementChild。

        var parentElement = document.querySelector(".parent");var lastChild = parentElement.lastChild;console.log(lastChild);var lastElementChild = parentElement.lastElementChild;console.log(lastElementChild);

1. 找上一个元素：previousElementSibling、previousSibling。

        var currentElement = document.querySelector(".current");var previousElement = currentElement.previousElementSibling;console.log(previousElement);var previousSibling = currentElement.previousSibling;console.log(previousSibling);

1. 找下一个元素：nextElementSibling、nextSibling。

        var currentElement = document.querySelector(".current");var nextElement = currentElement.nextElementSibling;console.log(nextElement);var nextSibling = currentElement.nextSibling;console.log(nextSibling);

（三）元素修改

1. 修改内容：innerHTML会把里面的内容解析，innerText会把引号内的内容当成文本处理，value可修改input里的值。

        var obj = document.querySelector(".aa");obj.innerHTML = "<h1>帅哥</h1>";obj.innerText = "<h1>帅哥</h1>";var inputElement = document.querySelector("input");inputElement.value = "new value";

1. 修改属性：原生属性可通过对象。属性 = 值的方式修改，自定义属性可通过setAttribute设置、getAttribute获取。

1. 修改样式：可以通过对象.style. 属性 = 值、对象.style.cssText=""、修改对象的className属性结合 CSS 来达到修改样式的目的。

        var obj = document.querySelector(".aa");obj.style.background = "red";obj.style.cssText = "background:red; color:yellow";obj.className = "red";

（四）元素添加

1. 创建元素：createElement。

        var newNode = document.createElement("h1");newNode.innerHTML = "新添加的元素";newNode.className = 'cccccc';newNode.style.background = "yellow";

1. 复制元素：可设置参数为false进行浅复制，只复制外壳，设置为true复制全部。

        var originalElement = document.querySelector(".original");var clonedElement = originalElement.cloneNode(false);var clonedElementFull = originalElement.cloneNode(true);

1. 添加元素：appendChild添加到子元素最后位置，insertBefore在某个子元素前添加，replaceChild替换掉该元素。

        var container = document.querySelector(".cc");container.appendChild(newNode);var existingElement = document.querySelector(".existing");container.insertBefore(newNode, existingElement);var elementToReplace = document.querySelector(".toReplace");container.replaceChild(newNode, elementToReplace);

（五）元素删除

父级元素调用删除的方法removeChild(要删除的元素)。

        var parentElement = document.querySelector(".parent");var childToRemove = document.querySelector(".toRemove");parentElement.removeChild(childToRemove);

二、知识补充与优化建议

（一）性能优化

在进行大量 DOM 操作时，尽量减少频繁的直接操作 DOM，可以先在内存中对数据进行处理，然后一次性更新 DOM，以提高性能。例如，当需要动态添加多个元素时，可以先将这些元素构建成一个字符串或者数组，最后一次性添加到 DOM 中。

        var elementsToAdd = [];for (var i = 0; i < 10; i++) {var newElement = document.createElement("div");newElement.textContent = "Element " + i;elementsToAdd.push(newElement);}var container = document.querySelector(".container");container.innerHTML = "";elementsToAdd.forEach(element => container.appendChild(element));

（二）事件委托

利用事件冒泡的原理，将事件绑定在父元素上，通过判断事件源来处理子元素的事件，这样可以减少事件绑定的数量，提高性能。

        var parent = document.querySelector(".parent");parent.addEventListener("click", function(event) {if (event.target.classList.contains("child")) {console.log("Child element clicked");}});

（三）跨浏览器兼容性

不同浏览器对 DOM 操作的实现可能会有一些差异，在实际开发中需要考虑到兼容性问题，可以使用一些成熟的库或框架来解决兼容性问题。例如，使用 jQuery 可以简化 DOM 操作，并且在不同浏览器中有较好的兼容性。

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function() {$("#element").click(function() {console.log("Clicked using jQuery");});});</script>