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
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
edocument.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)
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.