获取<img>src，并通过class设置为变量(id不可用）

Get <img> src and set as variable via class (id not available)

本文关键字：变量 id 设置 gt img lt src 获取 class      更新时间：2023-11-26

我正试图从给定的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

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

因为.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;

您的目标不是img，而是<div>，这就是为什么innerHTML属性在内部包含<img>。（图像没有innerHTML）。

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

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

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

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

尽管Andy的回答很有帮助，但我还是推荐他。

var picture = document.getElementsByClassName("image_div_name")[0].getElementsByTagName("img")[0];
var src = picture.getAttribute('src');
相关文章：