Post contents
The DOM represents the structure of a webpage, enabling developers to modify content, styles, and elements in real time. In this article, we will explore the fundamentals of DOM manipulation, providing you with essential techniques and examples to enhance your web development projects.
What we'll learn in this article
- Manipulating DOM elements
- Creating elements
- Selecting elements
- Adding and removing
styles
,class
es & content - Listening to events
- Data loading
The document
The document
is how you interact with the DOM and everything that is loaded within it. We use the document.
prefix to manipulate all elements that compose the webpage we're looking at.
Understanding the DOM
If you haven't read the previous chapter, this is the time to do so. We're going to dive straight into how to manipulate the DOM, but it's important to understand the context behind how content is displayed by the browser.
Creating elements
We can create HTML elements using the createElement('tag')
method. Let's create a new paragraph, specified by the <p>
tag.
const newParagraph = document.createElement('p');/* Modify the content with the textContent suffix */newParagraph.textContent = "This is a new paragraph.";
But this simply stores a new element within the const
we created. For us to display content, we must append an element to the document.
Let's append our new paragraph to the <body>
tag.
const newParagraph = document.createElement('p');/* Modify the content with the textContent suffix */newParagraph.textContent = "This is a new paragraph.";/* Apply the appendChild method to the document.body. */document.body.appendChild(newParagraph);
If we were to look at our document, we would now see our paragraph as part of the body.
Creating elements
Editconst paragraphForm = document.getElementById("p-form");const submitButton = document.getElementById("p-submit");const removeButton = document.getElementById("p-remove");const addParagraph = () => { let newParagraphText = paragraphForm.value; let newParagraph = document.createElement("p"); newParagraph.textContent = newParagraphText; document.body.appendChild(newParagraph);};const removeAllParagraphs = () => { const paragraphs = document.querySelectorAll("p"); paragraphs.forEach((paragraph) => paragraph.remove());};submitButton.addEventListener("click", addParagraph);removeButton.addEventListener("click", removeAllParagraphs);
We can use createElement('tag')
to create any tag supported by HTML. In our first chapter - HTML - we go over semantic elements. Make sure to recap!
Selecting elements
In our demo above, we're already making use of the selecting methods of JavaScript do make our demo interactive. But here's a list of the ways we can get elements from the DOM.
Method | JavaScript | Returns |
---|---|---|
Select by id | document.getElementById("myElement") | A unique HTMLElement |
Select by class | document.getElementsByClassName("myClass") | HTMLCollection (Live) |
Select by <tag> | document.querySelectAll("p") | NodeList (Static) |
Manipulating elements
Now that we understand how to select elements and bind them to variables, we can start manipulating them in any way we want.
We're now going to use everything we've learned in Web Fundamentals — variables, styles, classes, inheritance, and apply them all through JavaScript!
Adding and removing styles
CSS properties are called styles
, and we can access them through JavaScript.
In CSS, properties are shown as such:
body { background-color: lightblue;}
When accessing properties in JavaScript, we use a different syntax, in camel-case.
Using the document
, we can access and apply any styles we want.
document.body.style.backgroundColor = "lightblue";
There are some limitations, however. In JavaScript, unlike CSS, there are no shorthands. Let's take padding
, for example.
body { padding: 24px 48px; /* [padding-top & padding-bottom], [padding-left & padding-right] */}
In JavaScript, however, we cannot apply those properties at once. In JavaScript, we would need to do each individually.
document.body.style.paddingTop = "24px";document.body.style.paddingBottom = "24px";document.body.style.paddingLeft = "48px";document.body.style.paddingRight = "48px";
Adding and removing classes
In HTML, we can apply as many classes to an element as we'd like.
<button class="btn-emphasized btn-large btn-icon">Button label</button>
In CSS, these are declared as separate classes.
.btn-emphasized { };.btn-large { };.btn-icon { };
In JavaScript, we can access an element's classes with the .classList
suffix.
We can add a class with the following command.
const element = document.getElementById("#element");element.classList.add("myClass");
We can remove a class with the following command:
const element = document.getElementById("#element");element.classList.remove("myClass");
We can also toggle a class using .toggle
.
const element = document.getElementById("#element");element.classList.toggle("myClass");
In the following demo, we're toggling two classes on a card: .small
and .no-image
. We're also performing style changes when both are applied!
/* Causes the card to shrink in size */.small { width: 240px;}/* When applied, hides the #illustration */.no-image > #illustration { display: none;}/* When the card is small and the illustration is hidden,change the corner radius to be smaller, so as to not clip the text. */.pfp-card.small.no-image { border-radius: 24px;}