如何使用 JavaScript 訪問 html 元素中的數據

Question

我知道這是一個愚蠢的問題。 但是，天哪，它只是不起作用。 這是一個非常基本的示例：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="test">Test</p>
        <script>
            let test = document.getElementById("test").value
            alert(test)
        </script>
    </body>
</html>

如何獲取包含段落內文本的變量？ 此代碼不起作用。 object 段落顯然沒有值屬性。 這是為什么？ 如果這很重要，我正在使用 Visual Studio 代碼並在 google chrome 上運行它。

Answer 1

Element.value並不是指您認為它所做的事情。 它具體指的是表單輸入元素的值或HTML 元素的屬性值。

這里有一些其他的選項可以嘗試：

使用HTMLElement.innerText

元素中的文本“Test”是一個名為textNode的子元素。 您可以使用Element.innerText從任何元素獲取文本值（因此在您的情況下為document.getElementById("test").innerText

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
    <p id="test">Test</p>
    <script>
        let test = document.getElementById("test").innerText; // "Test"
        alert(test)
    </script>
</body>

使用Element.innerHTML

您還可以使用.innerHTML來獲取元素的 HTML：

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
    <p id="test"><b>Test</b></p>
    <script>
        let test = document.getElementById("test").innerHTML; // "<b>Test</b>"
        alert(test)
    </script>
</body>

使用Element.textContent

您還可以使用.textContent來獲取元素的“文本內容”：

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
    <p id="test"><b>Test</b></p>
    <script>
        let test = document.getElementById("test").textContent; // "<b>Test</b>"
        alert(test)
    </script>
</body>

innerText 與 textContent （根據MDN ）：

textContent 獲取所有元素的內容，包括和元素。 相反，innerText 只顯示“人類可讀”的元素。

textContent 返回節點中的每個元素。 相反，innerText 知道樣式並且不會返回“隱藏”元素的文本。 此外，由於 innerText 將 CSS styles 考慮在內，讀取 innerText 的值會觸發回流以確保最新計算的 styles。 （回流可能在計算上很昂貴，因此應盡可能避免。）

與 textContent 不同，在 Internet Explorer（版本 11 及更低版本）中更改 innerText 會從元素中刪除子節點並永久銷毀所有后代文本節點。 不可能再將節點插入到任何其他元素或相同的元素中。

Answer 2

您可以使用.innerHTML方法。

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
    <p id="test">Test</p>
    <script>
        let test = document.getElementById("test").innerHTML;
        alert(test)
    </script>
</body>

如何使用 JavaScript 訪問 html 元素中的數據

問題描述

2 個解決方案

解決方案1
1 2019-11-20 21:52:35

使用HTMLElement.innerText

使用Element.innerHTML

使用Element.textContent

innerText 與 textContent （根據MDN ）：

解決方案2
0 2019-11-20 21:49:22

如何使用 JavaScript 訪問 html 元素中的數據

問題描述

2 個解決方案

解決方案1 1 2019-11-20 21:52:35

使用HTMLElement.innerText

使用Element.innerHTML

使用Element.textContent

innerText 與 textContent （根據MDN ）：

解決方案2 0 2019-11-20 21:49:22

解決方案1
1 2019-11-20 21:52:35

解決方案2
0 2019-11-20 21:49:22