You are on page 1of 9

Jobs

Search… Log In Sign Up


TEAMS

Join us inTeam
Create building a kind, collaborative learning community via our updated Code of Conduct.

How to get elements by class name on HTMLCollection [duplicate]


Ask Question

0
Join Stack Overflow to learn, share knowledge, and build your career.
Email Sign Up
OR SIGN IN WITH

This question already has an answer here: Google


How to get elements with multiple classes 6 answers
This site uses cookies to deliver our services and to show you relevant ads and job listings. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our
Facebook
Terms of Service. Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.
I've been thinking about why we cannot do this in javascript.

Convert webpages to pdf online w ith PDFmyURL


document.getElementsByClassName('class1').getElementsByClassName('class2')

This will not work, because the first getElementsByClassName call will give us an HTMLCollection, which
doesn't have getElementsByClassName defined on it. Why is this? This would be a great function to use in this
way, since it would let you get elements based on them having multiple different classes, not just one.

Is there any way to:

1. Get elements by class name in HTMLCollection


2. Get elements by multiple class names

javascript

share improve this question

edited Jan 3 at 16:10

Pointy
306k 42 436 507

asked Jan 3 at 16:09

Sahand
1,494 14 36

marked as duplicate by Pointy, Andy G, epascarello javascript Jan 3 at 16:17

This question has been asked before and already has an answer. If those answers do not fully address your
question, please ask a new question.

How about document.querySelectorAll(".class1.class2") – Pointy Jan 3 at 16:11

That's a decent solution. However, I think the classes should be separated by a comma, right? – Sahand Jan 3 at 16:13

Problem is HTML Collection does not have methods so either you would need to loop over each one individually and filter
them and build your own collection or use a better method querySelectorAll – epascarello Jan 3 at 16:13

if you want to make it a little more complicated for yourself: Array.from(


document.getElementsByClassName('class1')).filter((item)=>{return Array.from(item.classList).includes('class2')}) – LShapz
Convert webpages to pdf online w ith PDFmyURL
Jan 3 at 16:14

@Sandi, no the comma would be this OR that, not AND. – epascarello Jan 3 at 16:14

show 2 more comments

2 Answers active oldest votes

Get by multiple class names:

document.querySelector('.someclass.otherclass'); // get first element that matches


document.querySelectorAll('.someclass.otherclass'); //get all elements that match

You can querySelector* any DOM element, not just document , in order to search in it.

Get by class name in HTMLCollection

[].filter.call(
htmlCollection, element => [].includes.call(elements.classList, 'someclassname')
)

Neither HTMLCollection nor .classList are arrays, only array-like objects, hence the need for .call .

share improve this answer

answered Jan 3 at 16:16

kon.simeonov
86 1 6

Convert webpages to pdf online w ith PDFmyURL


:)

1. Get elements by class name in HTMLCollection :


HTMLCollection.prototype.forEach = Array.prototype.forEach;

HTMLCollection.prototype.getElementsByClassName = function( name ){


var all = [];
this.forEach( function( el ){
if( el )
all.concat( el.getElementsByClassName( name ) );
});
return all;
}

2. Get elements by multiple class names :


document.querySelectorAll('.class1.class2');

Please use the second for better performance.


share improve this answer

edited Jan 3 at 16:19

answered Jan 3 at 16:16

karkael
161 6

First one is not correct, that is checking for children. – epascarello Jan 3 at 16:18

Yep, sry but that the syntax. @Sandi expected to write


document.getElementsByClassName('class1').filterHasClassName('class2') I think. – karkael Jan 3
at 16:25

Not the answer you're looking for? Browse other questions tagged javascript or ask your own question.

asked 7 months ago

viewed 1,086 times

Convert webpages to pdf online w ith PDFmyURL


active 7 months ago

Jobs near you


Senior Software Architect / Engineer
who enjoys coding web services in c#
MapLarge Atlanta, GA
$100K - $150K REMOTE

single-page-application c#

Senior Full Stack PHP Developer


Fixiti LLC Atlanta, GA
$90K - $115K

php mysql

High response rate

SOFTWARE ENGINEER MANAGER –


RELIABILITY ENGINEER
Home Depot / THD Atlanta, GA
cloud linux

Be one of the first applicants

Sr Engineer, Software - 104796BR


T-Mobile USA Atlanta, GA
$115K - $135K

devops java

More jobs near Atlanta…

Linked

78
How to get elements with multiple classes

Related

7654
How do JavaScript closures work?

6752

Convert webpages to pdf online w ith PDFmyURL


How do I check if an element is hidden in jQuery?

4961

How do I remove a property from a JavaScript


object?

3395
How do you get a timestamp in JavaScript?

7737
How do I redirect to another webpage?

2703
How can I get query string values in JavaScript?

1785

How can I select an element with multiple classes


in jQuery?

7436

How to check whether a string contains a substring


in JavaScript?

2200
How to decide when to use Node.js?

6240

How do I remove a particular element from an array


in JavaScript?

Hot Network Questions


Comic/Bande dessinée about a child who finds a
spaceship as tiny as a toy, turns out to be
dangerous

If this earth were cube shaped would it be


possible during Magellanic era using a float ship
to figure out that the earth is cube shaped?

Convert webpages to pdf online w ith PDFmyURL


What would a medieval war against an aquatic
race look like?

How can I hide a figure but keep its numbering?

What is the correct style that describes the


following images

If someone falls asleep in Animagus form, would


they change back?

Reference letter without permission

During peer-review, should I comment on the


authors' messy code?

How to encourage a child with autism to practice


reading?

What is the name of the sound that a coin makes


when hitting coins collected in a jar?

Should I let my child's school have access to my


kid's personal laptop?

Why would a society of witches choose to have


more boys than girls?

How to write this without any confusion? How do I


refer 'he' to someone?

Why didn't the Rebel Alliance (or the Empire)


build YT-1300 light freighters with the same
specs as the Millennium Falcon for space
combat?

Filter integers in numpy float array

Why would god conduct multiple raptures if he


depends on human beings for worship?

How is no password more secure than


username+password?

Let's golf a BIBABOBU decoder

How can a portal that connects two planets affect


the environment?

a limit question without the use of L'Hospital's


rule

The Web of Puzzles

If I farm, I'm a farmer. But if I guard, I'm a guard?

Asking an exam question that requires a specific


technique

Conservatism and Individualism

Convert webpages to pdf online w ith PDFmyURL


STACK OVERFLOW

Questions
Jobs
Developer Jobs Directory
Salary Calculator
Help
Mobile
Disable Responsiveness

PRODUCTS

Teams
Talent
Engagement
Enterprise

COMPANY

About
Press
Work Here
Legal
Privacy Policy
Contact Us

STACK EXCHANGE
NETWORK

Technology
Life / Arts
Culture / Recreation
Science
Other

Convert webpages to pdf online w ith PDFmyURL


Blog

Facebook

Tw itter
LinkedIn
site design / logo © 2018 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 w ith attribution required. rev 2018.8.30.31447

Convert webpages to pdf online w ith PDFmyURL