DEV Community

loading...

Beginner JavaScript - 11 - Document Object Model & Query Selection

The Nerdy Dev
Building products is my profession, Creating content is my passion. We believe that Education should be freely accessible to everyone and no one should be deprived of it.
・Updated on ・4 min read

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

Alt Text
Alt Text
Alt Text
Document Object Model, or DOM for short is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. So in essence, it is a visual representation of a hierarchical structure of all of the objects and properties that are contained in a web document.

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>
Enter fullscreen mode Exit fullscreen mode

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'); 
Enter fullscreen mode Exit fullscreen mode

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'); 
Enter fullscreen mode Exit fullscreen mode

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'); 
Enter fullscreen mode Exit fullscreen mode

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'); 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 :

If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

Looking to learn React.js with one Full Project, check this out :

πŸ‘‰πŸ» Follow me on Twitter : https://twitter.com/The_Nerdy_Dev

πŸ‘‰πŸ» Check out my YouTube Channel : https://youtube.com/thenerdydev

Discussion (0)