Introduction to the DOM (Document Object Model)

Posted January 23Jan 23

You are reading Part 8 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 2]

What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree of objects, allowing JavaScript to interact with and manipulate the content dynamically.

When a web page is loaded, the browser parses the HTML and constructs the DOM, enabling scripts to read, modify, and respond to user interactions.

The DOM is the bridge between HTML and JavaScript, enabling dynamic content manipulation and interactivity. Understanding its structure and how to navigate, access, and modify it is fundamental for web development. By mastering DOM manipulation, developers can create interactive and dynamic web applications.

The Structure of an HTML Document

An HTML document follows a hierarchical structure, where elements are nested inside each other, forming a tree-like representation.

Example HTML Document:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1>Welcome to the DOM</h1>
    <p>This is a sample paragraph.</p>
</body>
</html>

Corresponding DOM Representation:

Document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── p

Each HTML element is a node in the DOM tree, and they can be accessed, modified, or removed using JavaScript.

Types of DOM Nodes

The DOM consists of different types of nodes:

Document Node – Represents the entire document (document object in JavaScript).
Element Nodes – HTML elements like <div>, <p>, <h1>.
Attribute Nodes – Attributes inside elements like id, class.
Text Nodes – The text content within elements.

Example:

<p id="message">Hello, World!</p>

The DOM breakdown:

Element Node: <p>
├── Attribute Node: id = "message"
└── Text Node: "Hello, World!"

Accessing the DOM in JavaScript

JavaScript provides several methods to access DOM elements:

Using document.getElementById()

let heading = document.getElementById("message");
console.log(heading.textContent); // Outputs: Hello, World!

Using document.querySelector()

let paragraph = document.querySelector("p");
console.log(paragraph.innerHTML);

Using document.getElementsByClassName()

let items = document.getElementsByClassName("item");
console.log(items[0].textContent);

Modifying the DOM

JavaScript allows dynamic changes to the DOM structure and content.

Changing Content

document.getElementById("message").textContent = "DOM Manipulation!";

Changing Attributes

document.getElementById("message").setAttribute("class", "highlight");

Creating and Appending Elements

let newElement = document.createElement("div");
newElement.textContent = "New Element Added!";
document.body.appendChild(newElement);

You are reading Part 8 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 2]

Quote

Sign In