您如何使用JavaScript访问html元素中的数据

问题描述 投票：0回答：2

我知道这是一个愚蠢的问题。但是，天哪，这是行不通的。这是一个非常基本的示例：

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

如何获取包含段落内文本的变量？此代码不起作用。显然，段落对象没有.value属性。这是为什么？我正在使用Visual Studio代码，并在Google chrome上运行它，如果这很重要。

javascript html dom
2个回答
0
投票

您可以使用.innerHTML方法。

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

0
投票

Element.value不代表您所认为的。具体是指form input elements或HTML elements' attributes' value的值。

这里还有其他一些尝试的方法：

使用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样式，因此读取innerText的值将触发重排以确保最新的计算样式。 （回流在计算上可能会非常昂贵，因此应尽可能避免。）
  • 与textContent不同，在Internet Explorer（版本11及更低版本）中更改innerText会从元素中删除子节点，并永久破坏所有后代文本节点。无法再将节点再次插入任何其他元素或同一元素中。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.