如何从 div 元素中获取所有 ID？

Question

I'm trying to get all IDs within both div elements but I don't know why the following code is not working (taken example from here How to get ALL id's inside of a DIV using pure javascript ). Please advice.

These are my attempts so far

Attempt #1

var everyChild = document.querySelectorAll('#col-x-z.ab.def');
for (var i = 0; i < everyChild.length; i++) {
  console.log(everyChild[i]);
}

Attempt #2

var c = document.querySelectorAll('##col-x-z.ab.def > div');
console.log(c);

Here is my source code:

 .col-xz.ab.def { border: 4px outset red; background-color: lightblue; text-align: center; }.portlet.box.blue { border: 2px outset blue; background-color: lightblue; text-align: center; }

 <div class="col-xz ab def" id="sortable_portlets"> <div class="col-xz ab def" id="col_1" col="1"> <div id="353" class="portlet box blue">x</div> <div id="355" class="portlet box blue">x</div> <div id="358" class="portlet box blue">x</div> <div id="353" class="portlet box blue">x</div> <div id="360" class="portlet box blue">x</div> <div id="363" class="portlet box blue">x</div> <div id="365" class="portlet box blue">x</div> <div id="367" class="portlet box blue">x</div> </div> <div class="col-xz ab def" id="col_2" col="2"> <div id="473" class="portlet box blue">y</div> <div id="475" class="portlet box blue">y</div> <div id="478" class="portlet box blue">y</div> <div id="473" class="portlet box blue">y</div> <div id="480" class="portlet box blue">y</div> <div id="483" class="portlet box blue">y</div> <div id="485" class="portlet box blue">y</div> <div id="487" class="portlet box blue">y</div> </div> </div>

Answer 1

If you would like to get all IDs grouped by parent ID, this will do that:

 var c = Object.fromEntries(Array.from(document.querySelector('#sortable_portlets').children).map(e => [e.id, Array.from(e.children).map(f => f.id).filter(f => f)])); console.log(c);

 .col-xz.ab.def { border: 4px outset red; background-color: lightblue; text-align: center; } portlet.box.blue { border: 2px outset blue; background-color: lightblue; text-align: center; }

 <div class="col-xz ab def" id="sortable_portlets"><div class="col-xz ab def" id="col_1" col="1"><div id="353" class=" portlet box blue">x</div><div id="355" class=" portlet box blue">x</div><div id="358" class=" portlet box blue">x</div><div id="353" class=" portlet box blue">x</div><div id="360" class=" portlet box blue">x</div><div id="363" class=" portlet box blue">x</div><div id="365" class=" portlet box blue">x</div><div id="367" class=" portlet box blue">x</div></div><div class="col-xz ab def" id="col_2" col="2"><div id="473" class=" portlet box blue">y</div><div id="475" class=" portlet box blue">y</div><div id="478" class=" portlet box blue">y</div><div id="473" class=" portlet box blue">y</div><div id="480" class=" portlet box blue">y</div><div id="483" class=" portlet box blue">y</div><div id="485" class=" portlet box blue">y</div><div id="487" class=" portlet box blue">y</div></div></div>

If you just want a simple array of all IDs, use this:

 var c = Array.from(document.querySelectorAll('#sortable_portlets >.col-xz.ab.def > div')).map(e => e.id).filter(e => e); console.log(c);

 .col-xz.ab.def { border: 4px outset red; background-color: lightblue; text-align: center; } portlet.box.blue { border: 2px outset blue; background-color: lightblue; text-align: center; }

 <div class="col-xz ab def" id="sortable_portlets"><div class="col-xz ab def" id="col_1" col="1"><div id="353" class=" portlet box blue">x</div><div id="355" class=" portlet box blue">x</div><div id="358" class=" portlet box blue">x</div><div id="353" class=" portlet box blue">x</div><div id="360" class=" portlet box blue">x</div><div id="363" class=" portlet box blue">x</div><div id="365" class=" portlet box blue">x</div><div id="367" class=" portlet box blue">x</div></div><div class="col-xz ab def" id="col_2" col="2"><div id="473" class=" portlet box blue">y</div><div id="475" class=" portlet box blue">y</div><div id="478" class=" portlet box blue">y</div><div id="473" class=" portlet box blue">y</div><div id="480" class=" portlet box blue">y</div><div id="483" class=" portlet box blue">y</div><div id="485" class=" portlet box blue">y</div><div id="487" class=" portlet box blue">y</div></div></div>

Answer 2

 var coll = document.getElementsByClassName(" portlet box blue"), ids = [], i = 0; while( coll[ i ] ) { ids.push( coll[ i++ ].id ) }; console.log( ids );

 <div class="col-xz ab def" id="sortable_portlets"> <div class="col-xz ab def" id="col_1" col="1"> <div id="353" class=" portlet box blue">x</div> <div id="355" class=" portlet box blue">x</div> <div id="358" class=" portlet box blue">x</div> <div id="353" class=" portlet box blue">x</div> <div id="360" class=" portlet box blue">x</div> <div id="363" class=" portlet box blue">x</div> <div id="365" class=" portlet box blue">x</div> <div id="367" class=" portlet box blue">x</div> </div> </div> <div class="col-xz ab def" id="col_2" col="2"> <div id="473" class=" portlet box blue">y</div> <div id="475" class=" portlet box blue">y</div> <div id="478" class=" portlet box blue">y</div> <div id="473" class=" portlet box blue">y</div> <div id="480" class=" portlet box blue">y</div> <div id="483" class=" portlet box blue">y</div> <div id="485" class=" portlet box blue">y</div> <div id="487" class=" portlet box blue">y</div> </div> </div>