Javascript 从div获取img元素的src？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11171520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get src of img element from div?
提问by Max Ng
I want to get the src of the img element in HTML. It looks like this:
我想获取 HTML 中 img 元素的 src。它看起来像这样：
<div class="image_wrapper" id="this_one">
<img src="Images/something.jpg" />
</div>
It's very simple when I put an ID in img, and get this src very easy.
当我在 img 中放置一个 ID 时，这非常简单，并且很容易获得这个 src。
But the problem is when I get src of img from div element.
但问题是当我从 div 元素获取 img 的 src 时。
var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);
I need to get this URL in string. But not worth.
我需要以字符串形式获取此 URL。但不值得。
回答by James Black
Why not try something like this:
为什么不尝试这样的事情：
var someimage = document.getElementById('this_one');
var myimg = someimage.getElementsByTagName('img')[0];
var mysrc = myimg.src;
For more on using getElementsByTagName you may want to look at:
有关使用 getElementsByTagName 的更多信息，您可能需要查看：
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
There is some error checking I didn't do here, but I am just trying to show how you can do it.
有一些我没有在这里做的错误检查，但我只是想展示你如何做到这一点。
回答by Nato
Or even simpler :
或者更简单：
document.getElementById('yourimageID').getElementsByTagName('img')[0].src
Works for me
为我工作
回答by Sivakumar
I know the question is asked for js which has been answered, for jquery
我知道问题是针对已回答的 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);
It might be useful for someone who looks similarly in jquery.
它可能对在 jquery 中看起来相似的人有用。
回答by Awesomeness01
First, instead of using element.firstChild, use element.children[0]. Also, instead of element.getAttribute('src'), use element.src.
首先，不要使用element.firstChild，而是使用element.children[0]。此外，代替element.getAttribute('src')，使用element.src。
Hope this helps,
希望这可以帮助，
Awesomeness01
真棒01
回答by Sakhi Mansoor
Why do we need to use jQuery if we can get the img src within the document by querySelector?
如果我们可以通过 获取文档中的 img src 为什么我们需要使用 jQuery querySelector？
Try this:
尝试这个：
document.querySelector('[src*="Images/something.jpg"]')
P.S.: jQuery has 94 kb minified file size. Please don't include it unless there's a requirement.
PS：jQuery 有 94 kb 的缩小文件大小。除非有要求，否则请不要包含它。
回答by babinik
The problem is that you have the space characters between the divand imgtags. That is why the first element of the div is not the image but the text - which has no method getAttribute.
问题是您在div和img标签之间有空格字符。这就是为什么 div 的第一个元素不是图像而是文本 - 它没有方法getAttribute。
You can remove spaces and use your js as it was:
您可以删除空格并按原样使用 js：
<div class="image_wrapper" id="this_one"><img src="Images/something.jpg" /></div>
it will be working:
它将工作：
var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);
You can get the image tag from your's div using getElementsByTagName('img')as following:
您可以使用getElementsByTagName('img')以下方法从您的 div 中获取图像标签：
var divEl = document.getElementById('this_one'),
src = divEl.getElementsByTagName('img')[0].src;
The above will solve your task.
以上将解决您的任务。
More you can get from here Scripting Documents, I advise you to read this chapter.
你可以从这里获得更多的脚本文档，我建议你阅读这一章。
