JavaScript Tutorial – Day 11: DOM in JavaScript (Selecting and Modifying Elements)
3 mins read

JavaScript Tutorial – Day 11: DOM in JavaScript (Selecting and Modifying Elements)

In this JavaScript tutorial, we will explore one of the most powerful concepts — the DOM in JavaScript. The DOM (Document Object Model) allows JavaScript to interact with the content of a webpage, making it dynamic and interactive. Without DOM, JavaScript would only be about calculations and logic, but with DOM, it breathes life into your website.

By the end of this blog, you’ll understand:

  • What DOM is in JavaScript
  • How to select HTML elements using JavaScript
  • How to modify content, attributes, and styles dynamically

What is DOM in JavaScript?

The Document Object Model (DOM) is a structured representation of your webpage. When a web page is loaded, the browser creates a DOM tree of objects that JavaScript can access and manipulate.

Think of the DOM as a bridge between JavaScript and HTML/CSS.

For example:

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <h1 id="title">Hello World</h1>
</body>
</html>

JavaScript can grab the <h1> element using the DOM and change its content:

document.getElementById("title").innerText = "Welcome to DOM Tutorial!";

Now, instead of showing “Hello World”, your page will show “Welcome to DOM Tutorial!”.


Selecting Elements in DOM

JavaScript provides different ways to select elements:

1. getElementById()

Selects an element by its id.

let heading = document.getElementById("title");

2. getElementsByClassName()

Selects all elements with a given class (returns a collection).

let items = document.getElementsByClassName("list-item");

3. getElementsByTagName()

Selects elements by their tag (like div, p, li).

let paragraphs = document.getElementsByTagName("p");

4. querySelector()

Selects the first element that matches a CSS selector.

let firstItem = document.querySelector(".list-item");

5. querySelectorAll()

Selects all elements that match a CSS selector.

let allItems = document.querySelectorAll(".list-item");

Modifying Elements in DOM

Once you select an element, you can modify it.

1. Change Text Content

document.getElementById("title").innerText = "Changed Heading!";

2. Change HTML Content

document.getElementById("title").innerHTML = "<span style='color:red'>Red Heading</span>";

3. Change Attributes

document.querySelector("img").setAttribute("src", "new-image.png");

4. Change Styles

document.getElementById("title").style.color = "blue";
document.getElementById("title").style.fontSize = "30px";

Example: Simple DOM Manipulation

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <h1 id="title">Original Text</h1>
  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      let heading = document.getElementById("title");
      heading.innerText = "You clicked the button!";
      heading.style.color = "green";
    }
  </script>
</body>
</html>

👉 When you click the button, the heading text and color will change dynamically.


Why is DOM Important?

  • Makes websites interactive (buttons, forms, popups, sliders).
  • Allows dynamic content updates without reloading the page.
  • Forms the base for modern frameworks like React, Vue, Angular, which all manipulate DOM behind the scenes.

External Resource

👉 Learn more about DOM at the official MDN Web Docs.


Conclusion

In this JavaScript tutorial, we explored the DOM in JavaScript, how to select elements, and how to modify them. DOM is the backbone of modern web interactivity, and mastering it will help you build real-world applications.

In the next blog, we’ll dive into JavaScript DOM Events to make our pages even more interactive.

Leave a Reply

Your email address will not be published. Required fields are marked *