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");
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");
getElementById
getElementById is a method to get a single element with a specific id.
document.getElementById("header");
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");
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");
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;
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";
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);
Adding an Event Listener to the DOM
<!-- a simple button -->
<button class="my-cool-button">Click Me</button>
// 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");
});
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.