API节点操作

一、节点概述

        网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

​        HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

        一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点nodeType为第一层

属性节点nodeType为第二层

文本节点nodeType为第三层(文本节点包含文字、空格、换行等)

二、节点层级

        利用上述的DOM树可以把节点分为不同的层级关系，常见的是父子兄层级关系。

三、父级节点

        node.parentNode

        parentNode属性可返回某节点的父节点，注意是最近的一个父节点

        如果指定的节点没有父节点则返回null

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>

四、子节点

        (1)所有子节点

                1.parentNode.childNodes(标准)

                parentNode.childNodes返回包含指定节点的子节点的集合，该集合为及时更新的集合

                这里的返回值包含了所有的子节点，包括元素节点，文本节点等。

        (2)子元素节点

                2.parentNode.children(非标准)

                parentNode.children是一个只读属性，返回所有的子元素节点。他只返回子元素节点，其余节点不返回。

      区别：

                1.返回所有的子节点，包括元素节点，文本节点等

                2.只返回子元素节点，其余不返回

    <script>
        //获取ul下所有li
        let lis = document.querySelector('ul').querySelectorAll('li')
        //获取ul所有子节点
        let nodes = document.querySelector('ul').childNodes
        console.log(nodes)
        console.log(nodes[0].nodeType)
        console.log(nodes[1].nodeType)

        let nodes02 = document.querySelector('ul').children
        console.log(nodes02);
        console.log(nodes02[2].nodeType);
    </script>

        (3)第一个子节点

                parentNode.firstChild

                firstChild返回第一个子节点，找不到返回null。同样，也是包含所有的节点。

        (4)最后一个子节点

                parentNode.lastChild

                lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

        (5)第一个子元素节点

                parentNode.firstElementChild

                firstElementChild返回第一个子元素节点，找不到则返回null

        (6)最后一个子元素节点

                parentNode.lastElmentChild

                lastElmentChild返回最后一个子元素节点，找不到则返回null

    <ol>
        <li>li01</li>
        <li>li02</li>
        <li>li03</li>
        <li>li04</li>
        <li>li05</li>
    </ol>

    <script>
        let ol = document.querySelector('ol')
        console.log(ol.firstChild)
        console.log(ol.lastChild)

        console.log(ol.firstElementChild)
        console.log(ol.lastElementChild)

        //返回所有子元素节点 node.children
    </script>

五、兄弟节点

        (1)下一个兄弟节点

                node.nextSibling

                nextSibling返回当前元素的下一个兄弟节点，找不到返回null

       (2)上一个兄弟节点

                node.previousSibling

                previousSbling返回当前元素上一个兄弟节点，找不到则返回null

    <script>
        let div =  document.querySelector('div')
        //返回兄弟节点,包含元素节点或者其他节点
        console.log(div.nextSibling); 
        console.log(div.previousSibling); 

        //只返回兄弟元素节点，只包含元素节点
        console.log(div.nextElementSibling); 
        console.log(div.previousElementSibling); 
    </script>

六、添加节点

        (1)node.appendChild(child)

        node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。

        (2)node.insertBefore(child,指定元素)

        node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。

    <ul>
        <li>东邪</li>
        <li>南帝</li>
    </ul>

    <script>
        //创建元素节点
        let li = document.createElement('li')
        //添加节点 node.appendchild() 给父节点的子节点列表添加节点
        let ul = document.querySelector('ul')
        ul.appendChild(li)

        //insertBefore(child,指定元素) 把元素添加到指定元素之前
        let li02 = document.createElement('li')
        ul.insertBefore(li02,ul.children[0])
    </script>

七、删除节点

        (1)node.removeChild(child)

        node.removeChild()方法从node节点中删除一个子节点，返回删除的节点。

    <button>删除</button>
    <ul>
        <li>东邪</li>
        <li>西毒</li>
        <li>南帝</li>
        <li>北丐</li>
    </ul>

    <script>
        //1.找元素对象
        var btn = document.querySelector('button')
        var ul = document.querySelector('ul')

        btn.onclick = function(){
            
            ul.removeChild(ul.children[ul.children.length-1])
            if (ul.children.length == 0) {
                this.disabled = true
            }                                           
        }
    </script>