獲取列表中所有子代的ID

Question

如果我有四個孩子的清單，例如：

<ul id="foo">
    <li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
    <li id="4"></li>
</ul>

我該怎么做才能獲得所有孩子的身份證？

我設計了這樣的函數：

function bar() {
  children = document.getElementById('foo');
  childArr = [children[0], children[1], children[2], children[3]]
  console.log(childArr.map(x=>x.id));
}

但這很丑陋，我想有一種更簡單的方法來處理它。

Answer 1

但這很丑陋，我想有一種更簡單的方法來處理它。

可以使用最新的ES6語法來簡化代碼，因為代碼中使用了箭頭功能，所以我假設代碼將在支持EcmaScript 6的環境中執行。

在DOM元素列表上使用Array.from()將允許迭代這些元素，並且可以在其上使用map() 。

 var ids = Array.from(document.querySelectorAll('#foo li')).map(e => e.id); console.log(ids); 

 <ul id="foo"> <li id="1"></li> <li id="2"></li> <li id="3"></li> <li id="4"></li> </ul>