從零開始學 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>