【学习笔记40】DOM的节点操作

---

笔记首发

一、获取DOM子节点

• 子节点：元素.children
• 子元素节点：元素.childNodes

        <div class="box">
            <p>我是p标签</p>
            <span>我是span标签</span>
        </div>

        var oDiv = document.querySelector('div');

        // 获取元素的所有子级元素节点(只能获取到标签)
        console.log(oDiv.children);
        
        console.log(oDiv.childNodes);

解释说明

        /**
         * oDiv.childNodes:     ---> NodeList(5) [text, p, text, span, text]
         *  
         * 获取所有的子级节点(会把换行识别为一个文本, 标签当成元素节点)
         *      div结束标签的位置开始, 到p标签开始位置的换行会被识别为一个text
         *      p标签会被识别为一个元素节点
         *      p结束标签到span开始标签前的换行，会被识别为一个text
         *      span标签会被是被识别为一个元素节点
         *      span标签结束位置到div结束标签前的换行，会被识别为一个text
        */

二、获取DOM第一个子节点

• 第一个子节点：元素.firstChild
• 第一个子元素节点：元素.firstElementChild

        <div class="box">
            <p>我是p标签</p>
            <span>我是span标签</span>
        </div>

        var oDiv = document.getElementsByTagName('div')[0];
        // 获取的是元素内部第一个子节点 (不一定是子元素节点)
        console.log(oDiv.firstChild); 
        
        // 获取的是元素内部第一个子元素节点
        console.log(oDiv.firstElementChild);  

解释说明

        /**  
         *   console.log(oDiv.firstChild); 
         *   获取到div节点内的第一个子节点
         *       注意此时并不是获取到了第一个元素节点,
         *       而是div开始标签后到p开始标签前的一段换行, 这一段被识别为 text(文本节点)
         *
         *       除非你的HTML结构不写换行
        */

三、获取DOM最后一个子节点

• 最后一个子节点：元素.lastChild
• 最后一个子元素节点：元素.lastElementChild

        <div class="box">
            <p>我是p标签</p>
            <span>我是span标签</span>
        </div>

       var oDiv = document.querySelector('div');
        /* 
          获取最后一个子节点, 也就是span结束标签,
          到div结束标签前的一个换行, 这里会被识别为text
        */
       console.log(oDiv.lastChild);  
       // 获取最后一个子元素节点 ---> span
       console.log(oDiv.lastElementChild);  

四、获取兄弟节点

• 下一个兄弟节点：元素.nextSibling
• 下一个兄弟元素节点：元素.nextElementSibling
• 上一个兄弟节点：元素.previousSibling
• 上一个兄弟元素节点：元素.previousElementSibling

        <ul>
            <li id="a">1</li>
            <li id="b">2</li>
            <li id="c">3</li>
        </ul>

        var oli = document.getElementById('b');
        // console.log(oli)

        // 获取下一个兄弟节点
        console.log(oli.nextSibling);            // #text
        // 获取下一个兄弟元素节点
        console.log(oli.nextElementSibling);     // <li id="c"></li>

        // 获取上一个兄弟节点
        console.log(oli.previousSibling);        //#text
        // 获取上一个兄弟元素节点
        console.log(oli.previousElementSibling); // <li id="a"></li>

五、获取父级节点

• 父级节点：元素.parentNode

    <div>
        <ul>
            <li id="a">1</li>
            <li id="b">2</li>
            <li id="c">3</li>
        </ul>
    </div>

        // 获取元素的父级节点(最近的父元素)
        var oli = document.getElementById('b');
        console.log(oli.parentNode);

六、节点分类

    <ul x="100" y="200">
        <li>我是ul的子级</li>
    </ul>

1、节点分类

        var oUl = document.querySelector('ul');

        // 1. 元素节点
        var ele = oUl.firstElementChild;
        console.log(ele);

        // 2. 文本节点
        var text = oUl.firstChild;
        console.log(text);

        // 3. 属性节点
        var attr = oUl.attributes[0];
        console.log(attr);

2、nodeType节点类型

• 元素节点打印1
• 文本节点打印3
• 属性节点打印2

        var oUl = document.querySelector('ul');
        // 1. 元素节点
        var ele = oUl.firstElementChild;

        // 2. 文本节点
        var text = oUl.firstChild;

        // 3. 属性节点
        var attr = oUl.attributes[0];

        console.log(ele.nodeType);    // 元素节点打印1
        console.log(text.nodeType);   // 文本节点打印3
        console.log(attr.nodeType);   // 属性节点打印2

3、nodeName节点名称

• 元素节点节点名称(大写)
• 文本节点名称
• 属性节点名称就是属性名

        var oUl = document.querySelector('ul');
        // 1. 元素节点
        var ele = oUl.firstElementChild;

        // 2. 文本节点
        var text = oUl.firstChild;

        // 3. 属性节点
        var attr = oUl.attributes[0];

        console.log(ele.nodeName);   // 元素节点节点名称 大写的LI
        console.log(text.nodeName);  // 文本节点名称#text
        console.log(attr.nodeName);  // 属性节点名称就是属性名

4、nodeValue节点的值

• 元素节点是没有nodeValue
• 文本节点是实际的文本的值
• 属性节点是实际的属性值

        <ul x="100" y="200">ul的内容<li>我是ul的子级</li></ul>

        var oUl = document.querySelector('ul');
        // 1. 元素节点
        var ele = oUl.firstElementChild;

        // 2. 文本节点
        var text = oUl.firstChild;

        // 3. 属性节点
        var attr = oUl.attributes[0];

        console.log(ele.nodeValue);   // 元素节点是没有nodeValue
        console.log(text.nodeValue);  // 文本节点是实际的文本的值
        console.log(attr.nodeValue);  // 属性节点是实际的属性值