Scribd
Upload
3 views4 pages

Dom Manipulation

The document explains the JavaScript DOM and element selection methods, detailing how to interact with HTML elements using various methods like getElementById and querySelector. It also covers dynamic CSS style modifications using the .style property and class manipulation with classList. Examples are provided to illustrate how to highlight text and apply styles dynamically.

Uploaded by

jai8gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views4 pages

Dom Manipulation

The document explains the JavaScript DOM and element selection methods, detailing how to interact with HTML elements using various methods like getElementById and querySelector. It also covers dynamic CSS style modifications using the .style property and class manipulation with classList. Examples are provided to illustrate how to highlight text and apply styles dynamically.

Uploaded by

jai8gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

The Prototype Studio

JavaScript DOM & Element Selection


The DOM (Document Object Model) is a representation of an HTML document as a
tree of objects.
It allows JavaScript to interact with and modify HTML elements dynamically.
Every HTML element is represented as a node in the tree.

Method Description

document.getElementById(id) Selects a single element by its


unique id.

document.getElementsByClassNa Selects all elements that have a


me(className) specific class (returns an
HTMLCollection).

document.getElementsByTagNam Selects all elements with a given


e(tagName) tag name (e.g., div, p, span).

document.querySelector(selector Selects the first matching element


) (by class, ID, or tag).

document.querySelectorAll(select Selects all matching elements


or) (returns a NodeList).

JavaScript allows modifying CSS styles dynamically using the .style


property.
Setting a Single Style

var element = document.getElementById("box");

element.style.backgroundColor = "lightblue"; // Changes background color


element.style.fontSize = "20px"; // Changes font size

Applying Multiple Styles at Once

var btn = document.getElementById("button");

btn.style.cssText = "background-color: green; color: white; padding: 10px;";

Using classList to Add/Remove Classes

Instead of modifying styles inline, it's better to add or remove CSS classes
dynamically.

var element = document.getElementById("myElement");

// Add a class

element.classList.add("active");

// Remove a class

element.classList.remove("hidden");

// Toggle a class

element.classList.toggle("dark-mode");

<!DOCTYPE html>

<html>

<head>

<style>

.highlight {

background-color: yellow;

</style>

</head>
<body>

<p id="text">Click the button to highlight this text.</p>

<button onclick="highlightText()">Highlight</button>

<script>

function highlightText() {

var para = document.getElementById("text");

para.classList.toggle("highlight");

</script>

</body>

</html>

Summary

Method Returns Usage

getElementById("id") Single element Used when selecting


(HTMLElement or a unique element by
null) ID.

getElementsByClassN HTMLCollection Used when selecting


ame("class") (array-like) multiple elements
with a shared class.

.style Direct CSS Applies inline styles


modification dynamically.

.classList.add/remove Class-based styling Adds, removes, or


/toggle() toggles CSS classes
dynamically.

You might also like