【小白学前端】JS：节点操作

1、什么是节点？

页面中的所有内容都是节点：标签、文本、属性、空格换行都是；
节点至少有节点类型nodeType、节点名称nodeName、节点值nodeValue三个基本属性。

2、为什么需要节点操作？

获取元素的两种方式：
（1）document.querySelector()
document.getElemntsById()
document.getElemntsByTagName()
** 逻辑性不强，繁琐**
（2）利用节点的层次关系获取元素
利用父子兄的节点关系
** 逻辑性强，但是兼容性差**
nodeType元素节点1（主要）， 属性节点2， 文本节点3（ 文字， 空格， 换行）

（父节点和子节点）案例：

<div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        // 打印元素对象
        // nodeType元素节点1（主要）， 属性节点2， 文本节点3（ 文字， 空格， 换行）
        // 1、父节点parentNode
        // 之前的写法：
        var ewm = document.querySelector('.erweima')
            // var box = document.querySelector('.box')
        console.dir(ewm);
        console.log(ewm.parentNode);
        // 得到的是离元素最近的父节点,找不到则返回为空
        // 2、子节点
        // （1）DOM提供的API获取方法
        var ul_lis = document.querySelector('ul').querySelectorAll('li')
            // （2）子节点写法（包含元素、文本、属性节点）
        var ul = document.querySelector('ul')
        console.log(ul.childNodes);
        // 注意：打印输出了9个节点，页面中所有的元素都是节点
        // ul和li之间的换行，li和li之间的换行（5）；li（4）
        console.log(ul.childNodes[0].nodeType); //文本节点是3
        // 只获取元素节点,for遍历判断NodeType是否等于1选取
        // 3、获取所有的子元素节点,（直系一级）
        console.log(ul.children);
    </script>

兄弟节点案例：

 <div>我是div</div>
    <span>我是span</span>
    <span>我是span1</span>
    <script>
        var div = document.querySelector('div')
        console.log(div.previousSibling); //上一个兄弟节点（换行文本节点）
        console.log(div.nextSibling); //得到下一个兄弟节点（换行文本节点）
        console.log(div.nextElementSibling); //下一个元素兄弟节点，有兼容性问题
        // 封装函数解决兼容性
        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) { //先获取所有的兄弟节点
                if (el.nodeType === 1) { //在选取元素节点
                    return el; //只返回第一个兄弟节点
                }
            }
            return null;
        }
        console.log(getNextElementSibling(div));
    </script>