DOM manipulation in JavaScript: select and change elements

The DOM (Document Object Model) represents the elements of an HTML document as objects that the JavaScript language can work with. In practice, when you use JavaScript to work with the DOM, you can add, remove, change or read the HTML elements of your web page.

Throughout this chapter we will use the following HTML to illustrate the various DOM manipulation techniques:

<div id="container">
  <h1 class="title">Mon titre</h1>
  <p class="description">Ma description</p>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

Selecting DOM nodes

To manipulate the DOM, you first have to select the nodes you want to change. JavaScript offers several methods for that:

• The document.getElementById method selects a node by its ID. For example, to select the div with the ID “container”:

const container = document.getElementById('container');

• The document.getElementsByClassName method selects a list of nodes by their class. For example, to select every li element with the class “item”:

const items = document.getElementsByClassName('item');

• The document.querySelector method selects the first node matching a CSS selector. For example, to select the first li element of the list:

const firstItem = document.querySelector('li');

This method returns the first element matching the selector given. If nothing matches, the value returned is null.

• The document.querySelectorAll method works the same way, but returns a list containing every node that matches the selector. For example:

const items = document.querySelectorAll('li');

That gives you several elements at once. You can then walk through them with a loop, as seen in the chapter on loops.

If you have read that chapter, note that the forEach method of the Array object works on document.querySelectorAll('li'). Here is how:

document.querySelectorAll('li').forEach(function(li) {
  // Code to run for each li element
});

That code selects every li element on the page and runs the same code for each one. For example, to attach a “click” event to each li:

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    console.log("L'élément li a été cliqué !");
  });
});

An arrow function works just as well in place of the anonymous function:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log("L'élément li a été cliqué !");
  });
});

• Elements can also be selected by their IDs or their classes, exactly as you would in CSS. For example:

const container = document.querySelector('#container');
const title = document.querySelector('.title');

With this syntax you select elements by their IDs or their classes, which is handy when you want to target those specific elements in JavaScript.

There are many other ways of selecting elements in the DOM in JavaScript, but these methods are the ones you see most often and a good base to start from.

Changing the DOM in JavaScript

Now that we have several ways of getting hold of a particular element in our HTML, let us see how to change the DOM: adding content, changing text, changing the CSS.

Adding HTML in JavaScript

You can add HTML to a DOM element with the innerHTML property. For example, to add an item at the end of the list:

const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';

Adding a new element in JavaScript

You can also create a new element and attach it to a DOM element with the appendChild method. For example, to add an item at the end of the list:

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);

Changing the text of an element in JavaScript

You can change the text of an element with the textContent property. For example, to change the text of the heading:

const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';

Adding CSS to an element in JavaScript

You can add CSS to a DOM element with the style property. For example, to make the paragraph red and bold:

const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';

The setAttribute method does the same job. For example:

const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');

Conclusion

There are many other ways of manipulating the CSS of a DOM element in JavaScript, but these methods are the ones you see most often and a good base to start from.

Beyond CSS, you can work on other aspects of a DOM element: its HTML or text content, or the events you attach to it, on a click, on a hover, and so on.

The next chapter covers events in JavaScript and how to work with them.