獲取 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)

我希望這對某人有幫助！