节点分为元素节点、属性节点、文本节点。

3.1 查询节点

        <div id="app">
        hello world
        <p>test1</p>
        <p>test2</p>
        <p>test3</p>
        <p>test4</p>
    </div>
    <script>
        var app = document.getElementById("app");
        var id =app.getAttributeNode("id");
        var child = app.childNodes;//获取所有子元素节点包括回车
        var children = app.children;//获取所有子节点
        console.log(app.nodeType)
        console.log(app.firstChild.nodeType)
        console.log(id.nodeType)
        console.log(child) //9个（文本，p标签，文本（回车），p标签，文本，p标签，文本，p标签，文本）
        console.log(children)
    </script>

3.2 增加节点

<!-- 增加节点 -->
    <div id="app-two"></div>
    <script>
        var appTwo = document.getElementById("app-two");
        var pTwo = document.createElement("p");
        var txt = document.createTextNode("hello world");
        pTwo.appendChild(txt)
        appTwo.appendChild(pTwo)
    </script>

3.3 删除节点

    <!-- 删除节点 -->
    <div id="app-four">
        <div id="child-four"></div>
    </div>
    <script>
        var appFour = document.getElementById("app-four");
        var childFour = document.getElementById("child-four");
        appFour.removeChild(childFour)
    </script>

3.4 插入节点

    <!-- 插入节点 -->
    <ul id="app-three">
        <li>html</li>
        <li id="js-three">JAVASCRIP</li>
    </ul>
    <script>
        var appThree = document.getElementById("app-three");
        var jsThree = document.getElementById("js-three");
        var liThree = document.createElement("li");//创造标签li
        liThree.innerHTML = "vue";//给标签添加文本
        appThree.insertBefore(liThree,jsThree)//将标签插入到js前面
    </script>

3.5 改变节点

    <!-- 改变节点 -->
    <div id="app-five">
        <div id="child-five"></div>
    </div>
    <script>
        var app = document.getElementById("app-five");
        var childFive = document.getElementById("child-five");
        var pFive = document.createElement("p");
        pFive.innerHTML = "hello world";
        app.replaceChild(pFive,childFive)
    </script>

3.6 克隆节点

    <!-- 克隆节点 -->
    <div id="app-six">
        <div id="child-six">克隆</div>
    </div>
    <script>
        var app = document.getElementById("app-six");
        var childSix = document.getElementById("child-six");
        var pSix = childSix.cloneNode(true);
        app.appendChild(pSix)
    </script>