DEV Community

Lucas Wendell
Lucas Wendell

Posted on

NodeList vs HtmlCollection

#javascript #html #beginners #webdev

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 array like que nos dá acesso a todos os argumentos de uma função.

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);
Enter fullscreen mode Exit fullscreen mode

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

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));
Enter fullscreen mode Exit fullscreen mode

Falo melhor sobre o método reduce e foreach de um array nesse artigo -> Iterando sobre arrays

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)