Реально ли в JavaScript, сразу получить в коллекцию значения атрибутов?

Question

[Shimpanze]

Добрый день!

Можно ли в JavaScript, сразу получить в массив значения атрибутов (например, значения атрибута href у ссылок)?

Когда я пытаюсь получить все ссылки на странице, все ссылки находятся:

links = document.querySelectorAll('a');
console.log(links);

Но, когда я пытаюсь сразу в найденных ссылках найти нужные мне значения атрибутов, все валится с ошибкой:

links_href = document.querySelectorAll('a').getAttribute('href');
console.log(links_href);

Почему?

Спасибо!

Answer 1

[0xD34F]

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

const links = document.querySelectorAll('a');
// или
const links = document.getElementsByTagName('a');

Как достать значение атрибута:

const getHref = el => el.getAttribute('href');
// или
const getHref = el => el.attributes.href.value;

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

const hrefs = Array.from(links, getHref);

// или

const hrefs = Array.prototype.map.call(links, getHref);

// или

const hrefs = [];
for (const n of links) {
  hrefs.push(getHref(n));
}

// или

const hrefs = [];
for (let i = 0; i < links.length; i++) {
  hrefs[i] = getHref(links[i]);
}

Answer 2

[Константин Китманов]

Потому что document.querySelectorAll('a') возвращает коллекцию, объект типа NodeList, у которого нет метода getAttribute (он есть только отдельных узлов).
Решение см. в ответе выше:)

Answer 3

[Павел Корнилов]

var links = document.querySelectorAll('a'),
links_href = document.querySelectorAll('a[href]');

console.log(links_href);

А чтобы работать с отдельными элементами любой из коллекций - их нужно циклом перебирать. Удобнее всего forEach.