Получение внутреннего текста node

Мне трудно получить внутренний текст конкретного node. Я добавил пример node, с которым я работаю, и 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;

Ответ 1

Вероятно, самый простой способ:

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

Если вам всегда нужен первый node, возвращаемый 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]

Ответ 2

Свойством innerHTML может быть то, что вы ищете. Он содержит код HTML внутри элемента в виде строки.

Ответ 3

document.getElementById( "goal_left" ). innerHTML вместо innerText.

Также вы можете использовать jQuery для управления элементами DOM, это намного проще и меньше подвержено ошибкам.