如何获取数组中节点属性值？
如何获取数组中节点属性值？
提问于 2019-01-07 08:15:48
我尝试获取数组中图像的函数属性值，但控制台显示"item.getAttribute is not a src“错误。
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值替换它们？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-07 08:18:08
使用Array.from并将来自getElementsByClassName的HTMLCollection传递给它，并使用映射函数(Array.from的第二个参数)从每个元素获取src：
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="">
Stack Overflow用户
发布于 2019-01-07 08:19:26
检查你的控制台，地图不是图像的函数。首先需要使用Object#values将HTMLCollection转换为数组。
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="">
Stack Overflow用户
发布于 2019-01-07 08:31:46
一种方法是将getElementByClassName()方法返回的HTMLCollection转换为数组。您可以使用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="">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54067139
复制相关文章
相似问题