Javascript: Get ID of all Elements in a Section

Question

I have a Script that maps all Elements starting with a specific ID:

var mirror = [...document.querySelectorAll('[id^="abc_"]')].map(elm => elm.id);

Now i need a function, that not all of the IDs are mapped, but just those in the section "foo"

<section id="foo">
  <div id="abc_1></div>
  <a id="abc_2"></a>
</section>

<section id="bar">
  <div id="abc_3></div>
  <a id="abc_4"></a>
</section>

With the obove function i get abc_1, abc_2, abc_3, abc_4. But i need only the IDs in section "foo" (abc_1 and abc_2)

Is there a way?

Answer 1

 var mirror = [...document.querySelectorAll('section#foo [id^="abc_"]')].map(elm => elm.id); console.log(mirror)

 <section id="foo"> <div id="abc_1">link1</div> <a id="abc_2">link2</a> </section> <section id="bar"> <div id="abc_3">link3</div> <a id="abc_4">link4</a> </section>

try this

var mirror = [...document.querySelectorAll('section#foo [id^="abc_"]')].map(elm => elm.id);

Answer 2

You can do this easily. Just pass the section id #foo in the .querySelectorAll() like:

 document.querySelectorAll('#foo [id^="abc_"]')

This will find all the ids which start with abc_ inside the #foo section only, instead of all sections.

 var mirror = [...document.querySelectorAll('#foo [id^="abc_"]')].map(elm => elm.id); console.log( mirror )

 <section id="foo"> <div id="abc_1"></div> <a id="abc_2"></a> </section> <section id="bar"> <div id="abc_3"></div> <a id="abc_4"></a> </section>

Answer 3

Just add another selector at the beginning section#foo

 let mirror = [...document.querySelectorAll('section#foo [id^="abc_"]')].map(ele => ele.id); console.log(mirror);

 <section id="foo"> <div id="abc_1"></div> <a id="abc_2"></a> </section> <section id="bar"> <div id="abc_3"></div> <a id="abc_4"></a> </section>

Answer 4

you can use as @Pain said but to be general without "section"

 var mirror = [...document.querySelectorAll('#foo [id^="abc_"]')].map(elm => elm.id);