Реально ли в 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 hrefs = Array.from(
  document.querySelectorAll('a'),
  n => n.getAttribute('href')
);

или

const hrefs = [].map.call(
  document.getElementsByTagName('a'),
  n => n.attributes.href.value
);

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.