Scribd
Upload
5 views

DOM Methods

Uploaded by

akbar111birbal
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
5 views

DOM Methods

Uploaded by

akbar111birbal
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/ 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