如何获取元素的 child 然后获取 child 的 src

Question

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

如何获取元素的 child 以及准确的标签名称（在本例中为 img）？
如何获得这个 child 的属性？

下一个不起作用：

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

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

非常感谢您的帮助。

Answer 1

getElementsByTagName returns 一个 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);

希望这对您有所帮助....

如何获取元素的 child 然后获取 child 的 src

How get element's child and then child's src

javascript

getattribute