gibt es die Ids aller Kinder einer Liste

Question

Wenn ich eine Liste mit vier Kindern wie haben:

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

Was hätte ich die IDs aller Kinder zu bekommen, zu tun?

gestaltete ich eine Funktion wie folgt aus:

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

aber es ist sehr hässlich und ich könnte mir vorstellen, gibt es einen einfacheren Weg, es zu handhaben.

Answer 1

aber es ist sehr hässlich und ich könnte mir vorstellen, dass es einen einfacheren Weg gibt, damit umzugehen.

Der Code kann kurz gemacht werden, die neueste ES6 Syntax, wie Pfeil-Funktion im Code verwendet wird, nehme ich an, dass der Code in der Umwelt EcmaScript auf dem 6.

Mit Array.from() Unterstützung ausgeführt wird Eine Liste von DOM-Elementen ermöglicht es, über die Elemente zu iterieren und map() kann darauf verwendet werden.

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>