DevOps With Harsh
Introduction to the DOM selectors (Part 1)

Introduction to the DOM selectors (Part 1)

Harsh Gupta's photo
Harsh Gupta
·

3 min read

Table of contents

Welcome to another exciting post on learning JavaScript with Harsh. Today's topic is all about understanding and manipulating the Document Object Model (DOM), NodeLise and HTML collections. Let's dive in!

What is DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. Essentially, the DOM represents the document as nodes and objects, allowing programming languages to interact with the page.

Understanding the HTML Structure

Let's consider the following HTML code to understand how the DOM works:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM learning</title>
    <style>
        .bg_black {
            background-color: #212121;
            color: #fff;
        }
    </style>
</head>
<body class="bg_black">
    <div>
        <h1 id="title" class="heading">DOM learning on chai aur code</h1>
        <h2 class="harsh">Lorem ipsum dolor sit.</h2>
        <h2 class="yash">Lorem ipsum dolor sit.</h2>
        <h2>Lorem ipsum dolor sit.</h2>
        <p>Lorem ipsum dolor sit amet.</p>
        <input type="password">
        <ul>
            <li class="list-item">one</li>
            <li class="list-item">two</li>
            <li class="list-item">three</li>
            <li class="list-item">four</li>
        </ul>
    </div>
</body>
</html>

Targeting Elements by ID

To target an element by its ID in JavaScript, we use the document.getElementById() method. This method requires a parameter, which is the ID of the element we want to select.

For example, to select the h1 element with the ID title:

document.getElementById("title")
// Outputs: <h1 id="title" class="heading">DOM learning on chai aur code</h1>

Accessing Element Attributes:

document.getElementById("title").id
// Outputs: 'title'

However, note the following:

document.getElementById("title").class
// Outputs: undefined

document.getElementById("title").className
// Outputs: 'heading'

Reason:

Sometimes the name of the values can be different behind the scenes. The document knows the class by className.

Getting More Attributes

You can get more attributes using the getAttribute method:

document.getElementById("title").getAttribute("class")
// Outputs: 'heading'

document.getElementById("title").getAttribute("id")
// Outputs: 'title'

Setting Attributes

You can also set attributes using the setAttribute method:

document.getElementById("title").setAttribute("class", "test")
// Outputs: Prints undefined in the console,
// but if you check in the elements section of the browser, 
//you will see that the class is changed from 'heading' to 'test'

Storing Elements in a Variable

You can store the element in a variable for easier access:

const title = document.getElementById("title");
console.log(title);
// Outputs: <h1 id="title" class="heading">DOM learning on chai aur code</h1>

Adding Styles to Elements

Since the element is an object, you can add styles to it using the dot notation:

title.style.backgroundColor = "green";
title.style.padding = "15px";

H1 with background color as green and 15px padding

Getting Value/Content from the Variable title

Let's see how to get the value/content from the variable title which stores the h1 element with the ID title.

Accessing Content with textContent, innerHTML, and innerText

title.textContent
// Outputs: "DOM learning on chai aur code"

title.innerHTML
// Outputs: "DOM learning on chai aur code"

title.innerText
// Outputs: "DOM learning on chai aur code"

Currently, they all provide the same output, but there are significant differences among them.

Differences Between textContent, innerHTML, and innerText

Suppose our HTML code looks like this:

<h1 id="title" class="heading">DOM Learning 
<span style="display: none;">test text</span></h1>

On the screen, the output will be: "DOM Learning".

Using innerText

title.innerText
// Outputs: "DOM learning"

innerText respects the styling and only returns the visible text content.

Using textContent

title.textContent
// Outputs: "DOM learning test text"

textContent returns all the text within the element, regardless of styling, including hidden text.

Using innerHTML

title.innerHTML
// Outputs: "DOM learning <span style="display:none;">test text</span>"

innerHTML returns the HTML content of the element, including any child elements and their properties.

By understanding these differences, you can choose the appropriate method for your specific needs when manipulating or retrieving content from the DOM.

JavaScriptProgramming BlogsWeb DevelopmentFrontend Developmentfrontendwebdev