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的第二个参数）从每个元素中获取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="">

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返回的getElementByClassName()转换为数组。您可以使用spread operator，如下面的示例所示：

<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/" >    
    <S:Header />
    <S:Body xmlns:ns1="http://www.travelport.com/schema/air_v46_0" >

</S:Envelope>

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
})();

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

3 个答案: