如何得到元素的孩子,然后是孩子的src

Question

希望有人可以帮忙解决这个问题:

我的演示

1. 如何获得具有确切标签名称的元素的孩子(在这种情况下img)？
2. 我怎样才能获得这个孩子的属性？

下一个不起作用:

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

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

在任何帮助下提前很多.

Answer 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>