JS中返回爲NodeList & HTMLCollection對象的方法

時間 2021-03-09

標籤 app spa code 對象 blog 接口文檔 get 欄目 JavaScript 简体版

原文原文鏈接

NodeList & HTMLCollection 是什麼

NodeList 對象是節點的集合，一般是由屬性，如Node.childNodes 和方法，如document.querySelectorAll 返回的。NodeList大部分狀況下是靜態集合。

HTMLCollection 接口表示一個包含了元素（元素順序爲文檔流中的順序）的通用集合（generic collection），還提供了用來從該集合中選擇元素的方法和屬性。HTML DOM 中的 HTMLCollection 是即時更新的（live）；當其所包含的文檔結構發生改變時，它會自動更新。

以上內容摘自MDN，詳細的講解你們能夠參考MDN NodeList和MDN HTMLCollection。app

JS中返回爲NodeList對象的方法

文檔結構發生改變時，如document.createElement()方法增長節點，返回結果不會變化
spa

document.querySelectorAll()方法，當文檔中節點更新後從新調用該方法，返回結果纔會是最新的結果。
document.getElementsByName()方法

JS中返回爲HTMLCollection對象的方法

文檔結構發生改變時，如document.createElement()方法增長節點，返回結果會動態更新，即每次都是取到最新的結果
code

document.getElementsByTagName()
document.getElementsByClassName()

JS中返回DOM對象自己的方法

經過id獲取的getElementById()方法
經過選擇器獲取的document.querySelector()方法

比較代碼

<body>
<ul id="ul">
    <li name="li1">1</li>
    <li name="li1">2</li>
    <li name="li1">3</li>
    <li name="li1">4</li>
    <li name="li1">5</li>
</ul>
<button onclick="add_li()">增長一個li</button>
</body>
<script>
    let ul = document.getElementById("ul");  //返回DOM對象自己
    let lis = document.querySelector("ul");  //返回DOM對象自己
    let count_li = document.querySelectorAll("li");  //返回NodeList對象
    console.log(document.getElementsByName("li1"));  //返回NodeList
    let liss = document.getElementsByName("li1");
    let count_tag_li = document.getElementsByTagName("li");  //返回HTMLCollection對象
    // document.getElementsByClassName("li1") //返回HTMLCollection對象

    // console.log(count_li);
    console.log("NodeList點擊按鈕前全部li的數量count_li=" + count_li.length);
    console.log("HTMLCollection對象點擊按鈕前全部li的數量count_li=" + count_tag_li.length);
    // console.log("點擊按鈕前lis="+liss.length)
    function add_li() {
        let new_li = document.createElement("li");
        new_li.innerHTML = count_li.length + 1;
        ul.appendChild(new_li);
        console.log("NodeList點擊按鈕後count_li=" + count_li.length);
        console.log("NodeList點擊按鈕後count_tag_li=" + count_tag_li.length);
        // console.log("點擊按鈕後lis="+liss.length)
        count_li=document.querySelectorAll("li");
        console.log("NodeList querySelectorAll從新計算後count_li=" + count_li.length);
    }
</script>

相關標籤/搜索

每日一句

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