Loading course content...
Table of Contents
Understanding the DOM Tree in JavaScript
Code Playground is only enabled on larger screen sizes.
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.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button onclick="example()">Click Me</button> <script src="./script.js"></script> </body> </html>