Web Development
HTML Course
CSS Course
JavaScript Course
PHP Course
Python Course
SQL Course
SEO Course

Introduction to the DOM

The DOM (Document Object Model) is a representation of the HTML page structure as a tree of nodes. With JavaScript, you can access and modify these nodes to create interactivity.

Simple Example

document.body.style.backgroundColor = "lightblue";

Live Example: Change Background

  let changed = false;
  document.getElementById("btnBackground").addEventListener("click", function () {
    if (!changed) {
      document.body.style.backgroundColor = "#222222";
      document.body.style.color = "#ffffff";
      this.textContent = "Revert to White";
      this.style.backgroundColor = "#ffffff";
      this.style.color = "#222222";
    } else {
      document.body.style.backgroundColor = "#ffffff";
      document.body.style.color = "#000000";
      this.textContent = "Change Background";
      this.style.backgroundColor = "#222222";
      this.style.color = "#ffffff";
    }
    changed = !changed;
  });

Selecting Elements

You can select elements from the DOM using methods like getElementById and querySelector.

getElementById

let title = document.getElementById("title");

querySelector

let paragraph = document.querySelector("p.intro");

Live Example: Select and Modify

  document.getElementById("btnModify").addEventListener("click", function () {
    document.getElementById("title").textContent = "Text modified!";
  });

Hello, John!

Modifying HTML and Text Content

You can change an element's text or HTML using textContent or innerHTML.

textContent vs innerHTML

element.textContent = "Hello!"; // text only
element.innerHTML = "Hello!"; // includes HTML

Live Example: Modify HTML

  document.getElementById("btnHTML").addEventListener("click", function () {
    document.getElementById("textArea").innerHTML = "Updated text";
  });

Initial text

Styling Elements with JavaScript

You can modify an element's style directly from JavaScript using element.style.

Example

let title = document.getElementById("title");
title.style.color = "red";
title.style.fontSize = "24px";

Live Example: Change Style

  document.getElementById("btnStyle").addEventListener("click", function () {
    const title = document.getElementById("titleStyle");
    title.style.color = "darkgreen";
    title.style.fontSize = "28px";
    title.style.fontWeight = "bold";
  });

Hello, John!

Creating and Removing Elements

You can create elements with document.createElement and remove them using remove().

Example

let newElem = document.createElement("p");
newElem.textContent = "Hello!";
document.body.appendChild(newElem);

newElem.remove(); // removes the element

Live Example: Add and Remove

  let paragraph;

document.getElementById("btnAdd").addEventListener("click", function () {
  paragraph = document.createElement("p");
  paragraph.textContent = "New paragraph!";
  paragraph.style.color = "blue";
  document.getElementById("paragraphContainer").appendChild(paragraph);
});

document.getElementById("btnRemove").addEventListener("click", function () {
  if (paragraph) {
    paragraph.remove();
  }
});

Event Listeners and Event Types

You can respond to user actions (click, mouseover, keydown, etc.) using addEventListener.

Example

element.addEventListener("click", function() {
  console.log("You clicked!");
});

Live Example: Detect Click

  document.getElementById("btnClick").addEventListener("click", function () {
    document.getElementById("outputClick").textContent = "You clicked!";
  });

Event Delegation

Instead of adding listeners to each element, you can listen for events on a parent and handle them based on event.target.

Example

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    console.log("You clicked on: " + e.target.textContent);
  }
});

Live Example: Delegation on a List

  document.getElementById("delegationList").addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      document.getElementById("outputDelegation").textContent =
        "You clicked on: " + e.target.textContent;
    }
  });

Form Handling and Validation

You can intercept form submission and validate data before processing.

Example

form.addEventListener("submit", function(e) {
  e.preventDefault();
  if (input.value === "") {
    alert("Fill in the field!");
  }
});

Live Example: Simple Validation

  document.getElementById("validationForm").addEventListener("submit", function (e) {
    e.preventDefault();
    const name = document.getElementById("nameInput").value.trim();
    if (name === "") {
      document.getElementById("formOutput").textContent = "⚠️ Fill in the field!";
    } else {
      document.getElementById("formOutput").textContent = "Hello, " + name + "!";
    }
  });

🧠 Quiz – DOM and Events in PHP

ES6 and Beyond ➔

Top