获取<img/> src并通过类设置为变量（id不可用）

Question

我试图从给定的HTML代码中获取某个图片的网址

<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="">

但是，我正在寻找仅仅获取网址的方法，如：

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：

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;

Answer 2

您的目标不是img，而是定位<div>，这就是innerHTML属性保留<img>的原因。 （图片没有innerHTML）。

选择<img>。我用.querySelectorAll()：

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

Answer 3

你可以这样做（如果你100％确定你的div只有一个孩子<img>）：

var node = document.getElementsByClassName("image_div_name");
var src = node[0].children[0].src;
console.log(src);

Answer 4

虽然安迪的回答很有帮助但我建议。

var picture = document.getElementsByClassName("image_div_name")[0].getElementsByTagName("img")[0];
var src = picture.getAttribute('src');