Как получить значения всех элементов с одним классом?

Question

Имеется страница, на которой есть множество элементов с одинаковыми классами, с которых нужно вытащить значения классов "data-id=", "data-float=", "data-original-title" для каждого элемента отдельно. Опыта вообще не имею, но очень хочу понять как оно работает. Буду премного благодарен за помощь. Скрин структуры страницы ниже. По сути это нужно, чтобы полученные данные сравнить с переменной и при совпадении одного из элементов с ней - покрасить фон, к примеру

Answer 1

const output = [];

[...document.querySelectorAll('.list__item')].forEach(item => {
  output.push({
    price: item.getAttribute('data-price'),
    float: item.getAttribute('data-float')
  });
});

console.log(output);

<ul class="list">
  <div class="list__item" data-price="100" data-float="1">1</div>
  <div class="list__item" data-price="200" data-float="2">2</div>
  <div class="list__item" data-price="300" data-float="3">3</div>
</ul>

Answer 2

console.log([...document.querySelectorAll(".just4fest")].map(e => ({
  dataId: e.getAttribute('data-id'),
  dataSrc: e.getAttribute('data-src')
})));

<div class="just4fest" data-id="1" data-src="https://ru.stackoverflow.com/questions/1"></div>
<div class="just4fest" data-id="2" data-src="https://ru.stackoverflow.com/questions/2"></div>
<div class="just4fest" data-id="3" data-src="https://ru.stackoverflow.com/questions/3"></div>
<div class="just4fest" data-id="4" data-src="https://ru.stackoverflow.com/questions/4"></div>
<div class="just4fest" data-id="5" data-src="https://ru.stackoverflow.com/questions/5"></div>
<div class="just4fest" data-id="6" data-src="https://ru.stackoverflow.com/questions/6"></div>

Как верно подметил @Alexander Lonberg, запись можно сократить, используя деструктуризацию. В таком случае вы получите все атрибуты с префиксом data-.

console.log([...document.querySelectorAll(".just4fest")].map(({dataset}) => dataset));

<div class="just4fest" data-id="1" data-src="https://ru.stackoverflow.com/questions/1"></div>
<div class="just4fest" data-id="2" data-src="https://ru.stackoverflow.com/questions/2"></div>
<div class="just4fest" data-id="3" data-src="https://ru.stackoverflow.com/questions/3"></div>
<div class="just4fest" data-id="4" data-src="https://ru.stackoverflow.com/questions/4"></div>
<div class="just4fest" data-id="5" data-src="https://ru.stackoverflow.com/questions/5"></div>
<div class="just4fest" data-id="6" data-src="https://ru.stackoverflow.com/questions/6"></div>

БЛОГ НА HUSL

Как получить значения всех элементов с одним классом?

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