blogging

DOM Manipulation using Javascript : Part 1

Ankeet Chamlagain
by Ankeet Chamlagain January 04, 2025

 Introduction to DOM : Part 1

Learn how to interact with HTML elements dynamically using JavaScript and the DOM.

In the world of web development, DOM manipulation is a powerful concept that allows you to change the structure, content, and style of a webpage dynamically. The Document Object Model (DOM) represents the structure of a webpage as a tree of nodes, and JavaScript can be used to interact with these nodes. By manipulating the DOM, you can create dynamic and interactive websites.

In this post, we will dive into HTML DOM manipulation using JavaScript, explore its importance, and demonstrate common use cases with examples.

What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can manipulate the structure, style, and content of a web page. The DOM is essentially a tree structure where each node represents a part of the page (such as an element, attribute, or text).

For example, the DOM for a simple HTML page like this:


<!DOCTYPE html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a simple webpage.</p>
  </body>
</html>

Would have a structure like this:

  • html
    • head
      • title
    • body
      • h1
      • p


Why is DOM Manipulation Important?

DOM manipulation allows you to dynamically interact with your webpage. Here's why it's important:

  • Interactivity: You can create interactive elements like forms, buttons, and dropdowns that respond to user actions (e.g., clicks, key presses).
  • Dynamic content: You can change the content of your webpage without reloading it, improving the user experience.
  • Real-time updates: You can update parts of your webpage in real-time, such as displaying live data or messages.
  • Improved user experience: A dynamically interactive page feels more responsive and engaging for the user.

Example: Basic DOM Manipulation:

Let's dive into a simple example where we'll dynamically update the content of an HTML element using JavaScript.
Here is the HTML:
<!DOCTYPE html>
<head>
    <title>DOM Manipulation Example</title>
</head>
<body>
    <h1>Welcome to DOM Manipulation!</h1>
    <p id="intro">Click the button to change this text.</p>
</body>

<script>
    function changeText() {
      document.getElementById("intro").innerText = "The text has been changed!";
    }
</script>

</html>

How it works:

  1. We have an HTML page with a heading <h1>, a paragraph <p>, and a button.
  2. The button has an onclick attribute that calls the changeText() function when clicked.
  3. Inside the JavaScript function changeText(), we use document.getElementById("intro") to find the <p> element with the id "intro".
  4. We then change the content of this paragraph by modifying its innerText.

Result:

When the user clicks the button, the text of the paragraph will change to "The text has been changed!" dynamically.

Common DOM Manipulation Methods:

Here are some commonly used JavaScript methods for interacting with the DOM:
  • getElementById(id): Retrieves an element by its id attribute.
  • getElementsByClassName(className): Retrieves all elements with a given class name.
  • getElementsByTagName(tagName): Retrieves all elements with a given tag name.
  • querySelector(selector): Retrieves the first element that matches a CSS selector.
  • querySelectorAll(selector): Retrieves all elements that match a CSS selector.
  • createElement(tagName): Creates a new element.
  • appendChild(childNode): Adds a new child element to an existing element.
  • setAttribute(attribute, value): Changes an attribute value of an element (e.g., src, href, class).

Conclusion:

DOM manipulation is an essential skill for web developers, enabling you to dynamically update and interact with HTML elements. From simple changes like updating text to complex tasks like creating new elements or handling user events, the DOM allows you to make your webpages more interactive and engaging.

In this post, we've covered the basics of what the DOM is and how you can manipulate it with JavaScript. We also provided a simple example to illustrate how you can change content dynamically using the DOM.

In the next part of this series, we will explore more advanced DOM manipulation techniques, such as event handling and animations. Stay tuned!

Key Takeaways:

  • The DOM is a tree structure representing the page, and JavaScript can be used to manipulate it.
  • DOM manipulation allows you to dynamically update content, style, and structure of a webpage.
  • Basic methods like getElementById(), querySelector(), and createElement() can be used to interact with elements on a page.

By learning DOM manipulation, you unlock the ability to create highly dynamic and responsive websites.


Created by Ankeet Chamlagain - All rights reserved.

Ankeet Chamlagain

Posted by Ankeet Chamlagain

Post a Comment

0 Comments