DEV Community

miku86
miku86

Posted on

HTML DOM Manipulation with JavaScript

Intro

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

We will have a look at the following topics:

  • What is the 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

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

// access the body tag
document.querySelector("body");

// access the "button"-class
document.querySelector(".button");

// access the "footer"-id
document.querySelector("#footer");
Enter fullscreen mode Exit fullscreen mode

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

querySelectorAll

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

// access the "button"-class
document.querySelectorAll(".button");
Enter fullscreen mode Exit fullscreen mode

getElementById

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

document.getElementById("header");
Enter fullscreen mode Exit fullscreen mode

We get the element that has the id header.
We don't need # like when using querySelector.

getElementsByClassName

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

document.getElementsByClassName("button");
Enter fullscreen mode Exit fullscreen mode

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

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

document.getElementsByTagName("p");
Enter fullscreen mode Exit fullscreen mode

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

Sometimes you have to find more complex stuff

// a tag with a class
document.querySelector("body.main"); 
// <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
document.querySelector("body").parentNode;

// all children
document.querySelector("body").childNodes;

// first child
document.querySelector("body").firstChild;

// last child
document.querySelector("body").lastChild;

// previous sibling
document.querySelector("body").previousSibling;

// next sibling
document.querySelector("body").nextSibling;
Enter fullscreen mode Exit fullscreen mode

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 = "lion.jpeg";
Enter fullscreen mode Exit fullscreen mode

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
container.appendChild(newParagraph);
Enter fullscreen mode Exit fullscreen mode

Adding an Event Listener to the DOM

<!-- a simple button -->
<button class="my-cool-button">
  Click Me
</button>
Enter fullscreen mode Exit fullscreen mode
// 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() {
  alert("Hi");
});
Enter fullscreen mode Exit fullscreen mode

Outro

These are just a few of the ways to work with the DOM to give you a small primer.

If you want to dive deeper into the topic, read this free book.

Top comments (0)