Как получить значения атрибутов узлов в массиве?

Question

Я пытаюсь получить значения атрибута src изображений в массиве, но консоль показывает ошибку "item.getAttribute не является функцией".

HTML

<img src="placeholder.jpg" class="image" data-src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/f474c412850850.56033e5e60fd8.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/2c/09/bd/2c09bdd34dac867792321898f6635e2c.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/a7/e6/9a/a7e69a71125bb231adb1eceb50a60500.jpg" alt="">

JS

let image = document.getElementsByClassName('image');

const images = [];
images.push(image);

(function assignValidSource() {
    const sources = images.map((el) => el.getAttribute('src'));

    // do some other stuff with src later
})();

Я могу получить значение src, только если проверил его только для одного элемента в этом массиве:

const sources = images.map((el) => el[0].getAttribute('src'));

Как я могу получить src значения для всех изображений в этом массиве, чтобы я мог заменить их позже на data-src значения?

Answer 1

Проверьте вашу консоль, карта не является функцией изображений. Сначала вам нужно конвертировать вашу коллекцию HTMLCol в массив со значениями Object #.

const images = document.getElementsByClassName('image');

const res = Object.values(images).map(i=>i.src));

console.log(res);

<img src="placeholder.jpg" class="image" data-src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/f474c412850850.56033e5e60fd8.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/2c/09/bd/2c09bdd34dac867792321898f6635e2c.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/a7/e6/9a/a7e69a71125bb231adb1eceb50a60500.jpg" alt="">

Чтобы переключить src и data-src:

const images = document.getElementsByClassName('image');

Object.values(images).forEach(i=>i.src = i.getAttribute('data-src'));

<img src="placeholder.jpg" class="image" data-src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/f474c412850850.56033e5e60fd8.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/2c/09/bd/2c09bdd34dac867792321898f6635e2c.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/a7/e6/9a/a7e69a71125bb231adb1eceb50a60500.jpg" alt="">

Answer 2

Одним из подходов будет преобразование HTMLCollection , возвращенного методом getElementByClassName () , в массив. Для этого вы можете использовать оператор распространения , как показано в следующем примере:

let image = document.getElementsByClassName('image');

(function assignValidSource() {
    const sources = [...image].map(el => el.getAttribute('src'));
    console.log(sources);

    // do some other stuff with src later
})();

<img src="placeholder.jpg" class="image" data-src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/f474c412850850.56033e5e60fd8.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/2c/09/bd/2c09bdd34dac867792321898f6635e2c.jpg" alt="">
<img src="placeholder.jpg" class="image" data-src="https://i.pinimg.com/originals/a7/e6/9a/a7e69a71125bb231adb1eceb50a60500.jpg" alt="">

Answer 3

Используйте Array.from и передайте ему HTMLCollection из getElementsByClassName, и используйте функцию отображения (второй аргумент Array.from), чтобы получить src s от каждого элемента:

const sources = Array.from(
  document.getElementsByClassName('image'),
  img => img.getAttribute('src')
);
console.log(sources);

<img src="placeholder1.jpg" class="image" data-src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/f474c412850850.56033e5e60fd8.jpg" alt="">
<img src="placeholder2.jpg" class="image" data-src="https://i.pinimg.com/originals/2c/09/bd/2c09bdd34dac867792321898f6635e2c.jpg" alt="">
<img src="placeholder3.jpg" class="image" data-src="https://i.pinimg.com/originals/a7/e6/9a/a7e69a71125bb231adb1eceb50a60500.jpg" alt="">

Если вы хотите построить массив из getElementsByClassName, либо используйте Array.from (как и выше, но без функции отображения), либо распространите его в массив:

const imageArray = [...document.getElementsByClassName('image')];

или используйте простой цикл for, чтобы поместить каждый элемент в массив:

const imageArray = [];
const collection = document.getElementsByClassName('image');
for (let i = 0; i < collection.length; i++) {
  imageArray.push(collection[i]);
}

Но часто вы можете избежать таких промежуточных переменных, используя Array.from или вызывая функцию массива, такую ​​как Array.prototype.map:

const sources = Array.prototype.map.call(
  document.getElementsByClassName('image'),
  img => img.getAttribute('src')
);
console.log(sources);

<img src="placeholder1.jpg" class="image" data-src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/f474c412850850.56033e5e60fd8.jpg" alt="">
<img src="placeholder2.jpg" class="image" data-src="https://i.pinimg.com/originals/2c/09/bd/2c09bdd34dac867792321898f6635e2c.jpg" alt="">
<img src="placeholder3.jpg" class="image" data-src="https://i.pinimg.com/originals/a7/e6/9a/a7e69a71125bb231adb1eceb50a60500.jpg" alt="">