In this write-up, we'll learn how to:
You can think of the DOM as a tree. Think of how we usually nest HTML elements.
<!DOCTYPE html> <html> <head> <title></title> <meta/> <meta/> </head> <body> <h1></h1> <p> <a></a> </p> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
The following is a visual of how your browser organizes this HTML in the DOM
It's a tree! And we'll use terminology that we would when talking about a family tree, like "parent", "child", "ancestor", and "sibling".
How can we interact with this tree you ask? In any way we please! We can remove children, add children, and change properties of elements like their content and styling.
There are a few ways to select elements from the DOM.
document.getElementById() document.getElementsByClassName() document.querySelector()
Given this HTML:
We can select is by it's
.getElementById returns the element as an object. In this example, we will assign that element to the variable
const myGreeting = document.getElementById("greeting")
document.getElementById("greeting") will return
null if no elements have
Now that we have that element selected, we can alter anything property we want to about it! That's the fun stuff, so feel free to skip to that section.
In the meantime, there are some other useful methods.
By Class Name
const greetingArr = document.getElementsByClassName("greeting")
Notice the "s" on elements in
getElementsByClassName. Any DOM method with the plural elements will return an array. You are able to loop over each element, or select an individual element with bracket notation.
greetingArr would give us the first one.
By a CSS selector
You can do some more sophisticated selections with
document.querySelector(). This method will return the first element it finds that matches the CSS selector given it. Here are a few examples:
`document.querySelector(".my-class")` `document.querySelector("#my-id")` `document.querySelector("p.black")`
document.querySelectorAll() is similar, but returns an array.
Here is the coolest use case I have run into with
const checkedBoxes = document.querySelectorAll("input[name=likes]:checked");
Here, we can select all input boxes with
Let's use our HTML from above:
For practice, type out how you would select this div and assign that element to the variable
Explore this object in the console. Try to figure out how to change it by changing it's different properties.
As you can see, we have access to the
children, and content our element. We can reassign these attributes. Try to manipulate these properties on your own.
To you you started, our goal will be to change the background color of the greeting and the text.
If you'd like to try this on your own, it would be great practice. A good property to look at is the
The style object has properties for every CSS property. We can assign those properties to any value we'd like.
myGreeting.style.backgroundColor = "blue"
Text and Content
We can also manipulate the contents of elements.
const myGreeting = document.getElementById("greeting") myGreeting.textContent = "Long time no see!"
myGreeting.textContent = "Long time no see!"
.textContent will replace any text.
See what happens if you run the following:
myGreeting.textContent = "<h1>Long time no see!</h1>"
If we'd like the text to be inside a HTML
<h1>, we can use
myGreeting.innerHTML = "<h1>Long time no see!</h1>"
But that isn't the only or best way to add a new
<h1> to the DOM. The DOM API also gives us a method to create new elements.
In our most recent use of
<h1>. We now want to do that using
document.createElement() takes a string of the tag name you want to create. It then returns the element.
While we're at it, let's assign a variable to the element that
document.createElement() returns and add some text to it.
const h1 = document.createElement("h1") h1.textContent = "Long time no see!"
h1 exists in memory only. Now on the DOM. The most common way to append this to the DOM is to first
select the parent, and call it's
const h1 = document.createElement("h1") h1.textContent = "Long time no see!" myGreeting.appendChild(h1)
document.createElement() by listing an array of string to an unordered list
const animals = ["dog", "cat", "mouse"]
Here's a complimentary
ul to append to.
You may be asking why we wouldn't just write this in our HTML.
Much of your DOM manipulation will happen after the user does something. To complete what you've started in this article, making the user able to change what they see, you'll need to learn to use event listeners