JavaScript DOM查詢，原生js實現元素子節點的獲取

時間 2020-06-08

標籤 javascript dom 查詢原生實現元素節點獲取欄目 JavaScript 简体版

原文原文鏈接

　　每一個網頁都是一個dom樹，網頁中全部的內容都是這個樹上的一個節點。JavaScript的工做就是操做這些節點，對節點進行查增刪改操做，或是給節點綁定事件。javascript

要操做dom節點，首先要獲取到dom節點。這裏我介紹幾個原生js獲取元素子節點的方法：css

1、經過屬性值獲取後代節點 html

以getElementBy開頭的方法，能夠根據具體的屬性獲取元素的後代節點。前端

這種方法不僅會獲取子節點，他也會獲取到全部符合條件的後代節點。java

方法	依據屬性	兼容性	其餘
getElementById	id	兼容性好，推薦使用node	若是存在多個id相同的元素，只會返回第一個數組
getElementsByTagName	標籤名	不兼容ie8及如下版本	返回全部符合條件的元素的集合
getElementsByName	name	不兼容ie8及如下版本	返回全部符合條件的元素的集合
getElementsByClassName	class	不兼容ie8及如下版本	返回全部符合條件的元素的集合

以getElementById爲例，儘管有兩個id爲’Jan‘的元素，可是隻會獲取到第一個：dom

<html>
    <head>
    </head>
    <body>
        <p id='Jan' class='test'>1</p>
        <p id='Jan' class='test'>2</p>
        <p id='Mar'>3</p>
    </body>
    <script type="text/javascript">
        var j=document.getElementById('Jan');
        console.log(j);
    </script>
</html>

須要注意的是，在同一個文件中出現重複id是不符合規範的，應當儘可能避免這樣使用。spa

若是將上面代碼中的getElementById('Jan')換成 getElementsByTagName('p')或者是getElementsByClassName('test')將會獲取到符合條件的結果集。code

2、childNodes屬性

childNodes屬性能夠獲取元素的全部子節點，並封裝到一個數組中，能夠經過下標來獲取某個子元素：

<html>
    <head>
    </head>
    <body>
        <div class="test" id="test">
        　　<p>1</p>
        　　<p>3</p>
        　　<p>5</p>
        </div>
    </body>
    <script>
        var a = document.getElementById("test");
        console.log(a.childNodes);
    </script>
</html>

class=‘test’的div中只有3子節點，執行結果卻有7個節點：

由於根據在網頁中，標籤之間的回車空格等特殊字符屬於一個p元素，上面的div中輸入了4個回車，所以會多出四個text節點：

要解決這個問題有兩個方法：

方法一：去掉全部的回車空格等特殊字符，可是會影響程序的可讀性和代碼的規範。

方法二：動態過濾掉空白字符：

經過for循環遍歷對象中的全部元素，刪除純文本元素。

完整的代碼就是這樣：

        var a = document.getElementById("test");
        var b = a.childNodes;
        for(i=0;i<b.length;i++){
            if(b[i].nodeName == "#text"&& !/\s/.test(b.nodeValue)){
                a.removeChild(b[i]);
            }
        }

第二種方法每次查詢以前，都要先執行一段過濾代碼。這樣會影響程序的執行效率，所以childNodes屬性不建議使用。

3、child屬性

相比childNodes，child屬性不會將空格做爲文本節點獲取。所以就不須要額外的去除空格操做，獲取節點的方式和chlidNodes屬性相同。

        var a = document.getElementById("test").children;

除此以外還有

firstchild屬性：獲取第一個子節點

lastchild屬性：獲取最後一個子節點

child屬性存在的缺點是會獲取所有的子節點，使用時須要篩選，不夠靈活。

4、querySelector方法，強烈推薦！

querySelector的參數是css選擇器，任何選擇器均可以做爲它的參數，這樣就使得它很是方便靈活：

好比獲取class=‘test’的標籤下的第一個子元素，能夠這樣寫querySelector('.test > * ')，也能夠指定子元素的類型querySelector('.test > span ')，或者是：classquerySelector('.test > #f_div')

還可使用querySelectorAll方法，這樣會獲取全部知足條件的元素，而不僅是獲取第一個元素。

<div class="first">
    <span>張三</span>
</div>
<div id="second">
    <div id=f_div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    //經過類選擇器獲取節點
    doucument.querySelector('.first');
    //經過id選擇器獲取節點
    doucument.querySelector('#second');
    //經過僞類選擇器獲取子節點
    document.querySelector('.first>span');
    //確認selectAll批量獲取節點
    document.querySelectorAll('#second>div');
</script>

querySelector方法能夠兼容到IE8，基本能知足前端開發兼容性的須要。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。