Web Fundamentals: Manipulating the DOM with JavaScript

November 13, 2024

2,832 words

This article is part of a series: Web Fundamentals

  1. Part 1: Introduction to HTML, CSS, and JavaScript
  2. Part 2: HTML
  3. Part 3: CSS - The Basics
  4. Part 4: CSS - Inheritance & Hierarchy
  5. Part 5: Flexbox
  6. Part 6: Grid
  7. Part 7: Responsive Design
  8. Part 8: JavaScript Basics
  9. Part 9: Understanding the DOM
  10. Part 10: Manipulating the DOM with JavaScript

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, classes & 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.

📝 Click here to read the article

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

Edit

Files

  • src
const 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.

MethodJavaScriptReturns
Select by iddocument.getElementById("myElement")A unique HTMLElement
Select by classdocument.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;}