Javascript 1o1 - HTMLCollection vs NodeList
Tags: javascript1o1, javascript
Published: 2020-10-04 14:43:40

This article was originally posted on my [Hashnode Blog](https://binayak.hashnode.dev/htmlcollection-vs-nodelist)

This article covers
1. Difference between `HTMLCollection` and `NodeList`
2. `item` & `namedItem` method of `HTMLCollection` 
3.  Iterating `HTMLCollection`.
3. `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
```html
<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>

```
Output

![HTMLCollection vs NodeList.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601815109232/bK3dzUkOq.png)

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

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

```js

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

document.body.appendChild(additionalP);
```

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

```js
console.log(dynamicCollection);
console.log(staticCollection)
```

Output:

![HTMLCollection vs NodeList (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601815529810/WQb7emk2O.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.

```js
console.log(dynamicCollection.item(0));
```
output

![HtmlCollection vs nodelist (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601816003326/TTN6d6MjY.png)

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

For example
```html
<p id='greeting'>Hii </p>
<p> How are you </p>

<script>
let elems = document.getElementsByTagName('p');
console.log(elems.namedItem('greeting'));
<script>
```
Output

![htmlcollection vs nodelist (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601816434157/FRyj0CTyC.png)

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

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

for(let i = 0; i < elements.length; i++){
console.log(elements[i]);
}
```


# NodeList Methods

### 1. Item 

same as `HTMLCollection`.
```js
let p = document.querySelectorAll('p');
p.item(0); //returns first member of list 

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

```

### 2. entries

```html
<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>
```
Output

![Htmlcollection vs nodelist (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601817680002/sjdsHgDAo.png)

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

### 3. keys
```html
<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>
```
Output

![HTMLCollectionvs nodelist.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601817924703/7aeG7dReF.png)
Here `key` is just the key of a member of `HTMLCollection`.

### 4. values
```html
<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>
```
Output
![htmlcollection vs nodelist (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601818292587/_SZYgpHZ0.png)
Here `value` is the member of `HTMLCollection`.

### 5. forEach
```html
<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>
```

Output:
![Html Collection vs Nodelist.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601821392980/FZvfwGpjQ.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.