如何從 div 元素中獲取所有 ID？

Question

我正在嘗試獲取兩個 div 元素中的所有 ID，但我不知道為什么以下代碼不起作用（以此處為例How to get ALL id's inside a DIV using pure javascript ）。 請指教。

這些是我迄今為止的嘗試

嘗試#1

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

嘗試#2

var c = document.querySelectorAll('##col-x-z.ab.def > div');
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 1

如果您想獲取按父 ID 分組的所有 ID，可以這樣做：

 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>

如果您只想要一個包含所有 ID 的簡單數組，請使用以下命令：

 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>