How to Manipulate the DOM Tree in JavaScript

Previously we introduced the concept of the DOM tree, and discussed how to select elements according to their ids, classes, names and element tags.

And now, it is time to talk about how to manipulate the selected elements.

Changing the element content

There are two properties available for altering the content of an element, innerHTML for all types of content, and textContent for textual content only.

innerHTML

The innerHTML property accesses the HTML content of an element. For example,

html

<body>
  <div id="parent">
    <p id="first">Lorem ipsum dolor sit. . .</p>
 
    <p id="second">
      Quidem molestiae distinctio quae, <a href="">necessitatibus</a> deserunt
      dignissimos. . .
    </p>
  </div>
 
  <script src="./index.js"></script>
</body>

javascript

let first = document.getElementById("first");
console.log(first.innerHTML);
 
let second = document.getElementById("second");
console.log(second.innerHTML);

Notice that the result will be printed as a string. Even though #second has a child node (<a>), it is not treated as a node in this case.

You can use the innerHTML property to assign new content for the selected element:

javascript

let first = document.getElementById("first");
first.innerHTML = "This content is changed by JavaScript.";

You can assign HTML content as well:

javascript

let second = document.getElementById("second");
second.innerHTML =
  "This content is changed by JavaScript. <a href=''>This link is changed by JavaScript as well.</a>";

However, this method of creating HTML nodes is generally not recommended, because it is likely that your code editor will not provide syntax highlighting, and it might lead to mistakes.

Later, we are going to introduce a more JavaScript way to create new HTML elements.

textContent

If you are only dealing with textual content, you can opt to use the textContent property instead.

javascript

let first = document.getElementById("first");
first.textContent = "This content is changed by JavaScript.";

Changing the element attribute

You are also allowed to programmatically change the element's attributes using JavaScript. For example, let's say you have an image element:

html

<img id="image" src="image.png" />

You can change the image source by setting the src attribute like this:

javascript

let image = document.getElementById("image");
 
image.src = "new_image.png";

You may also add new attributes to the selected element using the setAttribute() method.

javascript

let image = document.getElementById("image");
 
image.src = "new_image.png";
image.setAttribute("alt", "This is an image.");

Changing the element style

There are two ways to change the styles of an element in frontend development. You can either change the styles directly, or change the class.

The styles of an element can be altered directly by specifying the style name. For example,

html

<body>
  <div id="parent">
    <p id="first">Lorem ipsum dolor. . .</p>
 
    <p id="second">. . .</p>
 
    <p id="third">. . .</p>
  </div>
 
  <script src="./index.js"></script>
</body>

javascript

let first = document.getElementById("first");
 
first.style.color = "blue";

Changing the class attribute is also a commonly used technique, but the reason that we did not discuss it in the previous section is that, it works differently compared to other attributes.

Since class is a special keyword in JavaScript, and to avoid conflicts, you need to use either className or classList.

The className property is a setter, which means you can set the class by assigning a string directly.

html

<body>
  <div id="parent">
    <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
 
    <p id="second" class="blue bold">. . .</p>
 
    <p id="third" class="red underline">. . .</p>
  </div>
 
  <script

css

.blue {
  color: blue;
}
 
.red {
  color: red;
}
 
.underline {
  text-decoration: underline;
}
 
.bold {
  font-weight: 700;
}

javascript

let first = document.getElementById("first");
 
first.className = "red underline bold";

On the other hand, classList is read-only. You cannot edit it directly and must use the add() or remove() methods instead.

javascript

let first = document.getElementById("first");
 
first.classList.remove("blue");
first.classList.add("red");
first.classList.add("bold");