网页获取特定图片src时出现Uncaught TypeError错误，求排查解决

错误原因 #

你写的JavaScript代码存在逻辑错误：

• document.getElementsByClassName("abc")[0]已经直接获取到了目标<img>元素（因为class="abc"就是加在这个img标签上的）。
• 紧接着你又调用getElementsByTagName("img")[0]，试图从这个img元素内部找子级img标签，但img是自闭合标签，不存在子元素，所以这一步返回undefined。
• 对undefined调用getAttribute方法，就触发了Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')错误。

解决方法 #

方法1：修正元素获取逻辑 #

直接使用已获取到的img元素读取src属性即可：

<script>
  var pic = document.getElementsByClassName("abc")[0];
  var src = pic.getAttribute('src');
  console.log(src);
</script>

方法2：使用更简洁的选择器 #

用querySelector可以更精准地获取元素，代码更简洁：

<script>
  var pic = document.querySelector(".abc");
  // 两种读取src的方式都可行
  var src = pic.getAttribute('src');
  // 或者直接用pic.src（会返回完整的绝对路径）
  // var src = pic.src;
  console.log(src);
</script>

额外注意：确保DOM加载完成 #

如果你的script标签放在<head>里，可能会因为DOM还没加载完成导致获取不到元素，这时候可以把script放在<body>标签的末尾，或者用DOM加载完成事件包裹代码：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var pic = document.querySelector(".abc");
    var src = pic.getAttribute('src');
    console.log(src);
  });
</script>

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