DOM Manipulation Explained Like You're Five (With Real Examples) | TechWithTwin

DOM Manipulation explained

A few years ago, I came across this weird-looking phrase: document.getElementById() I first heard it from one of our technical mentors. Honestly, I didn’t understand what it was. I thought it was one long magic spell like: documentGetElementById 🤣🤣🤣 I did not know it was a function. I just copied it and hoped it would work. 😪 If that sounds like you, don’t worry. You are in the right place. In this article, I’ll explain what the DOM is, how JavaScript talks to it, and how you can use it to make websites interactive

Table of Contents:

1. What is the DOM?
2. How to select elements from the DOM.
3. What can you do with DOM elements?
4. Creating and removing elements dynamically.
5. Modifying attributes with JavaScript, like href , src , id e.t.c.
6. Styling elements with JavaScript.
7. Making websites interactive: Event handling.
8. Conclusion.

What Exactly is the DOM?

The DOM stands for Document Object Model.

Think of it as a map or blueprint of your webpage. Every element, such as headings, paragraphs, buttons and images, becomes a JavaScript object your browser creates behind the scenes.

When you write HTML like this:

<h1>Hello World</h1>
<button>Click Me</button>

The browser creates an internal tree structure like:

With this, JavaScript can talk to any element in this tree, and perform manipulations, e.g, removing an element, modifying an element, e.t.c.

2. How to Select Elements from the DOM?

Imagine you are a principal of a certain school and you want to punish a certain notorious student, what would be the first thing you would do?

I hope you said, “Identify the student and go get them from their class”

The first action is identifying or selecting the element and then performing an action. You can't act on an element you don't know about. Okay?

We have different ways to select elements, and they include:

• By ID:

document.getElementById("myId")

An ID is an attribute — (an attribute is like a characteristic added to an element, e.g <button id=’myButton’>Click</button> ).

NB: An ID is a unique identifier so you can’t use it in more than one element.

• By Class Name:

document.getElementByClassName('myClass')

A class is also an element attribute, which helps identify one or more elements. It can be added to many elements.

• By Tag Name:

document.getElementByTagName('button')

This is a less common method because it selects all elements of the given tag, making it inaccurate.

Use it only when you want to change the behaviour of all elements with a specific tag.

• Modern Way (CSS selectors)

document.querySelector('.myClass');
document.querySelector('button');

This new way uses the above two methods.

NB: To capture an element by its class, we use the .myClass ( dot ). To capture by ID #myId (has), we use the hashtag. For the tag, we don’t use any prefix. As a rule of thumb use querySelector with an id,or a class and querySelectorAll to select all elements matching the class or the tag.

3. What can you do with DOM elements?

What can you do with the element after selecting an element or multiple elements?

Once you have a reference to an element, you can:

• Change its content.
• Change styles.
• Add or remove attributes.
• Respond to user actions like clicks.

For example, changing text:

const title = document.getElementById('heading');
title.textContent = 'Hello from JavaScript';

4. Creating and Removing Elements Dynamically.

• Creating Elements.

const newDiv = document.createElement("div");
newDiv.textContent = "I am a new div!";
document.body.appendChild(newDiv);

• Remove Elements:

const element = document.getElementById('heading');
element.remove();

The createElement is used heavily in React since React uses JavaScript to create the HTML.

5. Modifying Attributes (Like href, src, and id)

An attribute is like a characteristic of an element.

For example, changing an image source:

const img = document.querySelector('img');
img.setAttribute('src','https://randomfox.ca/images/83.jpg')

Or changing a link:

const link = document.querySelector('a');
link.setAttribute('href','https://TechWithTwin.com');

6. Styling Elements with JavaScript.

Inline styles can be modified directly:

const button = document.querySelector('button');
button.style.backgroundColor = 'red';
buton.style.color = 'white';

In real-world apps, it's better to toggle CSS classes instead:

button.classList.add('active');
button.classList.remove('disabled');

7. Making websites interactive: Event handling.

Often on our websites, we need to act on a user's action.

These actions include:

• Double-clicking.
• Clicking.
• Drag and element.
• Key down.

To achieve this, we add something called event listeners . Think of it as listening to an event as soon as it happens, then acting.

Similarly, you would be on a racetrack waiting for the GO! Shot, and at that moment, we can say you had an event listener for the clap and responded by starting to run! 🤪🤪

Example: handling a button click:

const button = document.querySelector('button');

button.addEventListener('click',()=>{
  alert('Button clicked!');
})

You can handle many events, including:

• click
• blur
• focus
• submit

For more events, check out the w3schools JavaScript events reference **here**

8. Conclusion

When I first saw document.getElementById() I had no clue what was going on.

Now you know it's not magic, it's how JavaScript talks to the webpage.

If you grasp these DOM basics, you unlock the power to build interactive websites, games, forms, or whatever your creative mind can imagine.

If this helped you, consider sharing it! Got any questions? Hit the comment section below.

Follow TechWithTwin for more content:

[embed]TechWithTwin | Top Software Consultant in Kenya Discover TechWithTwin, Kenya's leading software and digital marketing consultant. I specialize in web development, SEO…techwithtwin.com

[embed]TechWithTwin Techwithtwinyoutube.com

https://x.com/techwithtwin