如何通过JavaScript选取图片src？代码报错无法读取length属性求解决

嘿，这个报错的根源是你在获取元素集合的时候犯了个小失误，咱们一步步理清楚：

错误原因分析 #

你写的这行代码：

var list= document.querySelectorAll('.h5p-image > img').src = "file-5fa55a3d758c4.jpg";

存在两个关键问题：

• document.querySelectorAll()返回的是NodeList元素集合（类似数组的对象），它本身并没有src属性——src是单个<img>元素独有的属性。
• 这行赋值语句的最终结果是把右边的字符串"file-5fa55a3d758c4.jpg"赋值给了list变量，而不是你想要的元素集合。所以后面循环时，list其实是个字符串，完全不符合你操作图片元素的意图，自然会触发读取length的错误。

修正后的代码 #

先正确获取元素集合，再遍历每个元素进行操作：

// 第一步：获取所有符合选择器的img元素集合
var list = document.querySelectorAll('.h5p-image > img');

// 第二步：遍历集合，逐个设置属性
for (var i = 0; i < list.length; i++) {
  // 设置图片src
  list[i].src = "file-5fa55a3d758c4.jpg";
  // 设置宽度样式
  list[i].style.width = "300px";
}

如果觉得for循环有点繁琐，也可以用更简洁的forEach方法（现代浏览器均支持NodeList的forEach）：

document.querySelectorAll('.h5p-image > img').forEach(img => {
  img.src = "file-5fa55a3d758c4.jpg";
  img.style.width = "300px";
});

这样就能正确选中所有目标图片，修改它们的src和宽度啦！

内容的提问来源于stack exchange，提问作者jomskris