Solutions

Ecosystems

Economic Systems

Business Leaders

Non-Technical

Innovators

IT Professional

Technical

Developers

Architects

Very Technical

Researchers

Integrations

Connectors

Interoperability

Perspectives

Insights

Synthesis

Solutions

Ecosystems

Economic Systems

Business Leaders

Non-Technical

Innovators

IT Professional

Technical

Developers

Architects

Very Technical

Researchers

Integrations

Connectors

Interoperability

Perspectives

Insights

Synthesis

DOM Manipulation

Last Updated: Apr 13, 2025

Accessing DOM Elements

JavaScript provides several methods to select elements from the DOM.

Using getElementById (Select by ID)

Returns a single element matching the specified id.

let heading = document.getElementById("main-title");
console.log(heading.textContent);

Using getElementsByClassName (Select by Class)

Returns a collection (HTMLCollection) of elements that match the class name.

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

Using getElementsByTagName (Select by Tag)

Returns a collection of elements matching the tag name.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

Using querySelector (Select First Match)

Returns the first matching element based on a CSS selector.

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

Using querySelectorAll (Select All Matches)

Returns a NodeList of elements that match a CSS selector.

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

Modifying DOM Elements

Changing Text Content

The textContent and innerHTML properties allow updating element content.

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

innerHTML allows inserting HTML inside an element.

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

Changing Attributes

The setAttribute and getAttribute methods modify element attributes.

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

Removing an attribute:

<script>link.removeAttribute("target");</script>

Modifying Styles

The style property allows modifying CSS properties directly.

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

Adding or removing a CSS class:

box.classList.add("highlight");
box.classList.remove("highlight");

Creating and Removing Elements

Creating New Elements

Use document.createElement() to generate new HTML elements dynamically.

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

Removing Elements

Use remove() to delete an element.

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

Removing a child element:

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

Handling Events in JavaScript

Adding Event Listeners

The addEventListener() method attaches event handlers to elements.

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

Common Event Types

  • click – When an element is clicked.

  • mouseover – When the mouse hovers over an element.

  • keydown – When a key is pressed.

  • submit – When a form is submitted.

Example:

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

Removing Event Listeners

Use removeEventListener() to detach event handlers.

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

Event Delegation

Instead of adding an event listener to multiple elements, use event delegation on a parent element.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

Conclusion

DOM manipulation is essential for dynamic web applications. This section covered selecting, modifying, and interacting with elements. The next section will focus on event handling in depth, covering advanced techniques and best practices.

Previous

compatibility-and-performance

Next

threading-model

Elements

DOM Manipulation

Last Updated: Apr 13, 2025

Accessing DOM Elements

JavaScript provides several methods to select elements from the DOM.

Using getElementById (Select by ID)

Returns a single element matching the specified id.

let heading = document.getElementById("main-title");
console.log(heading.textContent);

Using getElementsByClassName (Select by Class)

Returns a collection (HTMLCollection) of elements that match the class name.

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

Using getElementsByTagName (Select by Tag)

Returns a collection of elements matching the tag name.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

Using querySelector (Select First Match)

Returns the first matching element based on a CSS selector.

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

Using querySelectorAll (Select All Matches)

Returns a NodeList of elements that match a CSS selector.

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

Modifying DOM Elements

Changing Text Content

The textContent and innerHTML properties allow updating element content.

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

innerHTML allows inserting HTML inside an element.

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

Changing Attributes

The setAttribute and getAttribute methods modify element attributes.

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

Removing an attribute:

<script>link.removeAttribute("target");</script>

Modifying Styles

The style property allows modifying CSS properties directly.

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

Adding or removing a CSS class:

box.classList.add("highlight");
box.classList.remove("highlight");

Creating and Removing Elements

Creating New Elements

Use document.createElement() to generate new HTML elements dynamically.

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

Removing Elements

Use remove() to delete an element.

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

Removing a child element:

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

Handling Events in JavaScript

Adding Event Listeners

The addEventListener() method attaches event handlers to elements.

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

Common Event Types

  • click – When an element is clicked.

  • mouseover – When the mouse hovers over an element.

  • keydown – When a key is pressed.

  • submit – When a form is submitted.

Example:

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

Removing Event Listeners

Use removeEventListener() to detach event handlers.

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

Event Delegation

Instead of adding an event listener to multiple elements, use event delegation on a parent element.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

Conclusion

DOM manipulation is essential for dynamic web applications. This section covered selecting, modifying, and interacting with elements. The next section will focus on event handling in depth, covering advanced techniques and best practices.

Previous

compatibility-and-performance

Next

threading-model

DOM Manipulation

Last Updated: Apr 13, 2025

Accessing DOM Elements

JavaScript provides several methods to select elements from the DOM.

Using getElementById (Select by ID)

Returns a single element matching the specified id.

let heading = document.getElementById("main-title");
console.log(heading.textContent);

Using getElementsByClassName (Select by Class)

Returns a collection (HTMLCollection) of elements that match the class name.

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

Using getElementsByTagName (Select by Tag)

Returns a collection of elements matching the tag name.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

Using querySelector (Select First Match)

Returns the first matching element based on a CSS selector.

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

Using querySelectorAll (Select All Matches)

Returns a NodeList of elements that match a CSS selector.

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

Modifying DOM Elements

Changing Text Content

The textContent and innerHTML properties allow updating element content.

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

innerHTML allows inserting HTML inside an element.

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

Changing Attributes

The setAttribute and getAttribute methods modify element attributes.

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

Removing an attribute:

<script>link.removeAttribute("target");</script>

Modifying Styles

The style property allows modifying CSS properties directly.

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

Adding or removing a CSS class:

box.classList.add("highlight");
box.classList.remove("highlight");

Creating and Removing Elements

Creating New Elements

Use document.createElement() to generate new HTML elements dynamically.

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

Removing Elements

Use remove() to delete an element.

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

Removing a child element:

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

Handling Events in JavaScript

Adding Event Listeners

The addEventListener() method attaches event handlers to elements.

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

Common Event Types

  • click – When an element is clicked.

  • mouseover – When the mouse hovers over an element.

  • keydown – When a key is pressed.

  • submit – When a form is submitted.

Example:

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

Removing Event Listeners

Use removeEventListener() to detach event handlers.

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

Event Delegation

Instead of adding an event listener to multiple elements, use event delegation on a parent element.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

Conclusion

DOM manipulation is essential for dynamic web applications. This section covered selecting, modifying, and interacting with elements. The next section will focus on event handling in depth, covering advanced techniques and best practices.

Previous

compatibility-and-performance

Next

threading-model
ECOSYSTEMS

Teladoc + Lyft

See All

RESOURCES

Case Studies

Books

Research Reports

Blogs

ORGANIZATION

Services

Careers

Contact Us

Press

PARTNERS

Ecosystem Partners

People

LEGAL

Legal Hub

User Privacy Statement

Security Posture

Terms & Conditions

FOLLOW US

X (Twitter)

LinkedIn

Copyright ©2025. Open Ecosystems

ECOSYSTEMS

Teladoc + Lyft

See All

RESOURCES

Case Studies

Books

Research Reports

Blogs

ORGANIZATION

Services

Careers

Contact Us

Press

PARTNERS

Ecosystem Partners

People

LEGAL

Legal Hub

User Privacy Statement

Security Posture

Terms & Conditions

FOLLOW US

X (Twitter)

LinkedIn

Copyright ©2025. Open Ecosystems

ECOSYSTEMS

Teladoc + Lyft

See All

RESOURCES

Case Studies

Books

Research Reports

Blogs

ORGANIZATION

Services

Careers

Contact Us

Press

PARTNERS

Ecosystem Partners

People

LEGAL

Legal Hub

User Privacy Statement

Security Posture

Terms & Conditions

FOLLOW US

X (Twitter)

LinkedIn

Copyright ©2025. Open Ecosystems