从 div 获取 img 元素的 src？答案

【问题标题】：Get src of img element from div?从 div 获取 img 元素的 src？
【发布时间】：2018-08-02 15:54:13
【问题描述】：

我想在 HTML 中获取 img 元素的 src。它看起来像这样：

<div class="image_wrapper" id="this_one">
        <img src="Images/something.jpg" />
</div>

在img里面放个ID就很简单了，很容易得到这个src。

但问题是当我从 div 元素中获取 img 的 src 时。

var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);

我需要以字符串形式获取此 URL。但不值得。

【问题讨论】：

你在 someimage 中得到了什么？

标签： javascript html

【解决方案1】：

为什么不试试这样的：

var someimage = document.getElementById('this_one');
var myimg = someimage.getElementsByTagName('img')[0];
var mysrc = myimg.src;

有关使用 getElementsByTagName 的更多信息，您可能需要查看：

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

这里有一些我没有做的错误检查，但我只是想展示你如何做到这一点。

【讨论】：

【解决方案2】：

甚至更简单：

document.getElementById('yourimageID').getElementsByTagName('img')[0].src

为我工作

【讨论】：

【解决方案3】：

问题是div 和img 标记之间有空格字符。这就是为什么 div 的第一个元素不是图像而是文本 - 它没有方法 getAttribute。

您可以删除空格并按原样使用您的 js：

<div class="image_wrapper" id="this_one"><img src="Images/something.jpg" /></div>

它将起作用：

var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);

您可以使用 getElementsByTagName('img') 从您的 div 中获取图像标签，如下所示：

var divEl = document.getElementById('this_one'),
    src = divEl.getElementsByTagName('img')[0].src;

以上将解决您的任务。

更多你可以从这里Scripting Documents获得，我建议你阅读这一章。

【讨论】：

【解决方案4】：

我知道这个问题是针对已经回答的js，针对jquery的

var image = $('#this_one img')[0];       // $('#this_one img') this will return the img array. In order to get the first item use [0]
var imageSrc = image.src;
alert(imageSrc);

它可能对在 jquery 中看起来相似的人有用。

【讨论】：

【解决方案5】：

首先，不要使用 element.firstChild ，而是使用 element.children[0] 。另外，不要使用 element.getAttribute('src') ，而是使用 element.src 。

希望对你有帮助，

真棒01

【讨论】：

【解决方案6】：

如果我们可以通过querySelector获取文档内的img src，为什么还要使用jQuery？

试试这个：

document.querySelector('[src*="Images/something.jpg"]')

P.S.：jQuery 有 94 kb 的最小文件大小。除非有要求，否则请不要包含它。

【讨论】：