The difference between nodelist and HTMLCollection

<div id="user">
    <p id="demo" class="text-info">Hello</p>
</div>

is an element node,

is also an element node.

Hello

The element has attributes and text, so class="text-info" and id="demo" are attribute nodes, and Hello is a text node. As can be seen from the above example, nodes contain elements, and elements are a type of node.

element element object

Nodes are single objects, and sometimes a data structure is needed that can accommodate multiple nodes. DOM provides two collection objects for implementing this kind of node collection: NodeList and HTMLCollection.

• HTMLCollection is a collection that represents HTML elements.
• A NodeList object represents an ordered list of nodes

The following method obtains the element element object

• document.getElementById(“id attribute”)
• document.querySelector(css selector’)

Example

//getElementById returns the element
element1 = document.getElementById('user');
console.log(element1) // Return the entire div element<div id="user"><p id="demo" class="text-info">Hello</p></div>
element2 = document.getElementById('demo');
console.log(element2) // <p id="demo" class="text-info">Hello</p>
// querySelector returns elements
element1 = document.querySelector('#user');
console.log(element1) // Return the entire div element<div id="user"><p id="demo" class="text-info">Hello</p></div>
element2 = document.querySelector('#demo');
console.log(element2) // <p id="demo" class="text-info">Hello</p>
element3 = document.querySelector('p');
console.log(element3) // <p id="demo" class="text-info">Hello</p>
element4 = document.querySelector('.text-info');
console.log(element4) // <p id="demo" class="text-info">Hello</p>
element5 = document.querySelector('p.text-info');
console.log(element5) // <p 

HTMLCollection object

HTMLCollection can only contain nodes of element node (ElementNode) type. The following method returns HTMLCollection object

• document.getElementsByClassName(“className”)
• document.getElementsByTagName(“tag name”)
• document.forms // Object selector finds HTML objects

 <div id="user">
        <p id="demo" class="text-info">Hello</p>
        <p>Hello</p>
    </div>

Usage example

elements = document.getElementsByClassName("text-info");
console.log(elements); // HTMLCollection
console.log(elements.length); // Get the number
// Index value
console.log(elements[0]); // Subscript value <p id="demo" class="text-info">Hello</p>
// item takes value based on subscript
console.log(elements.item(0));
// namedItem takes the value based on the id or name attribute
console.log(elements.namedItem('demo'));

Properties and methods in HTMLCollection objects:

Properties/Methods	parameter	describe
length	none	Returns the number of elements in the HTMLCollection.
item()	Index number type	Returns the element at the specified index in the HTMLCollection.
namedItem()	String, pass the id or name of the element. If the id cannot be found, search for the name.	Returns the element in an HTMLCollection with the specified ID or name attribute.

The namedItem() method returns the element with the specified ID or name in an HTMLCollection object.

HTMLCollection.namedItem(name)
or
HTMLCollection[name]

Using the example, both of the following methods will work

//namedItem takes the value based on the id or name attribute
console.log(elements.namedItem('demo'));
// You can also pass the id or name attribute directly within the brackets
console.log(elements['demo']);

NodeList object

NodeList is a collection representing nodes.

Properties and methods in the NodeList object: | Properties/Methods | Parameters | Description | | —- |—— | ———————- | | length | None | Returns the number in the NodeList. | | item() | Index number type | Returns the node with the specified index in NodeList. |

The following method obtains the NodeList object

• document.getElementsByName(“name name”)
• document.querySelectorAll(“css selector”)
• element.childNodes // Get the child nodes of the element

 

        username
        
    
    <div id="user">
        <p id="demo" class="text-info">Hello</p>
        <p>Hello</p>
    </div>

Usage example

nodes = document.getElementsByName('username');
console.log(nodes) // NodeList [input#user-id]
//length property
console.log(nodes.length) //1
// Index value
console.log(nodes[0]) // <input id="user-id" name="username" value="yoyo">
// item index value
console.log(nodes.item(0)) // <input id="user-id" name="username" value="yoyo">

The same goes for document.querySelectorAll()

nodes = document.querySelectorAll('#user');
console.log(nodes); // NodeList [div#user]
console.log(nodes.length); // 1
// Index value
console.log(nodes[0]) // <input id="user-id" name="username" value="yoyo">
// item index value
console.log(nodes.item(0)) // <input id="user-id" name="username" value="yoyo">

element.childNodes is to get the child nodes of the element

element = document.getElementById('user');
// childNodes all child nodes
console.log(element.childNodes);
console.log(element.childNodes.length); // 5

The difference between HTMLCollection and NodeList

HTMLCollection represents a collection of HTML elements. Elements are also a type of node, that is, element nodes. NodeList represents a collection of nodes. We can understand that HTMLCollection is a type of Nodelist collection.

difference	HTMLCollection	NodeList
length	have	have
item()	have	have
namedItem	have	none
forEach	none	have
Index value	Can	Can
Node type	element node	Any node: text node, element node, attribute node, comment node

HTMLCollection is not an array! HTMLCollection may look like an array, but it’s not. You can use indexing to get elements just like an array. HTMLCollection cannot use array methods: valueOf(), pop(), push(), or join()

NodeList node list is not an array! NodeList The node list may look like an array, but it is not. You can use indexing to get elements just like an array. Node lists cannot use array methods: valueOf(), pop(), push(), or join().