获取节点的内部文本

Question

我无法获取特定节点的内部文本。我添加了我正在使用的示例节点以及我想出的javascript。如果我将其记录到控制台，则javascript可以返回此<span id="goal_left">3 goals lect</span>。如果我将innerText添加到javascript示例中，它将不会向控制台返回任何内容。有任何想法如何获取此文本？

HTML

<span id="goal_left">3 goals lect</span>

javascript：这些示例返回<span id="goal_left">3 goals lect</span>

document.getElementById("goal_left");

document.querySelectorAll("span#goal_left")[0];

javascript：这些示例不返回任何内容

document.getElementById("goal_left").innerText;

document.querySelectorAll("span#goal_left")[0].innerText;

Answer 1

可能是最简单的方法：

document.querySelectorAll("span#goal_left")[0].firstChild.nodeValue;

虽然如果你总是想要querySelectorAll()返回的第一个节点，你可以简单地使用：

document.querySelector("span#goal_left").firstChild.nodeValue;

顺便说一下，我想任何实现querySelectorAll()的浏览器都可能实现textContent，给出：

document.querySelector("span#goal_left").textContent;

只是提供跨浏览器选项：

var textProperty = 'textContent' in document ? 'textContent' : 'innerText';
document.getElementById('goal_left')[textProperty]

Answer 2

innerHTML属性可能是您正在寻找的内容。它将HTML代码保存在元素中作为字符串。

Answer 3

document.getElementById（“goal_left”）。innerHTML而不是innerText。

此外，您可能希望使用jQuery来操作DOM元素，它更容易且更不容易出错。