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

Question

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

My Demo

1. 如何让元素的子元素具有确切的标记名称（在本例中为<div id="row4div"> <span id="row4"> <label> Degree : </label> </span> </div>）？
2. 如何获得此孩子的属性？

下一步不起作用：

img

最后一行返回var banner = document.getElementById('banner'); var imgElement = banner.getElementsByTagName('img'); var imgSrc = imgElement.getAttribute('src'); 。我想这是因为第二行，我得到了imgElement.getAttribute is not a function ......但为什么我得到了这个以及我必须做些什么才能得到我想要的东西？

Thanx提前做了很多帮助。

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);

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