Получить все теги внутри элемента Javascript

Question

Принимая HTML ниже:

<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>

Как я могу получить каждый непосредственный дочерний тег в contentWrapper в виде массива, который будет выглядеть следующим образом:

[h2, div, p, p, p]

Обратите внимание, я неНе хочу детей детей, просто первый ребенок.

Я думал об использовании метода querySelectorAll (), но из того, что я могу сказать, для этого требуется селектор css в качестве параметра.Я не буду знать заранее, какие типы тегов есть в этом элементе div, поэтому я не могу «предварительно кормить» его селекторами.

Answer 1

Использование Array.from и 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>

Answer 2

Если вам нужен список узлов дочерних элементов:

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

Если вы хотите массив имен дочерних элементов:

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

Answer 3

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

getElementById ()

.children

Array.from