How to get all elementIDs that begin with a substring

Question

I have this code:

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>

And JavaScript: (I want to get all elements with an ID that begins with 'product', but the '*' doesn't work for me...)

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

(And some unnecessary event listeners...)

Now my question is: how to get all the elementIDs that begin with 'product'?

Answer 1

Attribute Selectors will provide what you're looking for. They are used with document.querySelector and document.querySelectorAll.

In your case, you can specify the attribute id that starts with product:

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

Working example:

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>