JavaScript获取li标签内的h2标签并返回

Question

我希望使用javascript在li标签中获取h2标签，而不是jquery。目前的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');

那么这个问题该如何解决呢？

- user2023106

---

.getElementsByTagName() 返回一个 NodeList。NodeList 是一个包含元素节点的列表对象。 - Andreas

Answer 1

我认为getElementsByTagName会返回一个数组。因此，对于第二个调用，您需要编写以下内容：

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

访问第一个找到的li：

要访问第一个找到的li：

- Bill Effin Murray

---

我们已经在for循环中使用了迭代。但是我们仍然收到TypeError错误：elms.getElementsByTagName不是一个函数。 - user2023106

然后在您的迭代中，用您的增量变量替换[0]。for(var i=0;i<10;i++){ elems[i].getElementsBy..... } - Bill Effin Murray

@Daedalus 当然，“它仍然是一个数组”，我不是说getElementsByTagName返回一个数组了吗？ - Bill Effin Murray

Answer 2

编辑2：

您需要使用这个（使用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 (使用alert替代log)

解释:

第一行代码创建了一个节点列表（在数组中表示），包含了所有的<li>元素，用数字来表示（当然，第一个元素从0开始）。

第二行代码也是同样的操作，所以要访问它需要指定要使用的单个节点。

因此，你需要附加[0]来访问页面上第一个（在这种情况下，唯一的）li内部的第一个（唯一的）h2。

- Deryck

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/zh-CN/docs/Web/API/NodeList），其中包含与CSS选择器li h2匹配的所有元素。

或者，如果您只想查找单个元素，可以使用.querySelector()，它将返回对匹配您选择器的第一个元素的引用。

- Ben Jackson