Beginner JavaScript - 11 - Document Object Model & Query Selection

Hey everyone 👋🏻,

In this article, let us cover a detailed introduction on Document Object Model (DOM) in JavaScript. This is the eleventh part of my Beginner JavaScript Series on Dev.

Document Object Model - A complete picture

Let's dive a bit DEEPER

To understand the big picture of the Document Object Model. We need to understand that when our browser first loads an HTML page, it first maps it to a visual representation. So it basically parses over the HTML code that you and I write, creates a visual hierarchical representation of it which is called as the DOM. Each element that we define in our HTML template maps to some DOM object that is part of this DOM structure that we are talking about.
So the HTML DOM that gets produced by the browser, constructs a tree-like structure that consists of all your HTML page element as DOM objects.
For instance, assume that the below HTML code gets loaded in the browser.

<!DOCTYPE html>
<html>
    <head>
        <title>This is some HTML page</title>
    </head>
    <body>
        <p class="element-one">I am a paragraph</p>
        <h1>I am an important element </h1>
    </body>
</html>

Querying Elements in DOM

Querying for Elements in the DOM can be used using DOM Selectors. So let us understand 5 ways using which you can select elements in a DOM using selectors.

1. getElementsByTagName

The getElementsByTagName method returns us an HTMLCollection of elements with the given tag name. Here the complete document is searched, including the root node until we find all the elements that contain a certain tag name that is passed to this method as an argument. The interesting thing about using the getElementsByTagName method is that the returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call the same method again.

// As an example, let us say we are looking for all the h1 elements
const elements = document.getElementsByTagName('h1');

2. getElementsByClassName

The getElementsByClassName method returns a live HTMLCollection of elements which have a particular class on them that we are looking for. When called on the document object, the complete document is searched, including the root node.

// As an example, let us say we are looking for an element with the class of game
const games = document.getElementsByClassName('game');

3. getElementById

The getElementById returns an element object whose id attribute matches with the id that we are looking. Since element IDs, as we know, are required to be unique if specified, they're a useful way to get access to a specific element quickly.

// As an example, let us say we are looking for an element with id of username. Each HTML page can only have one such element that has the id that we are looking for. 
const username = document.getElementById('username');

4. querySelector

The querySelector returns us the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

// As an example, let us say we are looking for an element with id of username. Each HTML page can only have one such element that has the id that we are looking for. 
const username = document.querySelector('#username');

5. querySelectorAll

The querySelectorAll method returns a static, NOT live NodeList representing a list of all the elements that we have in the document that match the specified group of selectors.

// As an example, let us say we are looking all elements that have the class of user on it.
const users = document.querySelectorAll('.user'); // Static Non-Live Node List

So this is it for this one. I do have a video on Introduction to Document Object Model and Query Selection as well. So make sure to check them out if that interests you :