javascript - 如何获取元素的孩子，然后是孩子的 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>

Answer 2

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

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

希望这可以帮助....