Question

我渲染了几个仪表板页面，并为一个页面编写了视图元素，如下所示：

<td class="secondaryTabSelected" title="Pace">
        <span tabindex="0">Pace</span>
</td>

我想在用户点击名为“Pace”的特定标签标题后，使用Javascript从上面提取名为“Pace”的名称。我怎样才能做到这一点？

我尝试过：

var a = document.getElementsByClassName('secondaryTabSelected')[0];
var b = a.getElementsByClassName("child")[0].innerHTML;
alert(b);     //assume b is my extracted text

Answer 1

在尝试查询DOM元素时，

document.querySelectorAll()通常是一个更好的函数。它本质上允许您使用CSS选择器语法来执行更复杂的查询（非常像jQuery）并且支持IE8。

在你的情况下：

var spanElement = document.querySelectorAll(".secondaryTabSelected span")[0];

alert(spanElement.innerText);

应该执行您想要实现的目标。

Answer 2

您的代码中存在两个问题：

td需要嵌套在节点中，否则浏览器将删除标记。
你没有将孩子放在html

您可以删除第一行并在目标节点中添加类direclty，也可以使用childNodes代替

 var a = document.getElementsByClassName('secondaryTabSelected')[0];

 console.log(a); 

 var b = a.childNodes[1].innerHTML

 console.log(b);

<div class="secondaryTabSelected" title="Pace">
        <span tabindex="0">Pace</span>
</div>

使用javascript从类中提取文本

2 个答案: