添加、删除、替换、查找到某个DOM节点的方法？

一、DOM添加节点

innerHTML新增DOM节点
创建一个文本节点 createTextNode() 创建标签节点 createElement( ) 插入：在最后面插入 appendChild() 在指定的元素前面插入 insertBefore(要插入的元素 , 指定的元素)

HTML代码（index.html）：

js 复制代码

<!DOCTYPE html>
<html>

<head>
    <title>新增DOM方法示例</title>
    <style>
        .new-element {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>欢迎来到我的网站</h1>
    <div id="content">
        <p>这是一段内容。</p>
    </div>
    <button id="addButton">添加元素</button>
    <script src="index.js"></script>
</body>

</html>

JavaScript代码（index.js）：

js 复制代码

document.addEventListener("DOMContentLoaded", function () {
    var addButton = document.getElementById("addButton");
    addButton.addEventListener("click", function () {
        // 创建一个新的段落元素节点  
        var newParagraph = document.createElement("p");

        // 将新段落添加到id为"content"的div元素的末尾  
        var contentDiv = document.getElementById("content");
        contentDiv.appendChild(newParagraph);

        // 在新段落之前插入一个新的div元素节点  
        var newDiv = document.createElement("div");
        newDiv.className = "new-element";
        newDiv.innerHTML = "这是一个新插入的div元素。";
        contentDiv.insertBefore(newDiv, newParagraph);

        // 将新段落替换为一个新的h2元素节点  
        var newH2 = document.createElement("h2");
        newH2.innerHTML = "标题已更改";
        contentDiv.replaceChild(newH2, newParagraph);
    });
});

这个例子中，我们首先在HTML中定义了一个按钮和一个包含一段内容的div元素。然后，在JavaScript代码中，我们为按钮添加了一个点击事件监听器。当按钮被点击时，我们使用新增的DOM方法创建了一个新的p元素节点，并添加了文本内容。然后，我们将新段落添加到div元素的子节点列表的末尾，并在新段落之前插入了一个新的div元素节点。最后，我们将新段落替换为一个新的h2元素节点。通过这些新增的DOM方法，我们可以更方便地操作和修改DOM结构。

二、DOM删除节点

remove( ) 删除自己和所有的子元素
removeChild( ) 删除指定的子元素，只能删除儿子，不能删除孙子
innerHTML = ' ' 删除所有的子元素

举个例子：

js 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除DOM节点示例</title>
    <style>
        #myDiv {
            padding: 20px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div id="parentDiv">
        <div id="myDiv">我是一个div</div>
    </div>
    <button onclick="deleteDiv()">删除div</button>

    <script>
        function deleteDiv() {
            var parentDiv = document.getElementById("parentDiv");
            var myDiv = document.getElementById("myDiv");
            parentDiv.removeChild(myDiv);
        }  
    </script>
</body>

</html>

</html>

下面这段代码创建了一个简单的网页，其中包含一个父div元素和一个子div元素。用户可以通过点击"删除div"按钮来删除子div元素。

三、DOM替换节点

替换子元素 replaceChild(new , old)

js 复制代码

<!DOCTYPE html>
<html>

<head>
    <title>DOM节点替换示例</title>
    <style>
        .new-node {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="old-node">旧节点</div>
    <button onclick="replaceNode()">替换节点</button>
    <script>
        function replaceNode() {
            // 获取要被替换的旧节点  
            var oldNode = document.getElementById('old-node');
            // 创建新节点  
            var newNode = document.createElement('div');
            newNode.innerHTML = '新节点';
            newNode.className = 'new-node'; // 为新节点添加样式类  
            // 替换旧节点  
            oldNode.parentNode.replaceChild(newNode, oldNode);
        }
    </script>
</body>

</html>

以上这个例子中，我们首先在HTML中定义了一个旧节点和一个按钮。当用户点击按钮时，replaceNode函数会被调用。这个函数首先获取旧节点，然后创建一个新节点，并为其添加样式类。最后，使用replaceChild方法将旧节点替换为新节点。

四、查找DOM节点

查找当前元素的父级元素节点：parentNode

js 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>
            <p>11</p>
            <button>111</button>
        </li>
        <li>
            <p>22</p>
            <button>222</button>
        </li>
        <li>
            <p>33</p>
            <button>333</button>
        </li>
    </ul>

    <script>

        // 找父元素   parentNode

        var oBtns = document.querySelectorAll('button');
        for (var i = 0; i < oBtns.length; i++) {
            oBtns[i].onclick = function () {
                console.log(this.parentNode); //找到当前点击对象的父元素，当前点击对象是button，父元素为li

            }
        }

    </script>

</body>

</html>