javascript - 如何获取以子字符串开头的所有 elementID

Question

我有这个代码:

HTML:

<div class="lists">
    <div class="list 1">
        <div id="productCheese">Cheese</div>
        <div id="productBread">Bread</div>
        <div id="productMilk">Milk</div>
        <div id="productEgg">Egg</div>
        <div id="addProduct">Add new product to list...</div>
    </div>
    <div class="list 2">
        etc...
    </div>
</div>

和 JavaScript:(我想获取 ID 以“product”开头的所有元素，但“*”对我不起作用...)

var node = document.getElementById("product"*);

(And some unnecessary event listeners...)

现在我的问题是:如何获取以“product”开头的所有 elementID？

Answer 1

Attribute Selectors将提供您正在寻找的东西。它们与 document.querySelector 和 document.querySelectorAll 一起使用.

在您的情况下，您可以指定以产品开头的属性 ID:

var nodes = document.querySelectorAll('[id^=product]');

工作示例:

var nodes = document.querySelectorAll('[id^=product]');

console.log(nodes);

<div class="lists">
    <div class="list 1">
        <div id="productCheese">Cheese</div>
        <div id="productBread">Bread</div>
        <div id="productMilk">Milk</div>
        <div id="productEgg">Egg</div>
        <div id="addProduct">Add new product to list...</div>
    </div>
    <div class="list 2">
        etc...
    </div>
</div>