DOM Manipulation in JavaScript: A Beginner’s Guide to Interacting with Web Pages Dynamically

3 min readOct 21, 2023

DOM manipulation refers to interacting and controlling Document Object Model(DOM) using JavaScript to modify and change the structure, content or appearance of the web page. DOM is a hierarchical representation of HTML content, tags and attributes where each element is structured as JavaScript object which has its own unique attributes.

It is possible to append, delete or modify the HTML element using JavaScript. It is possible to create and delete the child and parent HTML element. We can use various factors like ids, classes, element name or other attributes to select the individual or set of specific HTML elements. They return a list of Node List which can be treated as regular JavaScript array.

Getting The Element From HTML

Let’s take a simple example of a web page with code like this:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document Object Model</title>
    </head>
    <body>

     <h1 class='title' id='first-title'>First Title</h1>
     <h1 class='title' id='second-title'>Second Title</h1>
     <h1 class='title' id='third-title'>Third Title</h1>
     <h1></h1>
     <div class="para">
      <p> Some text </p>
      </div>
    </body>
  </html>

Now, let’s see how we can access the elements using various methods:

1. Using Element Name

// syntax
document.getElementByTagName('tagname')

// code
const first_title = document.getElementByTagName('h1') // gives first h1 tag only

The document.getElementbyTagName() takes a string as input and returns only the first element. The string contains the name of the tag of the element. To get all the titles from the web page using this method, document.getElementsbyTagName() returns all the titles and loops can be used to access every element from the list.

const allTitles = document.getElementsByTagName('h1')

console.log(allTitles) //HTMLCollections

2. Using Class Name

// syntax
document.getElementByClassName('classname')
// code
const first_title = document.getElementByClassName('title') // gives first h1 tag only

The document.getElementbyClassName() takes a string as input and returns only the first element. The string contains the class of the tag of the element. To get all the titles from the web page using this method, document.getElementsbyClassName() returns all the titles and loops can be used to access every element from the list.

const allTitles = document.getElementsByClassName('title')
console.log(allTitles) //HTMLCollections

3. Using IDs

// syntax
document.getElementById('id')
// code
const first_title = document.getElementById('first-title') // gives first h1 tag only

This works similar to the other two methods. You can pass the method id as argument, which returns the first HTML element with given id value.

4. Using Query Selector

Using query selectors is a more flexible and easier way to select the HTML element. We can use any of class, ids, tag name or multiple values to get the individual or set of specific HTML elements. Let’s select the first h1 tag using this method:

let firstTitle = document.querySelector('h1') // select the first available h1 element
let firstTitle = document.querySelector('#first-title') // select id with first-title
let firstTitle = document.querySelector('.title') // select the first available element with class title

As I told earlier, it is more flexible as it can work same as any of the above three methods and more. It is important to notice that hash(#) and dot(.) are used before the value of the ids and classes respectively. Let’s look at one more example, to select the paragraph inside the division tag:

let para = document.querySelector('div p')
 // selects the first paragraph inside the division tag
let para = document.querySelector('.para p')
// selects the p tag inside elements with para class name

To select multiple values using query selector, we use the querySelectorAll() method, which returns a Node List. Let’s look at an example of this:

let titles = document.querySelector('.title')
// select all elements with "title" class

This concludes the first day of DOM Manipulation in JavaScript. I hope you all learn something new and interesting. Keep learning.