Как я могу перебрать вложенные элементы раздела?

Question

Привет, у меня есть следующая структура в сети:

<section class="item-list clearfix jq-itemList">

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>

 </section>

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

Я пробовал что-то вроде:

document.getElementById("section").getElementsByTagName("section");

но не работает, каков наилучший подход?

Спасибо!

Answer 1

Используйте queryselector и используйте css selector section section:

document.querySelectorAll('section section').forEach(e => {
  const id = e.getAttribute('data');
  console.log(id);
});

<section class="item-list clearfix jq-itemList">

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
  </section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
  </section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
  </section>

</section>

Имейте в виду, что id должен быть уникальным для элемента, вы можете рассмотреть вопрос об изменении id секций.

Answer 2

Использование не уникального id является незаконным и вызовет много проблем. Вместо этого используйте атрибут name с querySelector

sections= document.querySelectorAll('section section[name=cart-section]');

sections.forEach(s=> console.log(s.getAttribute('data')) );

sections = document.querySelectorAll('section section[name=cart-section]');

sections.forEach(s => console.log(s.getAttribute('data')));

<section class="item-list clearfix jq-itemList">

  <section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
  </section>

  <section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
  </section>

  <section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
  </section>

</section>