Method of returning NodeList & htmlcollection object in JS

Time:2021-6-1

What is NodeList & htmlcollection

NodeListAn object is a collection of nodes, usually returned by attributes such as node. ChildNodes and methods such as document. Queryselectorall. NodeListMost of the timeIs < font color = Red > static set < / font >.

HTMLCollectionInterface represents a generic collection that contains elements in the order of the document stream. It also provides methods and properties for selecting elements from the collection. Htmlcollection in HTML DOM is < font color = Red > live < / font >; It is automatically updated when the structure of the document it contains changes.

The above content is extracted from MDN, you can refer to the detailed explanationMDN NodeListandMDN HTMLCollection

Method of returning NodeList object in JS

< font color = Red > when the document structure changes, such as adding nodes to the document. Createelement() method, the returned result will not change < / font > when the document structure changes

  1. Document. Queryselectorall() method, whenThe method is called again after the node in the document is updated, the returned result will be the latest result.
  2. Document. Getelementsbyname() method

Methods returned as htmlcollection objects in JS

< font color = Red > when the document structure changes, such as adding nodes to the document. Createelement() method, the returned results will be updated dynamically, that is, the latest results will be obtained every time

  1. document.getElementsByTagName()
  2. document.getElementsByClassName()

Method of returning DOM object itself in JS

  1. Getelementbyid() method obtained by ID
  2. The document. Queryselector () method obtained through the selector

Comparison code

<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 () "> add a Li < / button >
</body>
<script>
    let ul = document.getElementById("ul");  // Returns the DOM object itself
    let lis = document.querySelector("ul");  // Returns the DOM object itself
    let count_ li = document.querySelectorAll("li");  // Returns the NodeList object
    console.log(document.getElementsByName("li1"));  // Return to NodeList
    let liss = document.getElementsByName("li1");
    let count_ tag_ li = document.getElementsByTagName("li");  // Returns the htmlcollection object
    //Document. Getelementsbyclassname ("Li1") // returns the htmlcollection object

    // console.log(count_li);
    Console. Log ("NodeList") count the number of all Li before clicking the button_ li=" + count_ li.length);
    Console.log ("htmlcollection object count the number of all Li before clicking the button_ li=" + count_ tag_ li.length);
    //Console.log ("LIS =" + LIS. Length before clicking the button)
    function add_li() {
        let new_li = document.createElement("li");
        new_li.innerHTML = count_li.length + 1;
        ul.appendChild(new_li);
        Console.log ("NodeList" after clicking the button, count_ li=" + count_ li.length);
        Console.log ("NodeList" after clicking the button, count_ tag_ li=" + count_ tag_ li.length);
        //Console.log ("after clicking the button, LIS =" + LIS. Length)
        count_li=document.querySelectorAll("li");
        Console. Log ("NodeList queryselectorall" after recalculation, count_ li=" + count_ li.length);
    }
</script>

Method of returning NodeList & htmlcollection object in JS