Select tags in parent class javascript

Question

I can use this to select all the anchor tags in a document, which works great...

var anchors = document.getElementsByTagName('a');

Specifically for replacing "href" functionality with "onclick" (for extending functionality from no javascript, adding thumbnails etc)

Except how can I get it to select just the anchor elements in a certain class of parent element (e.g. pics), leaving the bulk of anchors alone?

<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>

...without additional libraries such as jQuery please!

Here's a quick demo...

function go() {
    var anchorElements = document.getElementsByTagName('a');
    for (var i in anchorElements)
        anchorElements[i].style.backgroundColor = "red";
}

a{background-color:#0F0;}

<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>
<button onclick="go()">Go!</button>

^{I know a workaround is just to select by a class applied to the elements that need modifying}

Not all A elements are links, you can get all the links using document.links. ;-) — RobG
– RobG, Commented Jul 2, 2018 at 23:58

Liang · Accepted Answer · 2018-07-02 23:40:14Z

1

Use querySelectorAll('.pics a') to select a collection of <a> under .pic class

function go() {
    var anchorElements = document.querySelectorAll('.pics a');
    for (var i in anchorElements)
        anchorElements[i].style.backgroundColor = "red";
}

a{background-color:#0F0;}

<a href="img/TEST/pretty.jpg">ignore me</a>
<div class="pics">
 <a href="img/TEST/testPic1.jpg">1 stuff....</a>
 <a href="img/TEST/testPic2.jpg">2 stuff...</a>
 <a href="img/TEST/TestPic3.jpg">3 stuff..</a>
 ...
 <a href="img/TEST/TestPicN.jpg">n stuff..</a>
</div>
<button onclick="go()">Go!</button>

edited Jul 2, 2018 at 23:40

answered Jul 2, 2018 at 23:32

Liang

5152 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felix Kling Over a year ago

Your answer will be much more useful for others if you explain what you changed and why. Please edit your answer.

Wilf Over a year ago

Enough for my level xD, thanks! Looks like it uses CSS Selectors

RobG Over a year ago

It may be much more efficient to add a CSS rule rather than selecting then looping over all the relevant elements one at a time.

Collectives™ on Stack Overflow

Select tags in parent class javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related