从零开始学 Web 之 DOM（四）节点

时间 2019-11-17

标签开始 web dom 节点栏目 HTML 繁體版

原文原文链接

你们好，这里是「 Daotin的梦呓」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓」公众号，欢迎你们订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！html

1、节点

一、节点的概念

页面中的全部内容，包括标签，属性，文本（文字，空格，回车，换行等），也就是说页面的全部内容均可以叫作节点。前端

二、节点相关的属性

2.一、节点分类

标签节点：好比 div 标签，p 标签等。node

属性节点：好比 class，value 等。chrome

文本节点：好比闭合标签中的文本内容。学习

2.二、节点属性

nodeType：节点的类型，它的值有 1,2,3 三种。测试

标签节点：值为 1spa

属性节点：值为 2firefox

文本节点：值为 3code

nodeName：节点的名字htm

标签节点：大写的标签名字

属性节点：小写的属性名字

文本节点：#text

nodeValue：节点的值

标签节点：null

属性节点：属性的值

文本节点：文本内容

三、获取相关节点

3.一、获取父节点和父元素

父节点只能是标签，不能是属性节点和文本节点，因此父节点也是父元素。

<body>
    <div id="dv">
        <p id="pid"></p>
        <span></span>
    </div>

    <script src="common.js"></script>
    <script>
        var dvObj = my$("pid");
        console.log(dvObj.parentNode);
        console.log(dvObj.parentElement);
    </script>
</body>

parentNode：获取元素的父节点。

parentElement：获取元素的父元素。

3.二、获取子节点和子元素

<body>
    <div id="dv">
        <p id="pid">p标签</p>
        <span>span标签</span>
        <ul>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
        var dvObj = my$("dv");
        // 获取子节点
        console.log(dvObj.childNodes); // 7个
        // 获取子元素
        console.log(dvObj.children);   // 3个
    </script>
</body>

childNodes：获取全部子节点（包括标签，属性，节点）

children：获取全部子元素（仅包括标签）

3.三、经过属性的名字获取属性节点

<body>
    <div id="dv">
        <p id="pid">p标签</p>
        <span>span标签</span>
        <ul>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
            <li>li标签</li>
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
        var dvObj = my$("dv");   
        console.log(dvObj.getAttributeNode("id")); // id="dv"
    </script>
</body>

getAttributeNode：能够获取属性节点。

3.四、获取节点和元素的12行代码

<body>
    <div id="dv">
        <p id="pid">p标签</p>
        <span>span标签</span>
        <ul id="uu">海
            <li>li标签</li>内
            <li>li标签</li>存
            <li id="three">li标签</li>知己
            <li>li标签</li>天涯
            <li>li标签</li>若比邻
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
        var ulObj = my$("uu");
        // 父节点
        console.log(ulObj.parentNode);
        // 父元素
        console.log(ulObj.parentElement);
        // 子节点
        console.log(ulObj.childNodes);
        // 子元素
        console.log(ulObj.children);
// ------------------------------------------------
        // 第一个子节点
        console.log(ulObj.firstChild);
        // 第一个子元素
        console.log(ulObj.firstElementChild);
        // 最后一个子节点
        console.log(ulObj.lastChild);
        // 最后一个子元素
        console.log(ulObj.lastElementChild);
        // 某个元素的前一个兄弟节点
        console.log(my$("three").previousSibling);
        // 某个元素的前一个兄弟元素
        console.log(my$("three").previousElementSibling);
        // 某个元素的后一个兄弟节点
        console.log(my$("three").nextSibling);
        // 某个元素的后一个星弟元素
        console.log(my$("three").nextElementSibling);

    </script>
</body>

一、以上前四个，chrome, firefox, IE8 都支持

二、后面八个，chrome，firefox支持，IE8下，全部获取节点的操做都获取的是元素，全部获取元素的操做都是 undefined。

3.五、总结

获取父子节点和元素的操做，chrome, firefox, IE8 都支持；
获取特殊子节点或者子元素和兄弟节点和元素操做，IE8 中全部的节点操做都是元素操做，全部的元素操做都是 undefined。

四、经过节点操做元素

经过节点操做元素的背景颜色

// 经过节点设置p标签的背景颜色为蓝色
<body>
    <input type="button" value="变色" id="btn">
    <div id="dv">
        <p>p标签</p>
        <span>span标签</span>
        <p>p标签</p>
        <span>span标签</span>
        <p>p标签</p>
    </div>

    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function () {
            var dvObj = my$("dv");
            var nodes = dvObj.childNodes;
            for(var i=0; i<nodes.length; i++) {
                if((nodes[i].nodeType === 1) && (nodes[i].nodeName === "P")) {
                    nodes[i].style.backgroundColor = "blue";
                }
            }
        };        
    </script>
</body>

经过节点属性来区分节点和元素。

五、封装节点兼容代码

<body>
    <input type="button" value="变色" id="btn">
    <ul id="uu">
        <li>复仇者联盟1</li>
        <li>复仇者联盟2</li>
        <li>复仇者联盟3</li>
        <li id="ii">复仇者联盟4</li>
        <li>复仇者联盟5</li>
        <li>复仇者联盟6</li>
        <li>复仇者联盟7</li>
        <li>复仇者联盟8</li>
    </ul>

    <script src="common.js"></script>
    <script>
        // 获取任意一个父元素的第一个子元素 
        function getFirstElement(element) {
            if(element.firstElementChild) {
                return element.firstElementChild;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.firstChild;
                while((node) && (node.nodeType !== 1)) {
                    node = node.nextSibling;
                }
                return node;
            }
        }       
        // 获取任意一个父元素的最后一个子元素       
        function getLastElement(element) {
            if(element.lastElementChild) {
                return element.lastElementChild;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.lastChild;
                while((node) && (node.nodeType !== 1)) {
                    node = node.previousSibling;
                }
                return node;
            }
        } 
        // 获取任意一个元素的前一个兄弟元素    
        function getPreviousElement(element) {
            if(element.previousElementSibling) {
                return element.previousElementSibling;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.previousSibling;
                while((node) && (node.nodeType !== 1)) {
                    node = node.previousSibling;
                }
                return node;
            }
        } 
        // 获取任意一个元素的后一个兄弟元素        
        function getNextElement(element) {
            if(element.nextElementSibling) {
                return element.nextElementSibling;
            } else { // 主要考虑到多个文本节点的影响
                var node = element.nextSibling;
                while((node) && (node.nodeType !== 1)) {
                    node = node.nextSibling;
                }
                return node;
            }
        } 

        // 测试
        console.log(getFirstElement(my$("uu")).innerText);
        console.log(getLastElement(my$("uu")).innerText);
        console.log(getPreviousElement(my$("ii")).innerText);
        console.log(getNextElement(my$("ii")).innerText);
    </script>
</body>

主要是兼容chrome 和 IE8 之间的差别，其次以获取任意一个父元素的第一个子元素为例，之因此不在 else 里面直接使用 return element.firstChild; 主要考虑到标签之间可能有多个文本节点的影响。