获取<img> 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访问第一个孩子而不是使用:

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;