How use JavaScript to query on selector result properly?

Question

I have the following piece of HTML.

<div id="outer"><b class="dest">something</b>
    <div id="test"><b class="dest">unwanted stuff</b></div>
</div>

Let's say I already have a reference to the outer element with document.querySelector("#outer"). How can I query all b elements with the dest class and are the first child of its parent? I tried document.querySelector("#outer").querySelector("b.dest") and document.querySelector("#outer").querySelector("b.dest:first-child") but only the first b element has returned. How can I get both b elements (through the result of document.querySelector("#outer"))?

itsisaac19 · Accepted Answer · 2021-05-07 17:33:39Z

2

.querySelector only selects one element max.

.querySelectorAll Returns an array-like node list.

You want:

var bElements = document.getElementById("outer").querySelectorAll('b.dest:first-child');

This will return an array of all elements that:

Have a parent with an id of outer
have the class dest
are the first-child of their parent

Then you can access each element just like an array, ex.

bElements[0]

DEMO:

var bElements = document.getElementById("outer").querySelectorAll('b.dest:first-child');

console.log(bElements)

<div id="outer"><b class="dest">something</b>
    <div id="test"><b class="dest">unwanted stuff</b></div>
</div>

edited May 7, 2021 at 17:33

answered Apr 25, 2021 at 14:26

itsisaac19

5611 gold badge3 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

How use JavaScript to query on selector result properly?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related