No announcement

Document Object Model (DOM) and DOM Operations

The Document Object Model (DOM) is a programming interface provided by web browsers that allows JavaScript to interact with the elements of an HTML document. It represents the structure of a web page as a tree of objects, where each object corresponds to an element, attribute, or text content in the document.

Example - DOM: Selecting, Modifying, Creating, and Removing Elements:


<!DOCTYPE html>
  <title>DOM Manipulation Example</title>

<h2>DOM Manipulation:</h2>
<div id="myDiv">
  <p>Hello, <span id="spanElement">DOM</span>!</p>

// Selecting DOM Elements
let divElement = document.getElementById("myDiv");
let spanElement = document.getElementById("spanElement");

// Modifying DOM Elements
spanElement.textContent = "Document Object Model"; = "lightblue";

// Creating DOM Elements
let newElement = document.createElement("p");
newElement.textContent = "This is a new paragraph.";

// Removing DOM Elements
setTimeout(function() {
}, 3000);


DOM Manipulation: Hello, Document Object Model! This is a new paragraph.

After 3 seconds, the "This is a new paragraph." text will disappear.


  • The HTML code includes a <div> element with the id "myDiv". Inside the <div>, there's a paragraph (<p>) element containing the text "Hello, DOM!" and a <span> element with the id "spanElement" enclosing the word "DOM".
  • The JavaScript code selects elements using document.getElementById() and modifies their content using the textContent property and style using the style property.
  • We create a new paragraph (<p>) element using document.createElement("p"), set its content using the textContent property, and append it to the <div> using divElement.appendChild(newElement).
  • After 3 seconds, we remove the newly created paragraph using divElement.removeChild(newElement).

DOM manipulation allows JavaScript to dynamically update the content and appearance of web pages, making them interactive and responsive to user actions. It's a fundamental skill for web development, enabling the creation of dynamic user interfaces and the management of content on web pages.