Skip to main content

Session 4

JavaScript HTML DOM

The Document Object Model (DOM) is a W3C-standard, language-independent interface that allows programs and scripts to dynamically access, modify, add, or remove the content, structure, and style of a web document. While the W3C DOM is categorized into Core DOM (all document types), XML DOM, and HTML DOM, this session focuses specifically on the HTML DOM, which is the standard model for HTML documents.

When a browser loads an HTML page, it automatically parses the markup and constructs a hierarchical DOM tree. This tree represents the document's structure through parent-child node relationships, where:

  • The entire document is a document node
  • Every HTML tag is an element node
  • Text inside elements is a text node
  • HTML comments are comment nodes

The HTML DOM bridges static HTML with dynamic JavaScript by treating every element, attribute, and piece of content as a JavaScript object. This object-oriented representation enables developers to:

  • ✅ Access or locate any element using IDs, tag names, or class names
  • ✅ Modify element content (innerHTML), attributes, and CSS styles on-the-fly
  • ✅ Dynamically create, append, or remove HTML elements
  • ✅ React to user interactions through DOM events (clicks, inputs, loads, etc.)

By leveraging the HTML DOM, you can transform static web pages into highly interactive, real-time applications without requiring page reloads. This session introduces the core DOM programming interface, node navigation techniques, and practical methods for manipulating HTML content and styles using JavaScript.

Objective

After completing this session one should be able to:

  • Add, Modify or delete the existing content of HTML elements.
  • Modify a CSS style in the HTML page.
  • React to existing HTML DOM events in page.

DOM Tree (Node Types)

When a browser parses HTML, it builds a node tree:

Node Type Description Example
document Root node of the entire page document
element HTML tags <div>, <p>, <img>
text Content inside elements "Hello World" inside <p>
attribute Element attributes (treated as nodes in legacy DOM) id="btn", src="img.jpg"
comment HTML comments <!-- hidden -->

Parent-Child-Sibling Relationships

  • <html> → parent of <head> & <body>
  • <body> → parent of <h1> & <p>
  • <h1> & <p> → siblings

Accessing Elements (DOM Methods)

Method Returns Best For
document.getElementById("id") Single element Fastest & most reliable
document.getElementsByClassName("class") HTMLCollection (Live) Multiple elements sharing a class
document.getElementsByTagName("tag") HTMLCollection (Live) All elements of a specific tag
document.querySelector("selector") First matching element Modern, CSS-like selectors
document.querySelectorAll("selector") NodeList (static) All matching elements

Modifying Element

Content

		element.innerHTML = "<b>New HTML</b>";   // Parses HTML (risk of XSS if user input)
element.textContent = "Plain text only";  // Safer, faster, ignores HTML tags
element.innerText = "Visible text only";  // Respects CSS styling (e.g., hidden elements)

Attributes

		// Direct property (works for standard attributes)
img.src = "new.jpg";
link.href = "https://example.com";
 
// Universal method (works for custom/data attributes)
element.setAttribute("data-role", "admin");
let val = element.getAttribute("data-role");

Styles

		// JS uses camelCase for multi-word CSS properties
element.style.backgroundColor = "lightblue";
element.style.fontSize = "18px";
element.style.marginLeft = "20px";

Create & Append Element

		let newP = document.createElement("p");          // <p></p>
let txt = document.createTextNode("Hello DOM");  // "Hello DOM"
newP.appendChild(txt);                           // <p>Hello DOM</p>
document.body.appendChild(newP);                 // Adds to end of <body>

Insert at Specific Position

		let parent = document.getElementById("container");
let reference = document.getElementById("refItem");
parent.insertBefore(newP, reference); // Inserts newP before reference

Remove Elements

		// Modern (recommended)
element.remove(); 
 
// Legacy (manual's syntax)
parent.removeChild(childElement);

Question 1

Problem Statement

Design an HTML page using JavaScript as shown below. When Try button is pressed, the Full Name should be shown below the Try button.
(Hint: Use concatenation to get Full Name).
(Please refer to images in lab manual)

Preview (Working)

Ex 1: Concatenate Full Name

Code

button-on-click.html
		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Session 4: JavaScript DOM Exercises</title>
        <style>
            body {
                font-family: "Segoe UI", sans-serif;
                margin: 20px;
                background: #f4f4f4;
            }
            .exercise {
                background: #fff;
                padding: 20px;
                margin-bottom: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            input,
            button {
                padding: 8px 12px;
                margin: 5px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            button {
                cursor: pointer;
                background: #0056b3;
                color: #fff;
                border: none;
            }
            button:hover {
                background: #003d82;
            }
            img {
                border: 2px solid #333;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <h1 style="text-align: center">
            Session 4: JavaScript HTML DOM Exercises
        </h1>
        <div class="exercise">
            <h2>Ex 1: Concatenate Full Name</h2>
            <input type="text" id="fname" placeholder="First Name" />
            <input type="text" id="lname" placeholder="Last Name" />
            <button id="btnTry">Try</button>
            <p
                id="fullNameOutput"
                style="font-weight: bold; margin-top: 10px"
            ></p>
        </div>
 
        <script>
            // DOM Access + innerHTML + Concatenation
            document.getElementById("btnTry").onclick = function () {
                const fn = document.getElementById("fname").value;
                const ln = document.getElementById("lname").value;
                document.getElementById("fullNameOutput").innerHTML =
                    `Full Name: ${fn} ${ln}`;
            };
        </script>
    </body>
</html>

Question 2

Problem Statement

Modify the below snippet of the code to change the src attribute of the image element to "pqr.jpg" using HTML DOM.

		<img id="pic" src="old.jpg">
<script>
//Write your code here.
</script>

Preview (Working)

Ex 2: Change Image `src`

Dynamic changing

Code

image-change.html
		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Session 4: JavaScript DOM Exercises</title>
        <style>
            body {
                font-family: "Segoe UI", sans-serif;
                margin: 20px;
                background: #f4f4f4;
            }
            .exercise {
                background: #fff;
                padding: 20px;
                margin-bottom: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            input,
            button {
                padding: 8px 12px;
                margin: 5px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            button {
                cursor: pointer;
                background: #0056b3;
                color: #fff;
                border: none;
            }
            button:hover {
                background: #003d82;
            }
            img {
                border: 2px solid #333;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <h1 style="text-align: center">
            Session 4: JavaScript HTML DOM Exercises
        </h1>
 
        <div class="exercise">
            <h2>Ex 2: Change Image `src` Attribute</h2>
            <img
                id="pic"
                src="https://placehold.co/150x100/0000FF/FFFFFF?text=old.jpg"
                alt="Original Image"
            /><br />
            <button id="btnChangeImg">Change to opr.jpg</button>
        </div>
 
        <script>
            document.getElementById("btnChangeImg").onclick = function () {
                document.getElementById("pic").src =
                    "https://placehold.co/150x100/FF0000/FFFFFF?text=pqr.jpg";
            };
        </script>
    </body>
</html>

Question 3

Problem Statement

Write the JavaScript code to change the color of the HTML element h2 to green, on click the change color button.

Preview (Working)

Ex 3: Change H2 Color

Click button to change my color

Code

color-change.html
		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Session 4: JavaScript DOM Exercises</title>
        <style>
            body {
                font-family: "Segoe UI", sans-serif;
                margin: 20px;
                background: #f4f4f4;
            }
            .exercise {
                background: #fff;
                padding: 20px;
                margin-bottom: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            input,
            button {
                padding: 8px 12px;
                margin: 5px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            button {
                cursor: pointer;
                background: #0056b3;
                color: #fff;
                border: none;
            }
            button:hover {
                background: #003d82;
            }
            img {
                border: 2px solid #333;
                border-radius: 4px;
            }
        </style>
    </head>
    <body>
        <h1 style="text-align: center">
            Session 4: JavaScript HTML DOM Exercises
        </h1>
        <div class="exercise">
            <h2>Ex 3: Change H2 Color</h2>
            <h2 id="heading1" style="color: red">
                This heading will turn green
            </h2>
            <button id="btnChangeColor">Change Color</button>
        </div>
 
        <script>
            document.getElementById("btnChangeColor").onclick = function () {
                document.getElementById("heading1").style.color = "green";
            };
        </script>
    </body>
</html>

Session 3

Cascading Styling Sheet (CSS)

Session 5

JavaScript HTML DOM Events and Event Listener