How do I select all "sub" elements inside "main" elements

Question

<div class="main">
    <p>I don't want this</p>
    <div class="sub">I want this</div>
</div>

<div class="main">
    <p>I don't want this</p>
    <div class="sub">I want this</div>
</div>

Anyone know how to select all "sub" elements inside "main" elements. I've tried document.getElementsByClassName("main").getElementsByClassName("sub")
But that doesn't work. To clarify I want to get all "sub" elements inside "main" classes but can't quite figure out how. Any help would be appreciated

document.getElementsByClassName("main") returns array of elements, so you need to loop on each one and run getElementsByClassName("sub") — chriss, Jun 19 '16 at 20:09
See [CSS selector for class descendant within a class](http://stackoverflow.com/q/11475553/1529630) and [What does getElementsByClassName return?](http://stackoverflow.com/q/10693845/1529630) — Oriol, Jun 19 '16 at 20:11

score 4 · Accepted Answer · answered Jun 19 '16 at 20:08

4

Simply use a CSS selector with document.querySelectorAll():

var subs = document.querySelectorAll('.main .sub');

However your posted HTML doesn't place the .sub elements inside the .main elements; they're siblings; in which case:

var subs = document.querySelectorAll('.main + .sub');

Or:

var subs = document.querySelectorAll('.sub');

answered Jun 19 '16 at 20:08

David Thomas

249,100
51
377
410

Thanks for the help I'll try this out tomorrow – A. Seidel Jun 19 '16 at 20:24
I've tyres using this method but it also returns divs that have a class of "sub 1" or "sub 2" is it possible to only select divs that have a class of "sub" – A. Seidel Jun 20 '16 at 16:22

Rafael · Answer 2 · 2016-06-19T20:16:11.167

1

Your code doesn't work, because the result of document.getElementsByClassName("main") is a HTMLCollection (a kind of list of elements), so you'd need to iterate over each item in this list and call .getElementsByClassName("sub") on each of the elements and concatenate all resulting lists.

But there is a simpler way. Today's browsers support document.querySelectorAll, so you can use

var elements = document.querySelectorAll('.main .sub');

Also none of the .sub elements in your sample code is nested inside .main. So, the result of the above would anyway be empty.

edited Jun 19 '16 at 20:16

answered Jun 19 '16 at 20:09

Rafael

18,349
5
58
67

1

Not relevant, but `getElementsByClassName` returns a HTMLCollection. – Oriol Jun 19 '16 at 20:13
Yes, you're right. I corrected my answer. Thank you. – Rafael Jun 19 '16 at 20:16

score 0 · Answer 3 · answered Jun 19 '16 at 20:09

0

Currently in your example you have no child classes in your HTML. Your HTML should look like this instead:

<div class="main">I don't want this
    <div class="sub">I want this</div>
</div>

answered Jun 19 '16 at 20:09

Mitchel Jager

435
4
18

Tnx for the note I'm writing on my iPad so it's not so easy to write HTML code with out mistake – A. Seidel Jun 19 '16 at 20:23

score 0 · Answer 4 · answered Jun 19 '16 at 20:11

0

document.getElementsByClassName("sub") will be enough to select the .sub elements in your example.

answered Jun 19 '16 at 20:11

Johannes

64,305
18
73
130

1

But it will get `.sub` elements outside `.main` too. – Oriol Jun 19 '16 at 20:12
Oriol's right I'm looking to just get .sub that are inside .main but thanks for taking the time to answer – A. Seidel Jun 19 '16 at 20:25
That's what I wrote: "in your example" (I took it you want a solution for that particular situation) – Johannes Jun 19 '16 at 21:24

How do I select all "sub" elements inside "main" elements

4 Answers4