javascript - 如何通过元素中的标签名称选择文本？

Question

我需要选择被div包装的标题h2，所以我做这样的事情this.getElementsByTagName('h2')，这是当前的 div，其中是 h2 - 它返回当前h2元素，但是当我尝试获取innerHTML或innerText返回 null 时。我究竟做错了什么？

Answer 1

它返回当前的 h2 元素，但是当我尝试获取 innerHTML 或 innerText 时，它返回 null。我究竟做错了什么？

getElementsByTagName返回 a NodeList，而不是元素。该列表没有innerHTML，但它的每个元素都有，例如：

var list = this.getElementsByTagName('h2');
if (list[0]) {
    title = list[0].innerHTML;
}

或者，如果您确定它会存在：

title = this.getElementsByTagName('h2')[0].innerHTML;

...但是如果没有找到 h2，那将引发异常。

Answer 2

两件事情：

1. 您应该捕获由返回的节点列表的第一个元素getElementsByTagName()：

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

2. 不同的浏览器使用不同的属性来检索标签内容：

   var title = h2.textContent || h2.innerText || null;
   

Answer 3

不，this.getElementsByTagName('h2')返回带有标签 name 的元素数组h2。

您必须迭代数组并访问所需的正确元素。

Answer 4

正如其他答案状态 getElementsByTagName 返回一个数组。

另一种选择是使用 querySelector （仅现代浏览器支持，因此请先检查您需要支持的内容）

在此页面上运行 querySelector 会给出以下结果：-

window.document.querySelector('h1').innerHTML //#>
"<a href="/questions/16516643/how-to-select-text-by-tag-name-in-element" class="question-hyperlink">How to select text by tag name in element?</a>"

查询选择器

查询选择器全部

Answer 5

是的，你犯了一个小错误。因为 ,this.getElementByTagName('h2')会返回一个列表（标签）。

作为你的标签是第一个元素[0]

您可以使用

var v= this.getElementsByTagName('h2');
var yourdata=v[0].innerHTML;