Scribd
Upload
5 views

DOM Methods

Uploaded by

akbar111birbal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

DOM Methods

Uploaded by

akbar111birbal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Program:

<!DOCTYPE html>

<html>

<head>

<title>getElementsByClassName Example</title>

</head>

<body>

<h3>HTML DOM getElementsByClassName() Example</h3>

<p class="myClass">This is the first paragraph with class "myClass".</p>

<p class="myClass">This is the second paragraph with class "myClass".</p>

<p>This paragraph does not have the class "myClass".</p>

<p class="myClass">This is the third paragraph with class "myClass".</p>

<button onclick="changeColor()">Change Text Color</button>

<script>

function changeColor() {

// Get all elements with the class name "myClass"

let elements = document.getElementsByClassName("myClass");

// Loop through all the elements and change their color to blue

for (let i = 0; i < elements.length; i++) {

elements[i].style.color = "blue";
}

</script>

</body>

</html>

HTML DOM getElementsByTagName(): The getElementsByTagName() returns a


HTMLCollection of objects which match a tag name in the HTML document.

Syntax:

document.getElementsByTagName(tagName);

Program:

<!DOCTYPE html>

<html>

<body>

<!-- Various HTML elements with

different tag names -->

<p>HELLO</p>

<p>For</p>

<p>YOU</p>

<script>

const p = document.getElementsByTagName("p");

document.write(p);

</script>

</body>

</html>
Program 2:

<!DOCTYPE html>

<html>

<head>

<title>getElementsByTagName() Example</title>

</head>

<body>

<h3>List of Fruits</h3>

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Cherry</li>

<li>Orange</li>

</ul>

<button onclick="changeText()">Change List Items</button>

<script>

// Function to change the text of all <li> elements

function changeText() {

// Get all <li> elements

let listItems = document.getElementsByTagName("li");


// Loop through each <li> element and change its text

for (let i = 0; i < listItems.length; i++) {

listItems[i].textContent = "Fruit " + (i + 1);

</script>

</body>

</html>

listItems is assumed to be an array-like list of HTML elements, such as <li> items in a list.

listItems[i].textContent accesses the textContent property of each list item in listItems, allowing
you to change the text inside that list item.

HTML DOM querySelector(): This method returns the first match of an element that is found
within the HTML document with the specific selector. If there is no match, null is returned.

Syntax:

document.querySelector(selector);

HTML DOM querySelectorAll(): This method returns a static NodeList of all elements that are
found within the HTML document with the specific selector.

Syntax:

document.querySelectorAll(selector);

querySelector(): Selects the first element that matches a specified CSS selector.
querySelectorAll(): Selects all elements that match a specified CSS selector, returning a
NodeList (like an array).

<!DOCTYPE html>

<html>

<head>

<title>querySelector and querySelectorAll Example</title>

</head>

<body>

<p class="text">First paragraph with class "text".</p>

<p class="text">Second paragraph with class "text".</p>

<p>Another paragraph without the class.</p>

<button onclick="changeContent()">Change Content</button>

<script>

function changeContent()

// Using querySelector to select the first element with class "text"

let firstParagraph = document.querySelector(".text");

firstParagraph.textContent = "Changed the first paragraph!";

</script>

</body>
</html>

You might also like