DOM

The DOM (Document Object Model) is a representation of a webpage that JavaScript can use to interact with and manipulate the structure, style, and content of the page dynamically. With DOM manipulation, you can make your webpage interactive and responsive to user actions.

  • The DOM is like a tree structure of your webpage.
  • Each element in your HTML (like <div>, <p>, or <button>) is represented as a node in the DOM.

Example HTML Structure

HTML
Copy
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1 id="title">Welcome</h1>
  <p class="content">This is a paragraph.</p>
  <button onclick="changeText()">Click Me</button>
</body>
</html>

In this example, the <h1>, <p>, and <button> are nodes in the DOM.

Accessing DOM Elements

To manipulate an element, you need to select it first.

Common Methods to Select Elements

1. getElementById(): Selects an element by its id.

Javascript
Copy
let title = document.getElementById("title");
console.log(title); // Logs the <h1> element

2. getElementsByClassName(): Selects all elements with a specific class.

Javascript
Copy
let paragraphs = document.getElementsByClassName("content");
console.log(paragraphs[0]); // Logs the first paragraph

3. getElementsByTagName(): Selects all elements with a specific tag name.

Javascript
Copy
let buttons = document.getElementsByTagName("button");
console.log(buttons[0]); // Logs the first button

4. querySelector(): Selects the first element that matches a CSS selector.

Javascript
Copy
let title = document.querySelector("#title"); // Selects by ID
let paragraph = document.querySelector(".content"); // Selects by class

5. querySelectorAll(): Selects all elements that match a CSS selector.

Javascript
Copy
let allParagraphs = document.querySelectorAll(".content");
console.log(allParagraphs); // Logs a NodeList of all paragraphs

Changing Content

You can change the text or HTML inside an element.

a) Change Text Content

Use the textContent property.

Javascript
Copy
let title = document.getElementById("title");
title.textContent = "Hello, World!";

b) Change HTML Content

Use the innerHTML property.

Javascript
Copy
let paragraph = document.querySelector(".content");
paragraph.innerHTML = "<strong>This is bold text!</strong>";

Changing Styles

You can modify the CSS styles of an element using the style property.

Example: Change the Color

Javascript
Copy
let title = document.getElementById("title");
title.style.color = "blue";
title.style.fontSize = "24px";

Adding and Removing Classes

Classes control the styles of elements. You can dynamically add, remove, or toggle classes.

Example: Adding and Removing Classes

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

// Add a class
title.classList.add("highlight");

// Remove a class
title.classList.remove("highlight");

// Toggle a class (adds it if not present, removes it if present)
title.classList.toggle("highlight");

Creating and Adding Elements

You can dynamically create new elements and add them to the DOM.

a) Create an Element

Use the createElement() method.

Javascript
Copy
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

b) Add the Element to the Page

Use appendChild() or append().

Javascript
Copy
let body = document.body;
body.appendChild(newParagraph);

Removing Elements

Use the remove() method to delete an element.

Example:

Javascript
Copy
let title = document.getElementById("title");
title.remove();

Responding to Events

DOM manipulation often happens in response to user actions, like clicks or keypresses.

Example: Change Text on Button Click

Javascript
Copy
function changeText() {
  let title = document.getElementById("title");
  title.textContent = "You clicked the button!";
}

In the HTML:

Javascript
Copy
<button onclick="changeText()">Click Me</button>

Advanced Manipulations

a) Adding Attributes

Use the setAttribute() method.

Javascript
Copy
let button = document.querySelector("button");
button.setAttribute("disabled", "true"); // Disables the button

b) Removing Attributes

Use the removeAttribute() method.

Javascript
Copy
button.removeAttribute("disabled"); // Enables the button

c) Traversing DOM Nodes

You can move between nodes using properties like:

  • parentNode: Gets the parent node.
  • children: Gets all child nodes.
  • nextSibling / previousSibling: Gets adjacent nodes.

Example: Traversing Nodes

Javascript
Copy
let body = document.body;
console.log(body.children[0]); // Logs the first child (e.g., <h1>)