使用过的jQuery的朋友，都知道jQuery是以DOM驱动为主的，频繁的操作DOM来完成具体的交互。

文档树是由各种类型的节点构成的，DOM操作实际上是对文档结构中的节点进行操作。文档结构中的节点类型很多，DOM操作的主要节点类型是元素节点、属性节点和文本节点。

元素节点：拥有一对开闭合的标签元素，比如div；
属性节点：元素节点具有的属性，比如a标签的href属性；
文本节点：就是DOM中呈现文本内容的节点。

常见的DOM操作就是查找节点、新增节点、删除节点、修改节点。那么查找节点就是通过之前介绍的DOM选择器来查找。

新增节点

新增节点，首先是创建一个节点，然后把它添加到指定位置，加入有这样的一段代码：

<!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 id="main">
        <li id="li1">id="li1"</li>
    </ul>
</body>

</html>

现在要在ul中添加一个li元素，过程：

<script>
        const container = document.querySelector("#main");
        const newLi = document.createElement("li");
        const newLiAttr = document.createAttribute("class");
        newLiAttr.value = "newLi";
        newLi.setAttributeNode(newLiAttr);

        const newLiText = document.createTextNode("新增文本");
        newLi.appendChild(newLiText);

        container.appendChild(newLi)
    </script>

结果：

JavaScript：DOM操作_1024程序员节


将新增元素放在某个元素的前面：

const li1 = document.getElementById("li1")
        container.insertBefore(newLi, li1);

JavaScript：DOM操作_元素节点_02

删除节点

删除节点，包含删除元素节点、删除属性节点、删除文本节点，比如：

const li1 = document.getElementById("li1");
        container.removeChild(li1)

找到我们需要删除的元素，然后使用removeChild删除对应的元素即可：

JavaScript：DOM操作_html_03


删除属性节点：removeAttribute

const li1 = document.getElementById("li1");
        li1.removeAttribute("id")

JavaScript：DOM操作_元素节点_04


第一个Li元素的id属性已经被删除。·

删除文本节点：removeChild

const li1 = document.getElementById("li1");
        li1.removeChild(li1.childNodes[0])

这段代码是删除节点本身的文本节点，效果如图：

JavaScript：DOM操作_1024程序员节_05

修改节点

修改节点分为修改元素节点、修改属性节点和修改文本节点

修改元素节点

实际上是将元素节点替换成另一个元素，使用replaceChild()函数，replaceChild函数是父元素在调用，接收两个参数，第一个参数为新元素，第二个元素为需要替换的元素：

<!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>
    <div id="main">
        <div id="div1">被替换的元素</div>
        <div id="div2" class="classA" style="color: red;">修改属性节点的元素</div>
        <div id="last">最后的节点</div>
    </div>

    <script>const container = document.querySelector("#main");
        const div1 = document.querySelector("#div1");

        const newDiv = document.createElement("div");
        const newDivText = document.createTextNode("新建文本内容");

        newDiv.appendChild(newDivText);

        // 替换div1的文本
        container.replaceChild(newDiv, div1)</script>
</body>

</html>

效果如图：原本文本已经被替换

JavaScript：DOM操作_html_06

修改属性节点

是通过getAttribute函数和setAttribute函数来获取和设置属性值；第二种方式是直接修改属性名。

比如现在修改div2的style属性：

const div2 = document.querySelector("#div2");
        div2.setAttribute("style", "color:blue")

JavaScript：DOM操作_html_07

修改文本节点

将innerHTML属性改为需要修改的内容就好了。