16.1 Introduction to DOM (15 mins)

What is the DOM (Document Object Model)?
- Definition: The Document Object Model (DOM) is a programming interface that represents the structure of an HTML or XML document as a tree of objects. Each element in the HTML is represented as an object in the DOM, and JavaScript can interact with these objects to manipulate the page dynamically.
- The HTML-to-DOM Connection:
  - HTML is static, but JavaScript can interact with HTML via the DOM to make web pages dynamic, such as changing text, styles, or structure after the page has loaded.
- Tree Structure: The DOM represents the document as a hierarchical tree, where the document itself is the root, and the HTML elements (tags like <div>, <p>, <h1>, etc.) are the branches.

Example:

Given the following HTML structure:

<html>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The DOM represents this as:
- html
  - body
    h1 (with text content "Welcome to My Website")
    p (with text content "This is a paragraph.")

Why is the DOM Important?
- Dynamic Web Pages: The DOM allows JavaScript to dynamically update the content, structure, and styling of a web page.
- Interactivity: Through the DOM, JavaScript can react to user inputs like clicks, keypresses, and form submissions.
- Manipulation: You can add, remove, or modify elements and their attributes or styles via the DOM, making web pages responsive to user actions.
Basic DOM Manipulation in JavaScript:
- JavaScript can be used to access and manipulate DOM elements using various methods and properties.
- Accessing DOM Elements:
  - document.getElementById(): Access an element by its id.
  - document.querySelector(): Select the first element that matches a CSS selector.
  Example:
  <h1 id="title">Hello, World!</h1> <script> let heading = document.getElementById("title"); console.log(heading); // Outputs: <h1 id="title">Hello, World!</h1> </script>
- Modifying DOM Elements:
  - Changing Text: Use .innerText or .textContent to modify the text inside an element.
  - Example:
    heading.innerText = "Welcome to the DOM!"; // Changes the <h1> text to "Welcome to the DOM!"

DOM Tree Example:

Visualizing the DOM tree:

<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>
      <p>Hello, World!</p>
    </div>
  </body>
</html>

In the DOM, this would be represented as:
- html
  - head
    title ("Document")
  - body
    div
    p ("Hello, World!")

Student Activity (15 mins):

Objective: Students will explore the DOM by selecting and modifying HTML elements using JavaScript.

Step-by-Step Activity:

Create an HTML file (e.g., dom_intro.html) and write JavaScript code to manipulate the DOM elements.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Introduction to DOM</title>
</head>
<body>
  <h1 id="heading">Hello, World!</h1>
  <p id="paragraph">This is a paragraph.</p>
  <button id="changeTextButton">Change Text</button>

  <script>
    // Access DOM elements using getElementById
    let heading = document.getElementById("heading");
    let paragraph = document.getElementById("paragraph");

    // Change the content of the heading
    heading.innerText = "Welcome to the DOM!";

    // Add an event listener to the button to change the paragraph text
    let button = document.getElementById("changeTextButton");
    button.addEventListener("click", function() {
      paragraph.innerText = "The paragraph text has been changed!";
    });
  </script>
</body>
</html>

Run the file in a browser:
- Open the HTML file in a browser and observe how the heading text changes immediately, and how clicking the button changes the paragraph text.

Explanation of the Code:

Accessing Elements: The script uses document.getElementById() to access the <h1>, <p>, and <button> elements.
Modifying Elements: The innerText property is used to change the content of the <h1> and <p> elements.
Event Handling: An event listener is added to the button, so when it is clicked, the paragraph text changes dynamically.

Challenge:

Modify the DOM Interactively:

Create a new button that changes the color of the heading text when clicked.

Example:

let changeColorButton = document.createElement("button");
changeColorButton.innerText = "Change Heading Color";
document.body.appendChild(changeColorButton);

changeColorButton.addEventListener("click", function() {
  heading.style.color = "blue";
  paragraph.style.color = "red";
  changeColorButton.style.color = "yellow";

});

Activity Follow-up Questions:

What is the DOM, and how does it relate to the structure of an HTML page?
How does JavaScript use the DOM to manipulate HTML elements?
Can you think of a scenario where dynamically changing the content or style of a webpage might be useful?

Expected Outcome:

Students will:

Understand what the DOM is and how it represents HTML elements in JavaScript.
Practice selecting and manipulating DOM elements using JavaScript methods like getElementById().
Explore how dynamic web pages work by interacting with the DOM to change content and respond to user input (e.g., clicking buttons).

PreviousLecture_16_DOM Manipulation Next16.2 DOM Selection Methods (20 mins)

Last updated 1 year ago