Как получить id всех тэгов с определенным классом?

Question

На странице выводятся циклом блоки, у каждого уникальный id.

{% for product in slots %}
    <div class="block-product-main" id="{{product.id}}">
    </div>
{% endfor %}

необходимо у каждого элемента считать id:

let elements = document.querySelectorAll('.block-product-main')
for(i in elements){
    console.log(i.id)
}

С js не никогда не работал, поэтому возникают сложности... понимаю, что возможно нельзя таким образом получить id, но как это сделать мыслей нет. Буду благодарен за помощь!

Answer 1

Осуществить выборку всех id тегов, которые имеют определнный класс можно, выбрав все теги методом querySelectorAll, а далее пробежать по полученной коллекции

let elements = document.querySelectorAll('.block-product-main');
elements.forEach(el => console.log(el.id));

<div id='id1' class='block-product-main'>1</div>
<div id='id2' class='block-product-main'>2</div>
<div id='id3' class='block-product-main'>3</div>

Если надо сохранить все, лучше использовать массив

let elements = document.querySelectorAll('.block-product-main');
const arrId = [];
elements.forEach(el => arrId.push(el.id));
        
console.log(arrId)

<div id='id1' class='block-product-main'>1</div>
<div id='id2' class='block-product-main'>2</div>
<div id='id3' class='block-product-main'>3</div>

Перебирать коллекцию for in не самая хорошая затея, т.к. помимо самих элементов, там есть методы и свойства:

let elements = document.querySelectorAll('.block-product-main');

for (let x in elements) {
  console.log(x, elements[x])
}

<div id='id1' class='block-product-main'>1</div>
<div id='id2' class='block-product-main'>2</div>
<div id='id3' class='block-product-main'>3</div>

Answer 2

for...in обычно для перебора объектов используют. Для итераторов используйте for...of:

let elements = document.querySelectorAll('.block-product-main')
for (const elem of elements) {
  console.log(elem.id)
}

Дополнение к ответу SwaD

Если нужно в массив собрать:

const arrId = Array.from(document.querySelectorAll('.block-product-main')).map(elem => elem.id);

БЛОГ НА HUSL

Как получить id всех тэгов с определенным классом?

Ответы (2 шт):

Дополнение к ответу SwaD