Next ❯

DOM Manipulation

  • This lesson explains how JavaScript interacts with and modifies the DOM.

  • Introduction to DOM Manipulation

    Modern websites are not static.
    They respond to user actions such as:

    • Clicking buttons

    • Typing in input fields

    • Submitting forms

    • Loading data dynamically

    To achieve this interaction, JavaScript needs a way to access and control HTML elements.
    This is where the DOM (Document Object Model) comes in.

    What is DOM ?

    DOM stands for Document Object Model.

    Simple Definition:

    The DOM is a programming interface that represents an HTML document as a tree structure, allowing JavaScript to access, modify, add, or remove elements dynamically.

    Formal Definition

    The Document Object Model (DOM) is a structured representation of an HTML document where each element is treated as an object that can be manipulated using JavaScript.

    Why Do We Need the DOM ?

    HTML and CSS alone cannot:

    • Respond to user actions

    • Change content dynamically

    • Update styles based on logic

    DOM allows JavaScript to:

    • Read HTML elements

    • Modify text and attributes

    • Change CSS styles

    • Add or remove elements

    • React to events

      Relationship Between HTML, CSS, JavaScript, and DOM

      TechnologyRole
      HTMLStructure of the page
      CSSStyling and layoutJavaScript
      JavaScriptLogic and behavior
      DOMBridge between HTML and JavaScript

      JavaScript uses the DOM to control HTML and CSS.

      How the DOM Works

      When a web page loads:

      1. Browser reads HTML

      2. Browser creates a DOM tree

      3. Each HTML tag becomes a node

      4. JavaScript can access these nodes

    Understanding DOM Tree Structure

    Represents an HTML document as a hierarchical tree of nodes 

    <!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>

    • DOM Structure:

      • Document

        • html

          • head

            • title

          • body

            • h1

            • p

      This tree structure helps JavaScript navigate elements easily.

      Types of DOM Nodes

      There are different types of nodes in the DOM:

      1. Document Node

        • Represents the entire HTML document

      2. Element Node

        • Represents HTML elements like <div>, <p>, <h1>

      3. Text Node

        • Represents text inside elements

      4. Attribute Node

        • Represents attributes like id, class, src

        The document Object

        In JavaScript, the entire DOM is accessed using the document object.

        Example:

        console.log(document);

        The document object provides methods to:

        • Select elements

        • Create elements

        • Modify content

        • Attach events

          Accessing Elements Through DOM

          JavaScript can select HTML elements using DOM methods.

        Selecting HTML Elements Using DOM Methods

        Demonstrates how JavaScript accesses elements using different DOM selectors 

        // Select by ID
document.getElementById("title");

// Select by class name
document.getElementsByClassName("box");

// Select by tag name
document.getElementsByTagName("p");

        • These methods allow JavaScript to interact with the page.

          What Can We Do Using DOM ?

          Using DOM manipulation, we can:

          • Change text content

        Basic DOM Manipulation

        Shows how to change content and styles of HTML elements 

        // Change text content
document.getElementById("demo").innerHTML = "Hello DOM";

// Change style
document.getElementById("demo").style.color = "red";

          • Add new elements

          • Remove existing elements

          • Respond to events like clicks and key presses

          DOM is Dynamic

        Dynamic Updates Using DOM

        Demonstrates how DOM allows real-time changes without page reload 

        // Change background color instantly
document.body.style.backgroundColor = "lightblue";

        • DOM and Browser Environment

          The DOM is:

          • Provided by the browser

          • Not part of core JavaScript

          • Available only in browser-based JavaScript

          Node.js does not have DOM by default.

          Common Confusions

          • DOM is not HTML

          • DOM is not JavaScript

          • DOM is an interface that connects HTML and JavaScript

          • Changing DOM changes the webpage instantly

          Best Practices for DOM Usage

          • Access elements after page load

          • Use meaningful IDs and classes

          • Avoid excessive DOM manipulation

          • Keep JavaScript logic separate from HTML

          • Use DOM efficiently for performance

          Analogy

          Think of:

          • HTML as a building

          • DOM as a map of the building

          • JavaScript as a person using the map to control lights, doors, and rooms

        Next ❯