Borislav Hadzhiev
Reading timeยท3 min
Photo from Unsplash
Use the querySelector()
method to get the first element with a specific
class name, e.g. document.querySelector('.box')
.
The method returns the first element that matches the provided selector or
null
if no element matches.
Here is the HTML for the example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>bobbyhadz.com</title> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
const first = document.querySelector('.box'); console.log(first); // ๐๏ธ div.box console.log(first.textContent); // ๐๏ธ "Box 1"
The document.querySelector method takes a string that is a valid CSS selector as a parameter.
null
if no element matches.Alternatively, you could use the getElementsByClassName
method to get an
HTMLCollection
of the matching elements and access the element at index 0
to
get the first element with the specified class.
const first = document.getElementsByClassName('box')[0]; console.log(first); // ๐๏ธ div.box
Notice that the getElementsByClassName method takes the class name and not a selector as a parameter.
HTMLCollection
is returned.If you are unable to find the element you are looking for, use the
getElementsByClassName
method to get a collection of all elements with the
specific class name and iterate over the collection looking for the element.
const boxes = document.getElementsByClassName('box'); let element; for (const box of boxes) { if (box.textContent.toLowerCase() === 'box 1') { console.log('โ box found'); element = box; break; } } console.log(element); // ๐๏ธ div.box console.log(element.textContent); // ๐๏ธ "Box 1"
We used the for...of
loop to iterate over the collection of elements with the
class box
.
box 1
. If the condition is met, we assign the element to a variable.When the element is found, use the break
keyword to break out of the for
loop to avoid doing unnecessary work.
To get the last element with a specific class name:
querySelectorAll()
method to get a NodeList
containing the
elements with the specific class.NodeList
to an array.pop()
method to get the last element of the array.Here is the HTML for the example.
<!DOCTYPE html> <html lang="en"> <head> <title>bobbyhadz.com</title> <meta charset="UTF-8" /> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
const last = Array.from( document.querySelectorAll('.box') ).pop(); console.log(last); // ๐๏ธ div.box console.log(last.textContent); // ๐๏ธ "Box 3"
The
document.querySelectorAll
method takes a string that contains a valid CSS selector as a parameter and
returns a NodeList
containing the matching elements.
We used the
Array.from
method to convert the NodeList
to an array, so we can use the
Array.pop
method.
pop
method removes the last element from an array and returns it.You could use the document.getElementsByClassName method to achieve the same result.
const last = Array.from( document.getElementsByClassName('box') ).pop(); console.log(last); // ๐๏ธ div.box console.log(last.textContent); // ๐๏ธ "Box 3"
The getElementsByClassName
method takes a class name as a parameter and
returns an HTMLCollection
that contains the matching elements.
querySelectorAll
method, but querySelectorAll
is more flexible because it can be passed a CSS selector and not just a class name.If you can't find the element you are looking for, use the
getElementsByClassName
method to get a collection of all elements with the
specific class name and iterate over the collection looking for the specific
element.
const boxes = document.getElementsByClassName('box'); let element; for (const box of boxes) { if (box.textContent.toLowerCase() === 'box 3') { console.log('โ box found'); element = box; break; } } console.log(element); // ๐๏ธ div.box console.log(element.textContent); // ๐๏ธ "Box 3"
We used the for...of
loop to iterate over the collection of elements with the
class box
.
box 1
, and if the condition is met, we assign the element to a variable.When the element is found, use the break
keyword to break out of the for
loop and avoid doing unnecessary work.