2

As vezes eu acabo precisando manipular uma NodeList, outras um Objeto porém não entendi exatamente qual a diferença entre eles. E qual a relação do DOM com eles?

2 Respostas 2

1

O DOM (Document Object Model) possui vários objetos, como window que representa uma janela do navegador, e document que representa o conteúdo da página.

Dentro desses objetos, pode haver listas de objetos, que são os NodeLists. Por exemplo o document pode ter uma lista de objetos input, uma table pode ter uma lista de objetos tr e assim por diante.

Segundo a documentação do Mozilla (https://developer.mozilla.org/pt-BR/docs/Web/API/NodeList):

Objetos NodeList são coleções de nodos semelhantes aos objetos retornados pelos métodos Node.childNodes e document.querySelectorAll().

Ou seja, coleções de objetos. Portanto, o DOM é formado de objetos, que podem conter NodeList de outros objetos.

Exemplo:

var parent = document.getElementById('divComParagrafos');
// pega todos os "filhos", incluindo espaços
var child_nodes = parent.childNodes;
console.log("child_nodes.length: " + child_nodes.length);

for(var x=0; x < child_nodes.length;x++) {
  console.log(child_nodes[x].innerHTML);
}


// pega todos os nodes de "p"
var nodes = document.querySelectorAll("p")
console.log("nodes.length=" + nodes.length);
for(var x=0; x < nodes.length;x++) {
  console.log(nodes[x].innerHTML);
}
<div id="divComParagrafos">
    <p>Paragravo 1</p>
    <p>Paragravo 2</p>
</div>

Já o HTMLCollection é uma array de objetos que aparecem no documento HTML. Segundo a referência do Mozilla (https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCollection):

A interface HTMLCollection representa uma coleção genérica (objeto array) de elementos (na ordem em que aparecem no documento)

0

Tendo como referência a https://www.w3schools.com/js, podemos dizer que:

  • O objeto NodeList é uma lista de elementos extraídos do documento html. Exemplo:

    <title>Card Test</title> 
    <link type="text/css" rel="stylesheet" href="card.css">
    

    <div class= "card-area" id = "card1">
    
        <div clas="card" id="card-1">
    
            <div class = "front" id = "card1-front"> </div>
    
            <div class = "back" id = "card1-back"> <img src = "img-1.png">  </div>
    
        </div>
    
        <div clas="card" id="card-2">
    
            <div class = "front" id = "card2-front"> </div>
    
            <div class = "back" id = "card2-back"> <img src = "img-1.png">  </div>
    
        </div>      
    
    </div>
    <script src="card.js"> </script>
    

Se no meu script card.js eu escrever o seguinte comando var cards = document.getElementsByClassName("card") o resultado seria um nodeList contendo todos os nós identificados com a classe card.

  • O HTMLColection é uma coleção de elementos HTML (div, p, a, img, etc...), já o NodeList é uma coleção de nós, como no caso do exemplo acima, cada card é um nó do nodeList cards.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .