DEV Community

Cover image for Javascript 1o1 - HTMLCollection vs NodeList
Anjal Binayak Adhikari
Anjal Binayak Adhikari

Posted on

Javascript 1o1 - HTMLCollection vs NodeList

This article was originally posted on my Hashnode Blog

This article covers

  1. Difference between HTMLCollection and NodeList
  2. item & namedItem method of HTMLCollection
  3. Iterating HTMLCollection.
  4. item, values, keys, entries, forEach method of NodeList

HTMLCollection vs NodeList

HTMLCollection is a Dynamic List of Objects of elements whereas the NodeList is static.

For instance

<p> Hii </p>
<p> What's your name ? </p>
<script>
let dynamicCollection = document.getElementsByTagName('p'); 
//returns HTMLCollection
console.log(dynamicCollection);

let staticCollection = document.querySelectorAll('p');
//returns NodeList
console.log(staticCollection)
</script>

Enter fullscreen mode Exit fullscreen mode

Output

HTMLCollection vs NodeList.png

Here Both have two <p> elements in the list.

Now let us create another <p> element with DOM.


let additionalP = document.createElement('p');
additionalP.innerHTML = "Where do you live? ";

document.body.appendChild(additionalP);
Enter fullscreen mode Exit fullscreen mode

Now let us again console.log both variables holding the list of <p> elements.

console.log(dynamicCollection);
console.log(staticCollection)
Enter fullscreen mode Exit fullscreen mode

Output:

HTMLCollection vs NodeList (2).png

Now see here, The HTMLCollection is updated automatically while NodeList stays the same. This is the key difference.

HTMLCollection methods

1. item

You can access the members of HTMLCollection i.e element's object, using the item method. It expects the index of the element as a parameter.

console.log(dynamicCollection.item(0));
Enter fullscreen mode Exit fullscreen mode

output

HtmlCollection vs nodelist (3).png

2. namedItem

namedItem expects a parameter and returns the element having id or name given in the parameter.

For example

<p id='greeting'>Hii </p>
<p> How are you </p>

<script>
let elems = document.getElementsByTagName('p');
console.log(elems.namedItem('greeting'));
<script>
Enter fullscreen mode Exit fullscreen mode

Output

htmlcollection vs nodelist (4).png

HTMLCollection Iterations

You can iterate through each member of HTMLCollection using for loop.

let elements = document.getElementsByTagName('p');

for(let i = 0; i < elements.length; i++){
console.log(elements[i]);
}
Enter fullscreen mode Exit fullscreen mode

NodeList Methods

1. Item

same as HTMLCollection.

let p = document.querySelectorAll('p');
p.item(0); //returns first member of list 

//alternative
p[0] //same as p.item(0)

Enter fullscreen mode Exit fullscreen mode

2. entries

<p>Hii</p>
<p>What's your name ? </p>
<script>
let p = document.querySelectorAll('p');
for(let entry of p.entries()){
    console.log(entry);
}
</script>
Enter fullscreen mode Exit fullscreen mode

Output

Htmlcollection vs nodelist (5).png

entry is an array with [index, element] as shown above

3. keys

<p>Hii</p>
<p>What is your name ? </p>
<script>
let p = document.querySelectorAll('p');
for(let key of p.keys()){
    console.log(key);
}
</script>
Enter fullscreen mode Exit fullscreen mode

Output

HTMLCollectionvs nodelist.png
Here key is just the key of a member of HTMLCollection.

4. values

<p>Hii</p>
<p>What is your name ? </p>
<script>
let p = document.querySelectorAll('p');
for(let value of p.values()){
    console.log(value);
}
</script>
Enter fullscreen mode Exit fullscreen mode

Output
htmlcollection vs nodelist (6).png
Here value is the member of HTMLCollection.

5. forEach

<p>Hii</p>
<script>
let p = document.querySelectorAll('p');

p.forEach(function(value,index,nodeList){
    console.log(value);
    console.log(index);
    console.log(nodeList);
    console.log(this);
},'anythingYouWantToReferAsThisInsideTheLoops');

</script>
Enter fullscreen mode Exit fullscreen mode

Output:
Html Collection vs Nodelist.png
The picture is really worth a thousand words, ain't it?

Hope you got a clear understanding of HTMLCollection and NodeList and their differences. If not, comment your query.

Top comments (0)