DOM - NodeList (Collection)

About

A nodelist is the result of a selection that returns more than one node (Generally an element)

Nodelist:

  • HTMLAllCollection,
  • HTMLFormControlsCollection,
  • HTMLOptionsCollection,
  • interfaces are collections derived from the HTMLCollection interface.

Management

Type and prototype

let nodeList = document.querySelectorAll("body")
console.log("Type of NodeList: "+typeof(nodeList));
console.log("Prototype of NodeList: "+nodeList.__proto__.toString());

Length

document.querySelectorAll('Selector').length
  • With JQuery
jQuery(selector).length

toArray

You can transform it to an array:

let arrayOfNode = [...document.querySelectorAll("selector")];
  • With the Array.from
let arrayOfNode = Array.from(document.querySelectorAll("selector"));
  • With the slice function
let arrayOfNode = [].slice.call(document.querySelectorAll('selector'));

Loop

  • A list of div element where we want to loop.
<ul id="my-list">
    <li>You</li>
    <li>can</li>
    <li>do</li>
    <li>JS</li>
</ul>

Property loop

Because a nodelist is just an object, we can loop through its properties with the for statement

// Get all divs element
// allDivs is an array of NodeList
allDivs=document.querySelectorAll("#my-list > li");
for (i = 0; i < allDivs.length; i++) {
    console.log("Li element number "+i+" - "+allDivs[i].textContent);
}

ForEach

  • A nodelist has also a forEach
  • A HTML collection can be turned as an array Array.from()
let sentence ="";
document.querySelectorAll("#my-list > li").forEach(element => {
  let text = element.innerText;
  if (text == "can" ) {
     text = "can not";
  }
  sentence += text+" ";
})
console.log(sentence);
  • Result

For more see DOM - Collection Iteration (NodeList, ..)

Documentation / Reference





Discover More
DOM - API

The DOM API is a specification that specifies all classes and function to manipulate the DOM tree. The DOM API is present natively in browser and may be implemented via a library in other application/environment....
DOM - Child Nodes of a Node

Child Nodes of an element in the dom tree Via child selector, you can select element that are child of another element. The childNodes property of an element returns a collection of child Node....
DOM - Collection Iteration (NodeList, ..)

in the DOM. API A selection of element with the Web API DOM is returned as a nodelist. For forEach Property Web API Example Source...
DOM - Element

An element is the most common type of node in the DOM. When you want to do something to an element, first you need to select it. A dom element is generally the memory representation of: an HTML element...
HTML - Embed Element (Plugin Integration point)

The embedEmbed Element represents an integration point for plugin. The document property document.embeds and document.plugins return an HTMLCollection of the embed elements in the Document. To overcome...
HTML - Hyper(Link) (href elements)

A link in HTML is an element that have the href attributes with an URL value An hyperlink is a contraction of hypertext link. link element The following elements are hyperlink because they have the...
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
DOM - Selection of Node Element (querySelector)

This page shows you how to select node elemenst in the DOM tree This section shows you how to returns the first element within the document of a selection. In the below code: selector is a selector...
What is an HTML Form?

form is an element that represents a user-submittable form. When parsed as HTML, a form element's start tag will imply a p element's end tag just before. The pizza order form (taken from the...



Share this page:
Follow us:
Task Runner