js中的節點遍歷+類陣列物件-有解無憂

firstChild 第一個子元素

lastChild 最后一個子元素

childNodes[n] = childNodes.item(n) 第n+1個子元素

parentNode 父元素

nextSibling 下一個兄弟元素

previousSibling 上一個兄弟元素

document.documentElement 獲取檔案的根節點

.tagName 標簽名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var oHtml=document.documentElement;
            console.log(oHtml);

            var oHead=oHtml.firstChild;//獲取html的第一個子元素節點
            var oHead=oHtml.childNodes[0];
            var oHead=oHtml.childNodes.item(0);
            console.log(oHead);

            var oBody=oHtml.childNodes[1];
            console.log(oBody);
        });
    </script>
</head>
<body>    

</body>
</html>

會回傳head與body之間的空白文本節點（除了IE8以下的瀏覽器會忽略這個空白文本節點）

任何節點都可以通過 .ownerDocument 獲得根元素節點

.hasChildNodes() 判斷元素是否含有子節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            var oHtml=document.documentElement;
            console.log(oHtml);//獲取根元素節點

            var oHead=oHtml.firstChild;//獲取html的第一個子元素節點
            var oHead=oHtml.childNodes[0];
            var oHead=oHtml.childNodes.item(0);
            console.log(oHead);

            var oBody=oHtml.childNodes[1];
            console.log(oBody);

            console.log(oHead.parentNode==oHtml);//true
            console.log(oBody.parentNode==oHtml);//true

            console.log(oHead.nextSibling==oBody);//true
            console.log(oBody.previousSibling==oHead);//true

            console.log(box.ownerDocument);
            console.log(oHtml);
            console.log(box.ownerDocument==document);//true
            console.log(box.ownerDocument==oHtml);//false
            console.log(box.ownerDocument==oHtml.parentNode);//true 檔案的根元素節點的父元素節點=檔案節點

            console.log(box.hasChildNodes());//true
            console.log(box.childNodes[0].hasChildNodes());//false

        });

    </script>
</head>
<body>    
    <div id="box">這是box</div>
</body>
</html>

HTML結構樹列印

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var s="";
            function travelNode(space,node){
                // 如果不是空白節點
                if(node.tagName){
                    s+=space+node.tagName+"<br>";
                }
                var len=node.childNodes.length;//獲取該元素的子元素長度
                for(var i=0;i<len;i++){
                    travelNode(space+"|-",node.childNodes[i]);
                }
                
            }
            travelNode("",document);
            document.write(s);

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

只獲取元素節點，而過濾空白文本節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            for(var i=0,len=ul.childNodes.length;i<len;i++){
                if(ul.childNodes[i].nodeType==1){//判斷是否是元素節點
                    console.log(ul.childNodes[i]);
                }
            }

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

一組只獲取元素節點的API

firstElementChild 第一個元素子節點（直接子元素節點，而不是后代子元素節點）

lastElementChild 最后一個元素子節點（直接子元素節點，而不是后代子元素節點）

previousElementSibling 上一個兄弟元素

nextElementSibling 下一個兄弟元素

children[n] 第n+1個子元素節點

childElementCount 子元素節點數量

兼容性：IE9+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            for(var i=0,len=ul.childElementCount;i<len;i++){
                console.log(ul.children[i]);
            }

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

NodeList 類陣列物件

可以通過[]來訪問，有item方法和length屬性

使用ele.childNodes即可獲取到nodeList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            console.log(ul.childNodes[1]);//<li>item1</li>
            console.log(ul.childNodes.item(1));//<li>item1</li>

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

類陣列物件不是陣列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

接下來將類陣列物件轉為陣列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            //ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

            function toArray(nodeList){    
                var arr=null;
                arr=new Array();
                for(var i=0,len=nodeList.length;i<len;i++){
                    arr.push(nodeList[i]);
                }
                return arr;
            }

            var newNodeList=toArray(ul.childNodes);
            newNodeList.push("<li>item6</li>");
            console.log(newNodeList);//(12) [text, li, text, li, text, li, text, li, text, li, text, "<li>item6</li>"]
        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

Array.prototype.slice.call() 可以將類陣列物件轉為陣列，但是在低版本IE中會報錯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            //ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

            var newNodeList=Array.prototype.slice.call(ul.childNodes);            
            newNodeList.push("<li>item6</li>");
            console.log(newNodeList);//(12) [text, li, text, li, text, li, text, li, text, li, text, "<li>item6</li>"]
        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

下面是兼容低版本IE的寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ul=document.getElementById("ul");
            console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
            //ul.childNodes.push("<li>item6</li>");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.<anonymous>

            function toArray(nodeList){
                var arr=null;
                try{
                    var newNodeList=Array.prototype.slice.call(nodeList);
                    return newNodeList;
                }catch(e){
                    arr=new Array();
                    for(var i=0,len=nodeList.length;i<len;i++){
                        arr.push(nodeList[i]);
                    }
                    return arr;
                }
            }
            var newNodeList=toArray(ul.childNodes);
            newNodeList.push("<li>item6</li>");
            console.log(newNodeList);
        });

    </script>
</head>
<body>    
    <div id="box">
        <ul id="ul">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</body>
</html>

類陣列物件HTMLCollection

ele.getElementsByTagName() 獲取所有該標簽的元素集合

document.scripts scripts元素集合

document.links 所有的a標簽

document.images image集合

document.forms form表單集合

tr.cells tr下的所有td集合

select.options select下的所有option元素集合

HTMLCollection中有name item namedItem

.namedItem(value)

首先嘗試回傳有id=value的元素

如果沒有，就回傳name=value的元素

注意只回傳一個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var ps=document.getElementsByTagName("p");
            var scripts=document.scripts;
            var links=document.links;
            var forms=document.forms;
            var images=document.images;
            var tds=document.getElementById("tr1").cells;
            var options=document.getElementById("select").options;

            console.log(ps);//HTMLCollection(2) [p, p]
            console.log(scripts);//HTMLCollection(2) [script, script]
            console.log(links);//HTMLCollection(2) [a, a]
            console.log(forms);//HTMLCollection(2) [form, form]
            console.log(images);//HTMLCollection(2) [img, img]
            console.log(tds);//HTMLCollection(4) [td, td, td, td]
            console.log(options);//HTMLOptionsCollection(3) [option, option, option, selectedIndex: 0]

            console.log(tds.namedItem("td"));//<td id="td">1</td>

        });

    </script>
</head>
<body>
    <p>這是p標簽1</p>
    <p>這是p標簽2</p>

    <a href="#">這是a鏈接1</a>
    <a href="#">這是a鏈接2</a>

    <form action="">
        <select name="select" id="select">
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
        </select>
    </form>
    <form action="">
    </form>

    <img src="source/cat-little.jpg" alt="">
    <img src="source/cat-little.jpg" alt="">

    <table>
        <tr id="tr1">
            <td id="td">1</td>
            <td name="td">2</td>
            <td name="td">3</td>
            <td>4</td>
        </tr>
    </table>
    

</body>
</html>

類陣列物件namedNodeMap

通過.attributes得到

獲取元素的所有屬性，包括系統自帶屬性和自定義屬性

有item方法和length屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var list=document.getElementById("list");
            var attrs=list.attributes;

            console.log(attrs);//NamedNodeMap {0: id, 1: data-url, 2: data-action, id: id, data-url: data-url, data-action: data-action, length: 3}
            console.log(attrs.length);//3
            console.log(attrs[0]);//id="list"
            console.log(attrs.item(1));//data-url="index.html"

        });

    </script>
</head>
<body>
    <ul id="list" data-url="index.html" data-action="submit">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

類陣列物件：nodeList HTMLCollection namedNodeMap

都具有動態性

每當檔案結構發生變化時，就會隨之更新

appendChild() 追加子元素

證明：嘗試獲取到最初div元素的個數，并且在頁面中追加同等個數的div（即數量加倍的效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var divs=document.getElementsByTagName("div");//HTMLCollection類陣列物件
            var i=0;
            while(i<divs.length){
                document.body.appendChild(document.createElement("div"));
                i++;
            }

        });

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

結果頁面崩潰

原因是每次在回圈時，會重新計算div元素的個數，導致div元素的個數永遠都在動態改變，導致while回圈無法結束

解決方法是將最初div元素的個數用一個變數保存起來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            
            var divs=document.getElementsByTagName("div");//HTMLCollection類陣列物件
            var i=0;
            var length=divs.length;
            while(i<length){
                document.body.appendChild(document.createElement("div"));
                i++;
            }

        });

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151138.html

標籤：JavaScript

上一篇：解決vue-cli使用組件報錯

下一篇：解決JS浮點數(小數)計算加減乘除的BUG