How to Manipulate the DOM with Vanilla JavaScript (Beginner-friendly)

Hey friends!

It's another mini-tutorial Wednesday, and today we’re going back to basics: DOM manipulation.

---

Ever wondered how websites can add text, hide things or react when you click a button? That’s all the DOM (Document Object Model), and with just a bit of JavaScript, you can control it all.

If you already have an idea of the DOM but want a simplified version? Then keep reading...

---

Here are some simple yet effective ways to work with the **DOM.**

1. Selecting Elements

Before you can manipulate anything, you need to get it from the page, HTML.

// By ID
const title = document.getElementById('title');

// CSS-style selector (works for any class, tag, etc.)
const card = document.querySelector('.card');

2. Changing Text and HTML

Once you’ve selected an element, you can change its contents.

title.textContent = "Updated text!"; // replaces text
title.innerHTML = "<em>Italic text</em>"; // adds HTML tags

Use textContent if you’re just changing plain text, and innerHTML if you want to include tags.

3. Changing Styles Dynamically

You can directly change styles in JS like this:

title.style.color = "blue";
title.style.backgroundColor = "#f0f0f0";

Or better: use classes and just toggle them.

4. Adding and Removing Classes

title.classList.add("highlight");
title.classList.remove("highlight");
title.classList.toggle("highlight"); // adds if not present, removes if present

This keeps your styling inside CSS, not your JS.

5. Handling Events

You can make things interactive by listening to clicks, hovers, etc.

const button = document.getElementById('change-text-btn');

button.addEventListener('click', () => {
  title.textContent = "You clicked the button!";
});

It’s simple really and as you manipulate the DOM constantly while building projects, you slowly get the hang of it and become more confident in handling the DOM.

Try It Yourself

If you want to test and practice with the DOM, I created a mini CodePen where you can:

• Click buttons to change text and toggle styles
• Fork and try your own selectors or ideas

👉 Open the DOM Playground on CodePen

Over to You

Still with me? Good :)

I'd like to see how you manipulate the DOM in building cool stuff! Connect with me on GitHub

Was this tutorial helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

---

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

✍🏾 I’m documenting my learning loudly every Wednesday. Follow along if you're learning JavaScript too!
Let’s keep learning together!