30 Days Of JavaScript

Day 21: Consolidation 4

Lesson 3: DOM Manipulation

The most interesting thing to do with JavaScript is change what's on the screen, or what is in our DOM (Document Object Model).

We can do that with a number of methods.

Getting DOM Elements

1const text = document.getElementById("red-text");
2console.log(text);

This gets the first element on the page that has an ide of id="red-text". text will be a fill JavaScript object of type HTMLElement with all sorts of properties and functions that we can call on it.

You can also get all the elements on a page that have a certain class as an HTMLCollection.

1<div class="title-large" id="container">
2  <p class="title-small">Hello Simon</p>
3  <p class="title-small">Hello Raj</p>
4  <p class="title-small">Hello Zuma</p>
5  <p class="title-small">Hello Sara</p>
6</div>

With JavaScript of

1const titles = document.getElementsByClassName("title-small");
2console.log(titles);

Our console.log has printed out an HTMLCollection, which is every element on the page that has the class title-small. If you want to access a single one, like the first, then you can do this:

1console.log(titles[0]);

Deleting DOM Elements

If you want to remove an element from the DOM then you can just ask it to remove() itself, like this.

1const titles = document.getElementsByClassName("title-small");
2const simon = titles[0];
3console.log(simon);
4simon.remove();

If you want to get the children of an element and remove them, like a list, then you can do that with a while loop and .removeChild() like this.

1<ul id="todos">
2  <li>Clean kitchen</li>
3  <li>Go for a run</li>
4  <li>Cook lunch</li>
5  <li>Walk dog</li>
6</ul>

JavaScript of this:

1const todos = document.getElementById("todos");
2
3while (todos.hasChildNodes()) {
4  todos.removeChild(todos.children[0]);
5}

Creating DOM Elements

If you want to create DOM elements you can do that with document.createElement("p") where p can be any valid HTML tag to get an element of that type.

You can then set its inner text by creating a text node and setting it as it's child.

1const listItem = document.createElement("li");
2
3const content = document.createTextNode("Clean kitchen");
4
5listItem.appendChild(content);

You can then add those elements to any element in the DOM by getting that element with const todos = document.getElementById("id of the one you want"); and then using appendChild() like this:

1const todoList = ["Clean kitchen", "Walk dog", "Watch TV", "Plan next project"];
2
3const todos = document.getElementById("todos");
4
5todoList.forEach((todoItem) => {
6  const listItem = document.createElement("li");
7  const content = document.createTextNode(todoItem);
8  listItem.appendChild(content);
9  todos.appendChild(listItem);
10});

Changing DOM Elements

If you want to change the contents of an element, such as the text you can do that by getting the element with .getElementById and then setting the innerText, like this:

1const isLoggedIn = true;
2const name = "Simon";
3
4if (isLoggedIn) {
5  const welcomeDiv = document.getElementById("welcome-message");
6  welcomeDiv.innerText = `Welcome back ${name}`;
7}

Styling DOM Elements

Perhaps one of the most satisfying parts of DOM manipulation, is changing how things look with JavaScript and CSS.

For example we can add and remove CSS classes with .classList.add("class-name") and .classList.remove("class-name").

You can also access CSS style properties directly with the .style property.

JavaScript object keys can't have a - in them so every CSS style that has a - in it will be transformed to camelCase. So font-size becomes fontSize and margin-left becomes marginLeft etc.

So you can write code like this:

1const heading = document.getElementById("main-heading");
2
3heading.style.fontSize = "70px";
4heading.style.padding = "20px";