获取 li 元素的文本

Question

<ul class="leftbutton" >
    <li id="menu-selected">Sample 1</li>
    <li>Sample 2</li>
    <li>Sample 3</li>
    <li>Sample 4</li>
    <li>Sample 5</li>
</ul>

我想获取 id="menu-selected" 的 li 项目的文本。
现在我正在做类似的事情

document.getElementById('menu_selected').childNodes.item(0).nodeValue

有没有更简单的方法来做同样的事情？

Answer 1

在你的情况下：

document.getElementById('menu_selected').innerHTML

Answer 2

如果LI元素中包含HTML而您只想获取文本，则需要innerText或textContent 。

var liEl = document.getElementById('menu_selected');
var txt = liEl["innerText" in liEl ? "innerText" : "textContent"];

为避免每次都使用此条件语句，您只需声明一个全局变量：

var textContentProp = "innerText" in document.body ? "innerText" : "textContent";
function getText()
{
    return document.getElementById('menu_selected')[textContentProp];
}

Answer 3

如果你可以使用jQuery，那就归结为

var text = $('#menu_selected').text();

Answer 4

尝试document.getElementById('menu_selected').text

Answer 5

我想知道如何从更广泛的意义上做到这一点，而不是通过 ID 选择并遇到了这个问题。

const listItemTextContent = Array.from(document.querySelectorAll("li"))

const listItemTextArray = 
    listItemTextContent.map(itemText => itemText.firstChild.data)

console.log(listItemTextArray);

或者您可以使用压缩/链式替代方案！

const listItemTextContent = 
    Array
        .from(document.querySelectorAll("li"))
        .map(itemText => itemText.firstChild.data)

console.log(listItemTextContent)

我希望这对某人有帮助！