API之节点

时间 2019-11-18

标签 api 节点繁體版

原文原文链接

节点的类型：nodeType ，.nodeType在控制台输出时 1表明标签，2表明属性， 3表明文本
节点名字：nodeName ，若是是标签节点的话在控制台输出的是大写的标签名字，若是是属性节点的话，在控制台输出时是小写的属性名字，若是是文本节点，在控制台输出时，是#text
节点的值： nodeValue，若是是标签节点的话在控制台输出的是null，若是是属性节点的话，在控制台输出时是属性值，若是是文本节点，在控制台输出时，是文本内容

<body>
    <div id='dv'>
        <p>这是div里面的第一个p标签</p>
        <span>这时div里面的第一个span标签</span>
        <ul id='uu'>
            <li>乔峰</li>
            <li>鹿茸</li>
            <li id='three'>段誉</li>
            <li>卡卡西</li>
            <li>雏田</li>
        </ul>
    </div>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        var uu = my$('uu');
        //获取ul标签的父级节点

        console.log(uu.parentNode);

        //获取ul标签的父级元素

        console.log(uu.parentElement);

        console.log(uu.parentNode.nodeType);  //1-----标签节点
        console.log(uu.parentNode.nodeName);//DIV-----标签节点----大写的标签名字
        console.log(uu.parentNode.nodeValue);//null-----标签节点
    </script>
</body>

关于获取节点和元素的12行代码

总结：code

凡是获取节点的代码在谷歌和火狐上获得都是相关的节点three

凡是获取元素的代码在谷歌和火狐上获得的都是相关的元素事件

从子节点和兄弟节点开始，凡是获取节点的代码只要在IE8内都是元素，只要是获取元素的代码在IE8中都是undefinedip

<div id='dv'>
        <p>这是div里面的第一个p标签</p>
        <span>这时div里面的第一个span标签</span>
        <ul id='uu'>
            <li>乔峰</li>
            <li>鹿茸</li>
            <li id='three'>段誉</li>
            <li>卡卡西</li>
            <li>雏田</li>
        </ul>
    </div>
    <script src='common.js'></script>
    <script>
        //获取ul的元素和节点
        var uu = my$('uu');
        //父级节点
        console.log(uu.parentNode);
        //父级元素
        console.log(uu.parentElement);
        //子节点
        console.log(uu.childNodes);
        //子元素
        console.log(uu.children);


        console.log('=======================')




        //第一个子节点
        console.log(uu.firstChild); //----------------IE8中是第一个子元素
        //第一个子元素
        console.log(uu.firstElementChild); //-------------IE8不支持
        //最后一个子节点
        console.log(uu.lastChild);
        //最后一个子元素
        console.log(uu.lastElementChild);
        //某一个元素的前一个兄弟节点
        console.log(my$('three').previousSibling);
        //某一个元素的后一个兄弟元素
        console.log(my$('three').previousElementSibling);
        //某一个元素的后一个兄弟节点
        console.log(my$('three').nextSibling);
        //某一个元素的后一个兄弟元素
        </script>

案例

点击按钮给p标签添加背景颜色element

<input type="button" value="变色" id="btn">
    <div id='dv'>
        <span>这是第一个span标签</span>
        <p>这是第一个p标签</p>
        <span>这是第二个span标签</span>
        <p>这是第二个p标签</p>
        <span>这是第三个span标签</span>
        <p>这是第三个p标签</p>
        <a href="http://www.baidu.com">百度 </a>
    </div>
    <script src='common.js'></script>
    <script>
        // 给按钮注册点击事件
        my$('btn').onclick = function() {
            //获取div里面全部的子节点
            var nodes = my$('dv').childNodes;
            //循环遍历全部的子节点
            for (var i = 0; i < nodes.length; i++) {
                //判断这个子节点是否是p标签
                // 1表示节点的类型是标签，   大写的P表示是标签名
                if (nodes[i].nodeType === 1 && nodes[i].nodeName === 'P') {
                    nodes[i].style.backgroundColor = 'red';
                }
            }
        }
    </script>

案例之隔行变色get

<input type="button" value="隔行变色" id="btn">
    <ul id='uu'>
        <li>你好</li>
        <li>hello</li>
        <li>再见</li>
        <li>goodbye</li>
        <li>晚安</li>
        <li>goodnight</li>
    </ul>


    <script src='common.js'></script>
    <script>
        my$('btn').onclick = function() {
            var count = 0; //记录li的个数
            //获取ul里面全部的子节点
            var nodes = my$('uu').childNodes;
            for (var i = 0; i < nodes.length; i++) {
                //判断这个节点是否是li
                if (nodes[i].nodeType === 1 && nodes[i].nodeName === 'LI') {
                    nodes[i].style.backgroundColor = count % 2 === 0 ? 'red' : 'yellow';
                    count++;
                }

            }
        }
    </script>

封装节点的兼容代码

<ul id='uu'>
        <li>第一个</li>
        <li>第二个</li>
        <li id='three'>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
    <script src='common.js'></script>
    <script>
        //第一个节点和第一个元素的获取的代码可能在IE8中不支持

        //element.firstChild====>火狐和谷歌获取的是第一个子节点
        //element.firstChild=====> IE8获取的是第一个子元素
        //element.firstElementChild =====》谷歌和火狐获取的是第一个子元素，可是IE8不支持

        //获取任意一个父级元素的第一个子级元素

        function getFirstElementChild(element) {
            if (element.firstElementChild) { //true===>支持
                return element.firstElementChild;
            } else {
                var node = element.firstChild;
                while (node && node.nodeType !== 1) { //节点有意义，且不是标签
                    node = node.nodeNextSibling;
                }
                return node;
            }
        }
        //获取任意一个父级元素的最后一个子级元素
        function getLastElementChild(element) {
            if (element.lastElementChild) {
                return element.lastElementChild;
            } else {
                var node = element.lastChild;
                if (node && node.nodeType !== 1) {
                    node = node.nodePreviousSibling
                }
                return node;
            }
        }
        //test
        console.log(getFirstElementChild(my$('uu')));
        console.log(getLastElementChild(my$('uu')));

        //获取某个元素的前一个元素

        function getAnyonePreviousElementSibling(element) {
            if (element.previousElementSibling) {
                return element.previousElementSibling;
            } else {
                var node = element.previousSibling;
                if (node && node.nodeType !== 1) {
                    node = node.previousElementSibling;
                }
                return node;
            }
        }


        //获取某个元素的后一个元素

        function getAnyoneNextElementSibling(element) {
            if (element.nextElementSibling) {
                return element.nextElementSibling;
            } else {
                var node = element.nextSibling;
                if (node && node.nodeType !== 1) {
                    node = node.nextElementSibling;
                }
                return node;
            }
        }
        // test
        console.log(getAnyoneNextElementSibling(my$('three')));
        console.log(getAnyonePreviousElementSibling(my$('three')));
        </script>

API之节点

目录

什么是节点

节点的相关属性

关于获取节点和元素的12行代码

案例

封装节点的兼容代码