[DimonFreeman]

<div class="product" id="product-1">...</div>
<div class="product" id="product-2">...</div>

<div class="product" data-product-id="1">...</div>
<div class="product" data-product-id="2">...</div>
<script>
//Получить первый товар используя id
document.getElementById("product-1");

//Получить первый товар используя  data-product-id
document.querySelector('[data-product-id="1"]');

//Получить коллекцию товаров используя data-product-id
document.querySelectorAll('[data-product-id]');
</script>

А по класу product, могу ли я выдернуть [1],[2]?
типа как-то так
document.getElementsByClassName("product").innerHT ML;