← Back to Chapters

JavaScript DOM Introduction

? JavaScript DOM Introduction

⚡ Quick Overview

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page as a tree of objects so that JavaScript can dynamically change the document’s structure, style, and content without reloading the page.

? Key Concepts

  • DOM as a Tree: The browser converts HTML into a tree of nodes.
  • JavaScript + DOM: The document object lets you read and modify that tree.
  • Dynamic Updates: You can change text, attributes, styles, and even add/remove elements.
  • Element Nodes: Represent HTML elements like <div>, <p>, <h1>.
  • Text Nodes: Represent the text content inside elements.
  • Attribute Nodes: Represent element attributes like id, class, src.
  • Comment Nodes: Represent HTML comments.

? Syntax and Theory

The DOM is exposed to JavaScript through the global document object. You use its methods to find and work with elements:

  • document.getElementById("id") – select a single element by its id.
  • document.getElementsByClassName("class") – get a live HTMLCollection of elements.
  • document.getElementsByTagName("tag") – get all elements with a given tag name.
  • document.querySelector("selector") – get the first element matching a CSS selector.
  • document.querySelectorAll("selector") – get a static NodeList of all matches.

Each DOM node has useful properties and methods, for example:

  • node.nodeName – the name of the node (like DIV).
  • node.nodeType – the type of node (1 = element, 3 = text, etc.).
  • node.childNodes – a list of a node’s children.
  • node.firstChild – the first child node.
  • element.textContent – the text inside an element.

? Code Examples

? Accessing DOM Elements

Use different DOM methods to select elements by id, class, or tag name:

? View Code Example 
// Access element by ID
const heading = document.getElementById("myHeading");
console.log(heading.textContent);
// Access elements by class name
const items = document.getElementsByClassName("list-item");
console.log(items.length);
// Access elements by tag name
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs[0].textContent);

? Inspecting DOM Nodes

Every element node exposes properties that describe its type and children:

? View Code Example 
const element = document.querySelector("div");
console.log(element.nodeName);      // DIV
console.log(element.nodeType);      // 1 (Element Node)
console.log(element.childNodes);    // NodeList of child nodes
console.log(element.firstChild);    // First child node (could be text or element)

✏️ Changing Text Content

You can change the text inside an element using textContent:

? View Code Example 
<h2 id="title">Old Title</h2>
<script>
const title = document.getElementById("title");
title.textContent = "New Title";
</script>

? Use Cases / When to Use the DOM

  • Building interactive UI components (tabs, modals, dropdowns).
  • Dynamically updating content (scores, notifications, live data).
  • Form validation and error messages.
  • Adding/removing elements based on user actions.

?️ Interactive Example

Click the button to see how JavaScript updates the DOM without reloading the page.

? Live Demo Area

This text was set when the page loaded.

? Live Output / Explanation

What happens in the console and on the page?

  • In the access example, the selected elements are logged to the browser console. You can see their text and count how many were found.
  • In the inspect example, nodeName and nodeType show what kind of node you selected, and childNodes reveals the node’s children.
  • In the change text example, the heading’s content on the page changes from “Old Title” to “New Title” as soon as the script runs.
  • In the interactive demo above, clicking the button updates the paragraph’s textContent, showing how the DOM lets you react to user actions.

? Tips & Best Practices

  • Use document.getElementById() for selecting a single, unique element by its ID.
  • Use document.querySelector() and document.querySelectorAll() for flexible CSS selector queries.
  • Remember that DOM nodes are live objects — changes through JavaScript are immediately reflected on the page.
  • Avoid excessive DOM manipulation in loops; batch changes or use fragments for better performance.
  • Prefer textContent when inserting plain text to avoid security issues with HTML injection.

? Practice Tasks

  • Create a page with multiple headings and paragraphs, then use JavaScript to change their content using textContent.
  • Use getElementById, getElementsByClassName, and querySelector to select different elements and log them in the console.
  • Inspect node types and properties in the browser console using nodeName, nodeType, and childNodes.
  • Add a button that appends a new list item to an existing <ul> using DOM methods like createElement and appendChild.