? JavaScript DOM Elements

⚡ Quick Overview

A DOM Element represents an HTML element (like <div>, <p>, <h1>) in the browser’s Document Object Model (DOM). JavaScript lets you find these elements, read their content, and change their text, HTML, styles, attributes, and classes at runtime.

? Key Concepts

The DOM is a tree structure where each HTML element is a node (a DOM element).
You can access elements using IDs, classes, tag names, or CSS selectors.
Once you have an element, you can modify its innerHTML, textContent, style, classList, and attributes.
Modern code often prefers querySelector / querySelectorAll for flexibility with CSS selectors.

? Selecting DOM Elements

You can access elements in several ways:

document.getElementById("id") – returns the element with the specified id.
document.getElementsByClassName("class") – returns a live HTMLCollection of elements with that class.
document.getElementsByTagName("tag") – returns a live HTMLCollection of elements with that tag name.
document.querySelector("selector") – returns the first element matching a CSS selector.
document.querySelectorAll("selector") – returns a static NodeList of all elements matching the selector.

? View Code Example – Selecting Elements

// Access elements
const header = document.getElementById("header");
const items = document.getElementsByClassName("item");
const divs = document.getElementsByTagName("div");
const firstButton = document.querySelector("button");
const allButtons = document.querySelectorAll("button");

?️ Element Properties and Methods

Commonly used properties and methods include:

element.innerHTML – get or set the HTML content inside the element.
element.textContent – get or set the plain text inside the element.
element.style – access or change inline CSS styles (e.g. element.style.color = "red").
element.classList – add, remove, or toggle CSS classes.
element.setAttribute(name, value) – set an attribute on the element.
element.getAttribute(name) – read the value of an attribute.

? View Code Example – Changing Content and Style

// Change content and style
const box = document.querySelector(".box");
box.innerHTML = "<strong>Bold Text</strong>";
box.style.color = "red";
box.classList.add("highlight");
box.setAttribute("data-id", "123");
console.log(box.getAttribute("data-id"));

? Example: Change an Element's Text and Style

Here is a simple example that updates the text and style of a <div> using JavaScript.

? View HTML Markup

<div id="message">Hello</div>

? View JavaScript Code

const msg = document.getElementById("message");
msg.textContent = "Hello, DOM!";
msg.style.fontWeight = "bold";
msg.style.color = "green";

? Live Output / Explanation

When the JavaScript runs:

The element with id="message" is selected.
textContent changes from Hello to Hello, DOM!.
fontWeight is set to bold, and color is set to green.
On the page, the text appears as a bold, green “Hello, DOM!”.

? Interactive Example

Click the button to change the text and style of the box using DOM element methods.

Click the button to update me!

? Tips & Best Practices

Use textContent when you want only text (safer for user input or plain text).
Use innerHTML only when you intentionally insert HTML markup.
Never put untrusted user input directly into innerHTML – it can cause XSS (security issues).
classList is the cleanest way to add, remove, or toggle CSS classes.
Remember: getElementsByClassName and getElementsByTagName return live collections that update as the DOM changes.
Convert HTMLCollections to arrays (e.g. Array.from(...)) if you want to use methods like forEach.

? Try It Yourself

Select elements by ID, class, tag, and CSS selector in a sample HTML page.
Change the text and HTML content of different elements using textContent and innerHTML.
Add, remove, and toggle CSS classes dynamically using classList.add(), classList.remove(), and classList.toggle().
Set and get custom attributes (like data-* attributes) using setAttribute and getAttribute.
Create a small UI where clicking a button updates multiple DOM elements at once.