What is the difference between Htmlcollection, Nodelist and Object?

Question

Sometimes I have to manipulate a Nodelist, another one Object but I didn’t understand exactly what the difference is between them. And what the GIFT with them?

Answer 1

The GIFT (Document Object Model) has several objects, such as window representing a browser window, and document representing the content of the page.

Within these objects, there may be lists of objects, which are the Nodelists. For example the document can have a list of objects input, one table can have a list of objects tr and so on.

According to the documentation of Mozilla (https://developer.mozilla.org/en-US/docs/Web/API/NodeList):

Objects Nodelist are collections of nodes similar to objects returned by methods Node.childNodes and document.querySelectorAll().

That is, collections of objects. Therefore, the GIFT is formed of objects, which may contain Nodelist of other objects.

Example:

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>

Already the Htmlcollection is an array of objects that appear in the document HTML. According to the Mozilla reference (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection):

The interface Htmlcollection represents a generic collection (object array) of elements (in the order they appear in the document)

Answer 2

With reference to https://www.w3schools.com/js, we can say that:

• The Nodelist object is a list of elements extracted from the html document. Example:

  <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>
  

If in my script card.js I write the following command var cards = Document.getElementsByClassName("card") the result would be a nodeList containing all nodes identified with the class card.

• Htmlcolection is a collection of HTML elements (div, p, a, img, etc...), while Nodelist is a collection of nodes, as in the example above, each card is a node of the nodeList cards.