如何用纯JavaScript获取div内一组图片的src属性值？

哦，我一眼就看到问题所在啦！你的循环边界条件写错了，这才导致了那个恼人的类型错误。咱们来一步步拆解和修复：

错误原因分析 #

document.getElementsByClassName("flex-figure")返回的是一个HTMLCollection，它的长度是匹配到的元素个数，而集合的索引是从0开始的。你写的循环条件是i <= elem.length，当i等于elem.length的时候，elem[i]就变成了undefined（因为最后一个元素的索引是elem.length - 1）。这时候再去调用getElementsByTagName('img')[0]，自然就会得到undefined，接着访问它的src属性就触发了Uncaught TypeError。

修复方案 #

1. 修正循环边界 #

把循环条件改成i < elem.length，确保只遍历到集合的最后一个有效索引：

var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i < elem.length; i++) {
  var imgTag = elem[i].getElementsByTagName('img')[0];
  var srcLink = imgTag.src;
  console.log(srcLink);
}

2. 更简洁的写法（推荐） #

可以用querySelectorAll直接定位到目标图片元素，代码更简洁直观，也能避免循环边界的问题：

var imgTags = document.querySelectorAll(".flex-figure img");
imgTags.forEach(function(img) {
  console.log(img.src);
});

3. 添加安全检查（可选） #

如果担心某些.flex-figure容器里没有图片，可以添加一个存在性检查，避免意外报错：

var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i < elem.length; i++) {
  var imgTag = elem[i].getElementsByTagName('img')[0];
  if (imgTag) { // 先确认img元素存在
    var srcLink = imgTag.src;
    console.log(srcLink);
  }
}

这样修改后，就能正常获取到图片的src属性值啦！

内容的提问来源于stack exchange，提问作者Suresh.W