如何获取数组中节点属性的值？

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

使用 Array.from 并将来自 getElementsByClassName 的 HTMLCollection 传递给它，并使用映射函数（Array.from 的第二个参数）从每个对象中获取 srcs元素：

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="">

Answer 2

检查你的控制台，地图不是图像的功能。您首先需要将 HTMLCollection 转换为带有 Object#values.

的数组

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 3

一种方法是为此转换 HTMLCollection returned by the method getElementByClassName() to an array. You can use the spread operator，如下例所示：

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="">

如何获取数组中节点属性的值？

How to get values of nodes attributes in an array?

javascript

arrays

getattribute

ecmascript-6