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

我有以下代码：

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 ：（我想获取所有以'product'开头的ID的元素，但是'*'对我不起作用...）

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

(And some unnecessary event listeners...)

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

最佳答案

Attribute Selectors将提供您想要的内容。它们与document.querySelector和document.querySelectorAll一起使用。

您可以指定以product开头的属性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>