How to Select HTML Elements - 2

document.getElementsByClassName() is a method used to select all elements in HTML with a specific class attribute.

Imagine you're in a store and want to find all products of a certain brand. A class is like that brand, used to group multiple elements with the same style or function.

Copy
<div class="highlighted">div element</div>

<p class="highlighted">p element</p>

<span class="highlighted">span element</span>

Copy
const highlightedElements = document.getElementsByClassName('highlighted');

for (let elem of highlightedElements) {
  elem.style.backgroundColor = 'yellow'; // Changing the background color of highlighted elements to yellow
}

document.querySelectorAll() is a method that uses CSS selectors to select one or multiple elements in a web page.

querySelectorAll allows you to specify multiple conditions simultaneously to precisely select the elements you want.

Copy
<div class="box red">Red Box</div>
<p class="text blue">Blue Text</p>
<span class="highlight red">Red Highlighted Text</span>

Copy
const redElements = document.querySelectorAll('.red');

for (let elem of redElements) {
  elem.style.border = '2px solid red'; // Adding a red border
}