获取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

是否有更简单的方法实现相同的功能？

- Deepak

---

如果我想获取所有li元素中包含的文本，而不仅仅是特定的一个，该怎么办？ - Dimitris Papageorgiou

Answer 1

在你的情况下：

document.getElementById('menu_selected').innerHTML

- Alsciende

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];
}

- Andy E

Answer 3

如果您可以使用jQuery，那么它归结为：

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

- Atanas Korchev

Answer 4

尝试使用 document.getElementById('menu_selected').text。

- KJ Saxena

---

在Firefox中应该是 textContent，而在IE中应该是 text。 - Amarghosh

@Amarghosh: 在IE中使用innerText，text只适用于少数元素。 - Andy E

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)

希望这能帮助到某人！

- dan.riley