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>