javascript - 我如何遍历嵌套的部分元素？

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 选择器 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。