How do I access HTML elements from Javascript?

querySelectorAll returns a static NodeList object, meaning that changes in the DOM do not effect the collection...

Consider this HTML and the functions below to reference its HTML elements:

<body id="body">
  <div class="container">
    <h2 name="h" class="header">Header 1.1</h2>
    <h2 name="h" class="header">Header 1.2</h2>
  </div>
</body>
Method Returns Return type
document.body body Element
document.getElementById("body") body Element
document.getElementsByClassName("container") [div] HTMLCollection<Element>
document.getElementsByClassName("header") [h2, h2] HTMLCollection<Element>
document.getElementsByTagName("h2") [h2, h2] HTMLCollection<Element>
document.getElementsByName("h") [h2, h2] NodeList<Element>
document.querySelector("h2") h2 Element
document.querySelectorAll("h2") [h2, h2] static NodeList<Element>
document.querySelectorAll("h2")[1] h2 Element (at index 1)

Try the selector code

Create an empty file index.html and paste the code below:

<body id="body" onload="loaded()">
  <div class="container">
    <h2 name="h" class="header">Header 1.1</h2>
    <h2 name="h" class="header">Header 1.2</h2>
  </div>
</body>
<script>
  function loaded() {
    console.log('document.body', document.body);
    console.log('document.getElementById("body")', document.getElementById("body"));
    console.log('document.getElementsByClassName("container")', document.getElementsByClassName("container"));
    console.log('document.getElementsByClassName("header")', document.getElementsByClassName("header"));
    console.log('document.getElementsByTagName("h")', document.getElementsByTagName("h2"));
    console.log('document.getElementsByName("h")', document.getElementsByName("h"));
    console.log('document.querySelector("h2")', document.querySelector("h2"));
    console.log('document.querySelectorAll("h2")', document.querySelectorAll("h2"));
    console.log('document.querySelectorAll("h2")', document.querySelectorAll("h2")[1]);
  }
</script>

Dynamic or static NodeList

A NodeList retrieved with getElementsByName is a list of Elements that keeps itself up-to-date when the DOM changes.

querySelectorAll returns a static NodeList object, meaning that changes in the DOM do not effect the collection.

Map, reduce, filter

In order to manipulate or filter the list of retrieved objects, the returned collection (HTMLCollection or NodeList) need to be converted to an array. The following code shows how a map function cannot be performed on a NodeList…

const headerTexts = document.querySelectorAll("h2").map(x => x.innerHTML);

and results in error:

document.querySelectorAll(...).map is not a function

HTMLCollection and NodeList are iterable so you can use the spread syntax to convert them to arrays like this:

[...document.querySelectorAll("h2")]

Getting the innerHTML of each header would look like this:

const headerTexts = [...document.querySelectorAll("h2")].map(x => x.innerHTML);
console.log(headerTexts);

Output:

["Header 1.1", "Header 1.2"]

Example: Reverse header texts

[...document.querySelectorAll("h2")].map(x => x.innerHTML = x.innerHTML.split("").reverse().join(""));

Try it with the h2 headers on this page:

Written by Loek van den Ouweland on April 02, 2019. Questions regarding this artice? You can send them to the address below.
By using this site, you acknowledge that you have read and understand our Cookie and Privacy Policy.