javascript - 获取 src 并通过类设置为变量(id 不可用)

Question

我试图从给定的 HTML 代码中获取特定图像的 URL

<div class="image_div_name">
    <img src="http://www.thisistheimage.com" alt="">
</div>

所以这是我当前应该解决它的代码:

var picture = document.getElementsByClassName("image_div_name");
var src = picture[0];

如果我现在通过 console.log 打印图片，我会得到正确的 div:

<div class="image_div_name">
    <img src="http://www.thisistheimage.com" alt="">
</div>

但是，如果我想访问 src，它似乎不起作用:

var src = picture[0].src;
console.log(src);

回馈:

undedfined

如果我尝试:

console.log(picture[0].innerHTML)

它变得更好，我收到:

<img src="http://www.thisistheimage.com" alt="">

但是我正在寻找仅获取 URL 本身的方法，如:

http://www.thisistheimage.com

你能帮忙吗？我做错了什么？

Answer 1

因为 .image_div_name 没有 src 属性，需要选择子 img 元素。

鉴于您提供的 HTML，您可以使用 picture[0].children[0] 访问它:

var picture = document.getElementsByClassName("image_div_name");
var src = picture[0].children[0].src;

除了使用 picture[0].children[0]，您还可以使用 picture[0].firstElementChild 来访问第一个 child :

var picture = document.getElementsByClassName("image_div_name");
var src = picture[0].firstElementChild.src;

---

由于上述两种方法都不能保证 img 元素将被选中(因为您正在选择第一个子元素)，因此最好使用以下方法:

var src = document.querySelector('.image_div_name > img').src;

..或者:

var picture = document.querySelectorAll(".image_div_name > img");
var src = picture[0].src;