Jump to content

Introduction to the DOM (Document Object Model)

Jessica Brown
in Scripting

Featured Replies

Posted

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:

  1. Document Node – Represents the entire document (document object in JavaScript).

  2. Element Nodes – HTML elements like <div>, <p>, <h1>.

  3. Attribute Nodes – Attributes inside elements like id, class.

  4. 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]

  • Views 176
  • Created
  • Last Reply

Create an account or sign in to comment

https://codenamejessica.com/forums/topic/220-introduction-to-the-dom-document-object-model/
Go to topic listing

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.