JavaScript基础教程（六十六）HTML DOM之元素 (节点)：掌控网页的魔法，深度解析JavaScript DOM节点操作-优快云博客

什么是DOM节点？

在HTML文档中，每个部分都是一个节点：整个文档是文档节点，每个HTML元素是元素节点，文本是文本节点，属性是属性节点。这种层级结构形成了树形关系，称为DOM树。

主要节点类型

// 获取节点类型
console.log(document.nodeType); // 9 (DOCUMENT_NODE)
console.log(document.body.nodeType); // 1 (ELEMENT_NODE)
console.log(document.getElementById("myText").firstChild.nodeType); // 3 (TEXT_NODE)

动态操作DOM节点

创建新元素

// 创建新段落元素
const newParagraph = document.createElement("p");
newParagraph.textContent = "这是动态创建的段落";
newParagraph.className = "dynamic-text";

// 设置属性
newParagraph.setAttribute("data-id", "123");

添加节点到文档

// 追加到现有元素
document.body.appendChild(newParagraph);

// 插入到特定位置
const container = document.getElementById("container");
const firstChild = container.firstChild;
container.insertBefore(newParagraph, firstChild);

// 使用现代方法
container.insertAdjacentHTML("beforeend", "<p>新插入的内容</p>");

删除和替换节点

// 删除节点
const oldElement = document.getElementById("oldElement");
oldElement.parentNode.removeChild(oldElement);

// 现代删除方法
oldElement.remove();

// 替换节点
const newElement = document.createElement("div");
newElement.textContent = "新内容";
oldElement.replaceWith(newElement);

实际应用示例

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作示例</title>
</head>
<body>
    <ul id="userList">
        <li>用户1</li>
        <li>用户2</li>
    </ul>
    
    <script>
        // 动态添加用户
        function addUser(name) {
            const list = document.getElementById("userList");
            const newItem = document.createElement("li");
            newItem.textContent = name;
            list.appendChild(newItem);
        }
        
        // 添加新用户
        addUser("新用户");
        
        // 事件委托示例
        document.getElementById("userList").addEventListener("click", function(e) {
            if(e.target.tagName === "LI") {
                alert("点击了: " + e.target.textContent);
            }
        });
    </script>
</body>
</html>