HTML DOM Manipulation with JavaScript


The DOM (Document Object Model) is an interface, where you can access and manipulate the content, structure, and style of a website.

We will have a look at the following topics:

  • What is DOM?
  • How can we manipulate it?

What is the DOM?

When we open a HTML file in our browser, the DOM gets created by the browser, so the DOM is the representation of a HTML document.

HTML elements, e.g. <body></body><p></p>, become so-called nodes. Nodes have relationships to each other and are structured as a tree.

The root of the DOM is called document.
By using JavaScript, the DOM can be accessed and manipulated.

Accessing a Node / HTML element

There are various way to access a single node.


querySelector is a method to input a complete query and get the first occurrence back.

// access the body tag

// access the "button"-class

// access the "footer"-id

As we can see, we can access an element by tag(body), by class(.button) or by id(#footer).


querySelectorAll is a method to input a complete query and get all occurrences back.

// access the "button"-class


getElementById is a method to get a single element with a specific id.


We don’t need # like when using querySelector.


getElementsByClassName is a method to get all elements with a specific class.


We get the elements that has the class button.
We don’t need . like when using querySelector.

Like we can see in the method name, Elements is plural, therefore we get a collection of HTML elements back, not a single element, even if it is empty.


getElementsByTagName is a method to get all elements with a specific HTML tag.


We get the elements that has the HTML tag p.

Like we can see in the method name, Elements is plural, therefore we get a collection of HTML elements back, not a single element, even if it is empty.

What do I use?

I use querySelector and querySelectorAll, because both can be used with tag, class and id.
I don’t want to change multiple lines when I change an id into a class.

There is a lot of legacy and transpiled code, therefore you should know how to use all the other methods, too.

More complex queries

// a tag with a class
// <body class="main">

// a class as a child in a tag
document.querySelector("body > .text"); 
// <body><p class="text">...</p></body>

// a class anywhere in a tag
document.querySelector("body .text"); 
// <body><section><p class="text">...</p></section></body>

// a parent

// all children

// first child

// last child

// previous sibling

// next sibling
Manipulating elements in the DOM
// change text content of a node
document.querySelector(".text").textContent = "Hello";

// change HTML content
document.querySelector(".text").innerHTML = "<p>Hello</p>";

// change source of an image
document.querySelector(".logo").src = "cat.jpeg";
Creating new elements in the DOM
// create a new element and store it into a variable
const newParagraph = document.createElement("p");

// add text to the newly created paragraph
newParagraph.textContent = "Hello";

// find container where the new paragraph should live in
const container = document.querySelector("body");

// add new paragraph to container
Adding an Event Listener to the DOM
<!-- a simple button -->
<button class="my-cool-button">
  Click Me
// find the button in the DOM by using the class
const myButton = document.querySelector(".my-cool-button");

// add a listener to the button, that waits for a "click" event,
// then run the following function
myButton.addEventListener("click", function() {

Also read

How to Convert Object to String in Javascript?

We hope it will helpful to you.

0 0 votes
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Spread the love
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x