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>
