如何获取所有 LI UL 元素 ID 值并将它们放置在 JavaScript 数组中？答案

【问题标题】：How do I get all the LI UL elements ID value and place them in a JavaScript array?如何获取所有 LI UL 元素 ID 值并将它们放置在 JavaScript 数组中？
【发布时间】：2025-12-24 02:45:12
【问题描述】：

我必须在我的网站上嵌入一些跟踪代码。所以我有一个带有 ID 值的 LI 元素列表，我想将它放在 sn-p 的数组中。它们应该是对象内的数字，例如 123、456 等。我想用纯 JavaScript 来做。

这是我尝试过的代码。我的 HTML：

<ul id="itemGrid">  
    <li class="item" id="1080">  product code </li>
    <li class="item" id="1487">  product code </li>    
    <li class="item" id="1488">  product code </li>
    ...
</ul>

这是 JavaScript 代码

// Get all LI items and get the ID of them in the object viewList
var catId = document.getElementById('itemGrid').getElementsByTagName('li');

window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
        // SHOULD BE LIKE THIS
        // { event: "viewList", item: ["First item id", "Second item id", "Third item id"] }
        // My actual code
        { event: "viewList", item: [ catId[].id ] }
);

【问题讨论】：

<li> 不是自闭合元素
这是一个错字@Tushar
var lis = document.querySelectorAll('#itemGrid li[id]'); var arr = []; for (var i = 0; i < lis.length; i++) { arr.push(+lis[i].id); } console.log(arr);
你能回答 Tushar，所以我奖励你答案吗？

标签： javascript html arrays object

【解决方案1】：

试试这个

var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var idArray = [];
for ( var counter = 0; counter < lis.length; counter++)
{
   idArray.push( lis[ counter ].id );
}
console.log( idArray );

【讨论】：

【解决方案2】：

您可以使用querySelectorAll 选择所有作为选择器传递的匹配元素。

选择器'#itemGrid li[id]' 将选择#itemGrid 元素内具有id 属性的所有<li> 元素。

querySelectorAll 返回 HTML 元素的集合。遍历此集合以获取单个元素 id。

var lis = document.querySelectorAll('#itemGrid li[id]');

var arr = [];
for (var i = 0; i < lis.length; i++) {
  arr.push(+lis[i].id);
}

console.log(arr);
document.write('<pre>' + JSON.stringify(arr, 0, 4) + '</pre>');

<ul id="itemGrid">
  <li class="item" id="1080">1080</li>
  <li class="item" id="1487">1487</li>
  <li class="item" id="1488">1488</li>
</ul>
<hr />

【讨论】：

【解决方案3】：

您可以通过slice 将HTMLCollection 转换为数组，然后您可以map 该数组：

catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; });

var catId = document.getElementById('itemGrid').getElementsByTagName('li');
catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; });

document.write(catId);

<ul id="itemGrid">  
    <li class="item" id="1080">  product code </li>
    <li class="item" id="1487">  product code </li>    
    <li class="item" id="1488">  product code </li>
</ul>

【讨论】：

这需要原型库吗？如果是这样，请投票。
不，这是原生 javascript。

【解决方案4】：

var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var arr = [];

// You need to iterate the list lis
[].forEach.call( lis, function(el){
     arr.push( el.id );
});

// Making the object you want
var criteo_q = { event: "viewList", item: arr };
console.log(criteo_q);

要迭代DOM元素的list，也可以使用

【讨论】：