JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript DOM


What is the DOM in JavaScript?

The DOM (Document Object Model) is a programming interface that allows JavaScript to interact with HTML and XML pages. It represents the webpage as a tree of objects. Each HTML element, text, and comment becomes a node in this tree.

Think of it like a blueprint of your webpage. JavaScript can use this blueprint to read, change, or add content, update styles, or respond to user actions.

Why DOM is Important for Web Pages

The DOM is essential because it allows websites to become interactive and dynamic. Without it, webpages would be static. Some main benefits include:

  • Dynamic Updates – Change text, images, or sections without reloading the page.

  • User Interaction – Buttons, forms, and menus respond to clicks or typing.

  • Element Access – Grab and manipulate any HTML element.

  • Event Handling – Listen for clicks, mouse movements, or keyboard input.

  • Animations and Effects – Create interactive animations using DOM updates.

In short, the DOM makes your webpage live and responsive.

What is the DOM Structure?

The DOM is organized as a tree of nodes. Each HTML element, attribute, and text is a node connected in a parent-child relationship.

Example DOM tree:

Document (root)
 ├─ html
 │   ├─ head
 │   │   ├─ title
 │   │   └─ meta
 │   └─ body
 │       ├─ h1
 │       ├─ p
 │       └─ div
 │           └─ a

Types of Nodes

  1. Document Node – The root of the DOM tree, representing the entire webpage.

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

  3. Text Nodes – Contain the text inside elements.

  4. Attribute Nodes – Represent attributes like id, class, or src.

  5. Comment Nodes – Represent HTML comments (<!-- comment -->).

How JavaScript Can Use the DOM

JavaScript interacts with the DOM through the document object, which is the entry point to the page structure.

Example: Accessing Elements

// Access the document object
console.log(document);

// Get the page title
console.log(document.title);

// Change the title dynamically
document.title = "My Dynamic Webpage";

This example shows how JavaScript can read and update webpage content in real-time.

Example: Changing Content on a Page

HTML Example:

<!DOCTYPE html>
<html>
<head>
    <title>Original Title</title>
</head>
<body>
    <h1>Welcome to DOM Tutorial</h1>
    <p>This is the first paragraph.</p>
</body>
</html>

JavaScript Example:

// Change heading text
document.querySelector("h1").textContent = "DOM Made Easy";

// Update paragraph text
document.querySelector("p").textContent = "This paragraph is updated using JavaScript.";

// Add a new paragraph
let newPara = document.createElement("p");
newPara.textContent = "This paragraph is added dynamically.";
document.body.appendChild(newPara);

The webpage updates without refreshing, showing the power of the DOM.

Navigating the DOM (Parent, Child, Sibling)

The DOM tree allows you to move between nodes:

  • Parent Node – Access the parent of an element:

    let p = document.querySelector("p");
    console.log(p.parentNode); // body
    
  • Child Nodes – Access children of an element:

    let bodyChildren = document.body.children;
    console.log(bodyChildren); // HTMLCollection
    
  • Sibling Nodes – Access elements at the same level:

    let firstPara = document.querySelector("p");
    console.log(firstPara.nextElementSibling); // null if no sibling
    

DOM traversal helps you target and manipulate specific parts of a page.

Key Concepts You Must Know

  1. Live DOM – Represents the current state of the page. Any changes are immediately visible.

  2. DOM vs HTML – HTML is static, the DOM is a live interactive version of your page.

  3. Event-driven programming – DOM enables user interactions like clicks or typing.

  4. Dynamic Changes – You can create, delete, or modify elements without reloading the page.

Practical Example: Interactive Button Using DOM

HTML:

<button id="myBtn">Click Me</button>
<p id="msg"></p>

JavaScript:

document.getElementById("myBtn").addEventListener("click", function() {
    document.getElementById("msg").textContent = "Button clicked! DOM is working!";
});

Clicking the button updates the paragraph instantly, showing how DOM enables interactivity.


Summary: Why Learn DOM

The DOM is a core part of modern web development. With the DOM, you can:

  • Change text, images, and styles dynamically

  • Add, remove, or modify HTML elements

  • Respond to user actions like clicks, typing, or scrolling

  • Create interactive effects and animations

Mastering the DOM is the foundation for advanced topics like DOM Methods, Events, and Animations. Once you understand the DOM structure and navigation, you can control every part of a webpage using JavaScript.


Practice Questions

  1. Write JavaScript to change the page title to "DOM Practice Page".

  2. Change the text of the first <h1> element on the page to "Welcome to DOM Tutorial".

  3. Add a new paragraph <p> with any text content to the end of the <body> using createElement and appendChild.

  4. Change the color of all <p> elements to blue using querySelectorAll and a loop.JavaScript DOM Tutorial | Manipulation & Examples

  5. Select any element on the page and log its parent node to the console using parentNode.

  6. Select the <body> and log all its child elements using children.

  7. Select the first <p> and log its next and previous sibling elements using nextElementSibling and previousElementSibling.

  8. Create a button with text "Click Me". On click, it should update a paragraph to "Button clicked!" using addEventListener.

  9. Remove the last paragraph from the page using removeChild or remove.

  10. Add an image to the page and then change its src attribute to a new image URL using setAttribute.


JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Go Back Top