javascript - 如何获取具有特定类的多个元素 ID

Question

我有一堆动态创建的项目供用户选择。在这种情况下，添加了“selected”类。

<li id="test1" class="myElement selected"></li>
<li id="test2" class="myElement"></li>
<li id="test3" class="myElement"></li>
<li id="test4" class="myElement selected"></li>
<li id="test5" class="myElement selected"></li>
<li id="test6" class="myElement"></li>

如何获取所有具有“已选择”类 onclick 的元素的 ID？

Answer 1

使用Document.querySelectorAll()使用选择器 .selected[id]。也就是说，所有具有 selected 类且也 具有 id 属性的元素。

const elementsWithSelectedClass = document.querySelectorAll('.selected[id]')
const selectedElementIds = Array.from(elementsWithSelectedClass) // convert to array
    .map(el => el.id) // map to an array of id values

console.info(selectedElementIds)

<ul style="list-style:none">
<li id="test1" class="myElement selected"></li>
<li id="test2" class="myElement"></li>
<li id="test3" class="myElement"></li>
<li id="test4" class="myElement selected"></li>
<li id="test5" class="myElement selected"></li>
<li id="test6" class="myElement"></li>
</ul>

这将为您提供一组 id 值。

我正在使用 Array.from转换 NodeList从 querySelectorAll 返回到一个数组，因此我可以使用 map方法。