Understanding the DOM Tree in JavaScript

Under the document object, there are several methods for selecting elements.

Selecting a single element by id

getElementById() allows you to select a single element based on its id. For example:

index.html

html

<body>
  <p id="p1">Lorem ipsum dolor. . .</p>
  <p id="p2">. . .</p>
 
  <script src="./script.js"></script>
</body>

script.js

javascript

// Get the element with the id "p1"
let p1 = document.getElementById("p1");
 
console.log(p1); // -> <p id="p1">Lorem ipsum dolor. . .</p>

After selecting the element, you can then access its content using the innerHTML property.

script.js

javascript

// Get the element with the id "p1"
let p1 = document.getElementById("p1");
 
console.log(p1.innerHTML); // -> "Lorem ipsum dolor. . ."

We'll talk more about how to manipulate HTML elements later. For now, let's focus on selecting elements.

Selecting a group of elements by class name

You can also select multiple elements based on their class. For example,

index.html

html

<body>
  <p class="blue">Element 1</p>
  <p class="blue">Element 2</p>
  <p class="blue">Element 3</p>
  <p class="blue">Element 4</p>
 
  <script src="./index.js"></script>
</body>

script.js

javascript

let blue = document.getElementsByClassName("blue");
 
console.log(blue);

text

HTMLCollection { 0: <p class="blue">Element 1</p>, 1: <p class="blue">Element 2</p>, 2: <p class="blue">Element 3</p>, 3: <p class="blue">Element 4</p>, length: 4, item: function item() {}, namedItem: function namedItem() {}, constructor: { name: "HTMLCollection" } }

This method returns a collection of node objects, which has an array-like structure, meaning you can access each individual element using a for...of loop:

script.js

javascript

let blue = document.getElementsByClassName("blue");
 
for (let e of blue) {
  console.log(e);
}

text

<p class="blue">Element 1</p>
<p class="blue">Element 2</p>
<p class="blue">Element 3</p>
<p class="blue">Element 4</p>

Selecting a group of elements by tag name

getElementsByTagName() collects all elements with the specified tag name.

index.html

html

<body>
  <p>Lorem ipsum dolor. . .</p>
  <p>. . .</p>
 
  <script src="./index.js"></script>
</body>

javascript

let p = document.getElementsByTagName("p");
 
for (let e of p) {
  console.log(e);
}

Similarly, it returns a collection of HTML node objects, which you can iterate over using the for...of loop.

Selecting elements with query selectors

Lastly, you can also select elements using query selectors.

The querySelector() method returns the first element in the DOM tree that matches the given query selector.

html

<body>
  <p class="underlined">Lorem ipsum dolor. . .</p>
  <p class="underlined">. . .</p>
 
  <script src="./index.js"></script>
</body>

javascript

// Get the first element with class "underlined"
let underlined = document.querySelector(".underlined");
 
console.log(underlined);

text

<p class="underlined">Lorem ipsum dolor. . .</p>

And the querySelectorAll() method selects all elements that the selector matches. Again, it returns a collection of elements that you can iterate over using a loop.

javascript

let underlined = document.querySelectorAll(".underlined");
 
for (let e of underlined) {
  console.log(e);
}

However, there is one small difference between querySelectorAll() and getElementBy*() methods, when it comes to iterating over the returned results.

The getElementBy*() methods return an HTMLCollection, meaning you can only iterate over them using loops.

querySelectorAll(), on the other hand, returns a NodeList, which supports the use of forEach().

For example,

javascript

let underlined = document.querySelectorAll(".underlined");
 
underlined.forEach((e) => {
  console.log(e);
});

This should give you the same result as before.