深入理解 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>