Question

我想使用javascript而不是jquery在li标签内获取h2标签。目前这是html：

<li vriend="Alvin Heijmans" select="">
     <img class="portret" src="img/alvin.png" />
     <div class="addbutton"></div>
     <h2>Alvin Heijmans</h2>
     <p>Utrecht</p>
</li>

现在我想使用以下javascript选择li里面的h2标签：

var elms = document.getElementsByTagName('li');
var names = elms.getElementsByTagName('h2');

控制台出现以下错误：

TypeError: elms.getElementsByTagName is not a function
var names = elms.getElementsByTagName('h2');

那怎么能解决呢？

Answer 1

我相信getElementsByTagName将返回一个数组。所以对于第二个电话，你需要写：

var names = elms[0].getElementsByTagName('h2');

访问第一个找到的li

Answer 2

EDIT2：

您需要使用此（通过for()循环捕获页面上的所有li和h2）：

var elms = document.getElementsByTagName('li'),
    names = [];
for (var i = 0, j = elms.length; i<j; i++) {
    names = elms[i].getElementsByTagName('h2');
}
alert(names[0].innerHTML);

JSFiddle (has alert instead of log)

<强>解释

你的第一行指定一个node list（在数组内部表示），其中包含所有<li>元素，由数字表示（当然，从第一个开始为0）。 / p>

第二行的功能相同，因此访问它需要您指定要使用的单个节点

因此，您追加[0]来首先访问页面上h2（第一个/唯一）[0]内的li {仅限{}}}。 / p>

Answer 3

您可以使用.querySelectorAll()：

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll http://caniuse.com/queryselector

像这样：

var names = document.querySelectorAll('li h2');

将返回一个NodeList（https://developer.mozilla.org/en-US/docs/Web/API/NodeList），其中包含与CSS选择器匹配的所有元素：li h2。

或者，如果你只是在寻找单个元素，你可以使用.querySelector()来返回对与你的选择器匹配的第一个元素的引用。

Javascript在li标签内获取h2标签并将其返回

3 个答案:

EDIT2：

JSFiddle (has alert instead of log)