2

誰かがこれを手伝ってくれることを願っています:

私のデモ

  1. 正確なタグ名 (この場合) で要素の子を取得するにはどうすればよいimgですか?
  2. この子の属性を取得するにはどうすればよいですか?

次は機能しません：

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

最後の行は を返しますimgElement.getAttribute is not a function。私が得た2行目のせいだと思いますobject HTMLCollection...しかし、なぜ私はこれを手に入れたのでしょうか。

助けてくれてありがとう。

4

2 に答える 2

7

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>

于 2015-06-18T06:07:29.117 に答える
2

子を使用した別の代替ソリューション。

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

お役に立てれば....

于 2015-06-18T07:32:19.223 に答える