Как получить значения data-атрибутов элементов с определённым классом?

Question

[JP_Cool]

Есть несколько элементов a с одинаковыми классами:

<a href="#news" data-target="#dropdown1" class="dropdown-trigger">Новости</a>
<a href="#map" data-target="#dropdown2" class="dropdown-trigger">Карта</a>

Нужно получить значения их атрибутов data-target. Как это сделать?

Answer 1

[0xD34F]

О каком классе и data-атрибуте идёт речь:

const className = 'dropdown-trigger';
const attr = 'target';

Как получить элементы:

const elems = document.querySelectorAll(`.${className}`);
// или
const elems = document.getElementsByClassName(className);

Как извлечь значение атрибута из элемента:

const getAttr = el => el.dataset[attr];
// или
const getAttr = el => el.getAttribute(`data-${attr}`);
// или
const getAttr = el => el.attributes['data-' + attr].value;

Как собрать массив значений:

const attrs = Array.from(elems, getAttr);

// или

const attrs = Array.prototype.map.call(elems, getAttr);

// или

const attrs = [];
for (const n of elems) {
  attrs.push(getAttr(n));
}

// или

const attrs = [];
for (let i = 0; i < elems.length; i++) {
  attrs[i] = getAttr(elems[i]);
}

// или

const attrs = (function get(i) {
  return i < elems.length ? [ getAttr(elems[i]), ...get(i + 1) ] : [];
})(0);

Answer 2

[Дмитрий Беляев]

Array.from(document.querySelectorAll('.dropdown-trigger'), el => el.dataset.target);

Answer 3

[Bhudh]

// jQuery
$( '.dropdown-trigger' ).data( 'target' );

// ES6
[ ...document.querySelectorAll( '.dropdown-trigger' ) ].map( el => el.dataset.target );