Как я могу инициализировать все элементы DOM, которые совместно используют класс, и сохранить их в объекте?

Question

Скажем, у меня есть список элементов, которые разделяют класс, и я хочу извлечь из этих элементов innerText и сохранить их как свойства объекта. В настоящее время я вручную инициализирую их, используя getElementById (''). InnerText et c.

Есть ли способ перебрать все элементы определенного класса и автоматически сохранить результаты как свойства объекта? Как бы я написал эту функцию?

<div>
  <p class="queue" id="para1">42</p>
  <p class="queue" id="para2">23</p>
  <p class="queue" id="para3">78</p>
</div>

let obj = {
  var1: 42,
  var2: 23,
  var3: 78
}

Выше приведен результат, который я ищу, или аналогичный.

Answer 1

Используйте .querySelectorAll(), чтобы выделить все элементы в структуру типа массива (a NodeList ), а затем используйте .forEach() до l oop закончился при формировании объекта

let obj = {};

document.querySelectorAll('.queue').forEach((ele, i) => {
  obj['var' + (i + 1)] = ele.textContent;
});

console.log(obj);

<div>
  <p class="queue" id="para1">42</p>
  <p class="queue" id="para2">23</p>
  <p class="queue" id="para3">78</p>
</div>