如何获取元素的孩子，然后是孩子的 src答案

【问题标题】：How get element's child and then child's src如何获取元素的孩子，然后是孩子的 src
【发布时间】：2015-06-18 06:06:00
【问题描述】：

希望有人可以帮助解决这个问题：

如何获得具有准确标签名称的元素的子元素（在本例中为 img）？
如何获取这个孩子的属性？

下一步不起作用：

var banner = document.getElementById('banner');
var imgElement = banner.getElementsByTagName('img');
var imgSrc = imgElement.getAttribute('src');

最后一行返回imgElement.getAttribute is not a function。我想这是因为第二行，我得到了object HTMLCollection...但是为什么我得到这个以及我必须做些什么才能得到我想要的？

非常感谢任何帮助。

【问题讨论】：

var imgElement = banner.getElementsByTagName('img')[0];
What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?的可能重复

标签： javascript getattribute

【解决方案1】：

getElementsByTagName 返回一个 HTMLCollection，所以获取数组中的第一个元素，然后是它的 src

var imgSrc = imgElement[0].getAttribute('src');

var banner = document.getElementById('banner');
var imgElement = banner.getElementsByTagName('img');
var imgSrc = imgElement[0].getAttribute('src');
alert(imgSrc);

<a href="#" id="banner">
  <img src="http://placekitten.com/g/200/300" alt="kitten" />
</a>

另一种解决方案是使用 querySelector（会慢一点）

var imgElement = document.querySelector('#banner img');
var imgSrc = imgElement.getAttribute('src');
alert(imgSrc);

var imgElement = document.querySelector('#banner img');
var imgSrc = imgElement.getAttribute('src');
alert(imgSrc);

<a href="#" id="banner">
  <img src="http://placekitten.com/g/200/300" alt="kitten" />
</a>

【讨论】：

【解决方案2】：

另一种使用儿童的替代解决方案。

var banner = document.getElementById('banner');
var childImg = banner.children[0];
var imgSrc = childImg.getAttribute('src');
alert(imgSrc);

希望这会有所帮助....

【讨论】：

谢谢 :) 但我为自己选择了 Arun P Johny 的第二个解决方案。更容易理解，写得更少：）但无论如何都比x！