JS DOM

Think of a family tree diagram, every person connects to their parents, children, and siblings in a clear, branching structure, and you can trace a path from any one person to any other through that tree. The DOM, or Document Object Model, is that same kind of tree, but for a webpage, every HTML element becomes a connected node, and JavaScript can walk through, read, and change that entire structure while the page is running. Every dynamic feature on cookiescursor.com, from updating a paragraph's text to adding a whole new section, ultimately comes down to JavaScript interacting with this DOM tree.

In this page:

What Is the DOM
The document Object
The DOM Tree Structure
Selecting Elements (Preview)
DOM Manipulation Basics

Syntax

javascript

document.getElementById("id");
document.querySelector("selector");
element.textContent = value;
element.style.property = value;

What Is the DOM

The DOM is a live, in-memory tree representation of an HTML page, where every element, attribute, and piece of text becomes a connected node that JavaScript can read and manipulate directly.

Note: The DOM is not the same as the raw HTML file, it's a dynamic structure the browser builds and keeps updated as JavaScript changes the page.

Warning: Because the DOM can differ from the original HTML after JavaScript runs, viewing a page's source in some tools shows the original file, not the current live DOM.

उदाहरण: What Is the DOM

javascript

console.log(document); // the live in-memory tree of the page

The document Object

document is the built-in object representing the entire loaded page, serving as the starting point for nearly every DOM operation, finding elements, reading properties, or creating new content.

Note: document.title and document.URL are quick, commonly used properties for reading basic information about the current page.

Warning: document only reflects the page it's running on, scripts cannot use it to reach into or modify a completely different page or origin.

उदाहरण: The document Object

javascript

console.log(document.title);
console.log(document.body);

The DOM Tree Structure

The DOM organizes a page hierarchically, document at the very top, followed by html, then head and body, and every nested element continuing that parent-child relationship all the way down to individual text content.

Note: Understanding parent, child, and sibling relationships in the DOM tree helps a lot when navigating or manipulating nearby elements relative to one you already have.

Warning: Even whitespace and line breaks in your HTML can become their own text nodes in the DOM tree, which occasionally affects child counting.

उदाहरण: The DOM Tree Structure

javascript

// document -> html -> head/body -> nested elements -> text
console.log(document.documentElement.tagName); // "HTML"

Selecting Elements (Preview)

Before you can manipulate an element, you first need to select it from the DOM, using methods like getElementById() or querySelector(), which are covered in full depth in the next chapter on DOM methods.

Note: Selecting an element doesn't change anything on the page by itself, it simply gives your script a reference to work with afterward.

Warning: Trying to select an element that doesn't exist yet, before it's been added to the page, returns null rather than the element you expected.

उदाहरण: Selecting Elements (Preview)

javascript

const el = document.getElementById("demo"); // preview of the next chapter
console.log(el);

DOM Manipulation Basics

Once an element is selected, JavaScript can change its text, attributes, styles, or structure directly, and these changes appear instantly on the page, with no reload required, this is the foundation of interactive web pages.

Note: Even a single line of JavaScript, like changing textContent, is technically DOM manipulation, the same underlying mechanism behind far more complex interactive features.

Warning: DOM manipulation changes are visible instantly, but they exist only in the browser's memory, refreshing the page discards them unless they're saved somewhere.

उदाहरण: DOM Manipulation Basics

javascript

document.body.style.color = "blue";
document.title = "Updated Title";

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Async Parallel Next Lesson → JS DOM Navigation

JS DOM

What Is the DOM

The document Object

The DOM Tree Structure

Selecting Elements (Preview)

DOM Manipulation Basics

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code