NodeList vs HtmlCollection
Tags: javascript, html, beginners, webdev
Published: 2022-12-27 17:22:30

Nesse artigo iremos falar sobre dois `array’s likes` que são muito comuns de serem vistos quando trabalhamos com a `DOM`.

> ⚠️ Dica: Para melhor compreensão dos exemplos recomendo que leia os comentários do código.

---

## O que é um array like?

Um `array like` é um `objeto` que se parece com um `array`, age como um `array` mas não é um `array`. Ou seja, se usarmos o método `Array.isArray()` e passarmos um `array like` esse `código` irá retornar `false`, outra característica do `array like` é que ele não contém todos os métodos do `array`. Um exemplo de `array like` em javascript é a propriedade `arguments` de uma `função`, que armazena um a`rray like`  que nos dá acesso a todos os argumentos de uma `função`.

```javascript
function sum() {
	console.log(arguments.length); // 5
	console.log(Array.isArray(arguments)); // false

	arguments.forEach(argument => {
		console.log(argument);
	}); // Vai dar erro, pois esse array like não contém os memos métodos de um array original.
}

sum(1, 2, 3, 4, 5);
```

---

Quando temos um `array like` e queremos usar os métodos de um `array` original temos que transformá-lo em um `array` original.

```javascript
function sum() {
	const argumentsArray = [...arguments]; // Transformando nosso array like em um array de verdade
	return argumentsArray.reduce((acumulator, current) => {
		return acumulator + current;
	}, 0);
}

console.log(sum(1, 2, 3, 4, 5));
```

> Falo melhor sobre o método `reduce` e `foreach` de um array nesse artigo -> [Iterando sobre arrays](https://dev.to/lucaswll/iterando-sobre-arrays-59d6)

---

## NodeList

Um `NodeList` é um `array like` que temos quando selecionamos vários elementos da `DOM` usando os métodos `Node.childNodes()` (Pega todos os filhos de um elemento da DOM) e o `document.querySelectorAll(‘.node’)`. O `NodeList` tem vários métodos, e entre eles possui o método `foreach` que também está presente nas `arrays` originais.

## HtmlCollection

Um `HtmlCollection` é um `array like` que temos sempre que acessamos vários elementos da `DOM` que conseguimos quando acessamos elementos da `DOM` com os métodos que têm a palavra `get` em seu nome, ou seja, `document.getElementById()` retorna uma `HtmlCollection`.

## NodeList vs HtmlCollection

E qual a diferença entre os dois?  A principal diferença é que o `HtmlCollection` é “vivo”, ou seja, se inserirmos um elemento dinamicamente na `DOM` essa alteração vai ser refletida no `HtmlCollection` e ele vai armazenar os elementos antigos e os novos. Já com a `NodeList` isso não acontece, se selecionarmos elementos da `DOM` com ele e depois adicionarmos mais elementos essa alteração não será refletida no `NodeList`.

---

Vamos criar um `ul html` (lista) que contém algumas séries que estarão em uma `li`. Vamos selecionar essas `li’s` usando métodos que retornam um `NodeList` e `HtmlCollection`, depois disso vamos inserir uma nova série dinamicamente e depois vamos comparar o tamanho da `NodeList` e da `HtmlCollection`.

**HTML**
```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Exemplo</title>
	</head>
	<body>
		<ul class="seriesUl">
			<li class="serieLi">The Walking Dead</li>
			<li class="serieLi">Mr.Robot</li>
			<li class="serieLi">The Big Bang Theory</li>
			<li class="serieLi">The 100</li>
		</ul>
		<script src="./index03.js"></script>
	</body>
</html>
```
**JAVASCRIPT**
```javascript
const seriesUl = document.querySelector('.seriesUl'); // Lista de series
const seriesNodeList = seriesUl.querySelectorAll('.serieLi'); // NodeList com 4 itens
const seriesHtmlCollection = document.getElementsByClassName('serieLi'); // HTMLCollection com 4 itens

console.log(seriesNodeList.length); // 4
console.log(seriesHtmlCollection.length); // 4

const aMelhorSerie = document.createElement('li');
aMelhorSerie.classList.add('serieLi');
aMelhorSerie.textContent = 'Breaking Bad';
seriesUl.appendChild(aMelhorSerie);

console.log(seriesNodeList.length); // 4
console.log(seriesHtmlCollection.length); // 5
```

Nesse exemplo podemos ver claramente que quando inserimos um elemento dinamicamente nossa `NodeList` não é atualizada e por isso continua com 4 itens.

- [Me siga no github!](https://github.com/l-Wendell)
- [Me siga no linkedin!](https://www.linkedin.com/in/lucas-wendell/)