Get all the tags within an element Javascript

Question

Assuming the html below:

<div id="contentWrapper">
  <h2>Title<br>Page</h2>
  <div>
  <h4>Subtitle Text<br>
  March 26, 2018</h4>
  <p><iframe src="https://www.youtube.com/embed/ID" allow="autoplay" allowfullscreen="" width="760" height="428" frameborder="0"></iframe></p>
  </div>
  <p>This is text that adds meaningful value to the website. It is what the user reads</p>
  <p>If you have read up to this part I'm actually impressed.</p>
  <p><strong>* * * * * * *</strong></p>
</div>

How can I get every immediate child tag within the contentWrapper as an array that would look like this:

[h2, div, p, p, p]

Notice I don't want the children of children, just the first child.

I thought about using the querySelectorAll() method, but from what I can tell this requires a css selector as a parameter. I won't know ahead of time what types of tags are in this div so I can't "pre-feed" it selectors.

Jonas Wilms · Accepted Answer · 2018-10-07 13:14:19Z

2

  Array.from( document.getElementById("contentWrapper").children, el => el.tagName)

getElementById()

.children

Array.from

answered Oct 7, 2018 at 13:14

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

Nikhil Aggarwal · Accepted Answer · 2018-10-07 13:16:43Z

1

Use Array.from and Array.map

let el = Array.from(document.querySelectorAll("#contentWrapper > *")).map(a => a.tagName);
console.log(el);

<div id="contentWrapper">
  <h2>Title<br>Page</h2>
  <div>
  <h4>Subtitle Text<br>
  March 26, 2018</h4>
  <p><iframe src="https://www.youtube.com/embed/ID" allow="autoplay" allowfullscreen="" width="760" height="428" frameborder="0"></iframe></p>
  </div>
  <p>This is text that adds meaningful value to the website. It is what the user reads</p>
  <p>If you have read up to this part I'm actually impressed.</p>
  <p><strong>* * * * * * *</strong></p>
</div>

answered Oct 7, 2018 at 13:16

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Andy · Accepted Answer · 2018-10-07 13:18:09Z

1

If you want a nodelist of the child elements:

document.querySelector('#contentWrapper').children;

If you want an array of the child element names:

[...document.querySelector('#contentWrapper').children].map(el => el.tagName)

answered Oct 7, 2018 at 13:18

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

Get all the tags within an element Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related