📌  相关文章
📜  HTML | DOM textContent 属性(1)

📅  最后修改于: 2023-12-03 15:01:12.201000             🧑  作者: Mango

HTML | DOM textContent 属性

HTML | DOM textContent 属性是一种用于获取或设置指定元素的文本内容的方法。该属性相对于 innerHTML 属性更为稳定，因为它不会受到 HTML 标签的影响。该属性是只读的，因此对其赋值实际上会覆盖元素内部的所有节点，而不仅仅是文本节点。

语法

以下是 textContent 属性的语法：

// 获取元素的文本内容
element.textContent;

// 设置元素的文本内容
element.textContent = text;

其中：

  • element：表示 HTML 元素。
  • text：要设置为元素文本内容的文本字符串。
示例

以下示例演示了如何使用 textContent 属性获取 HTML 元素的文本内容：

<!DOCTYPE html>
<html>
    <head>
        <title>示例</title>
    </head>
    <body>
        <div id="myDiv">
            <p>Hello, World!</p>
        </div>
        <script>
            // 获取文本内容
            var myDiv = document.getElementById("myDiv");
            var text = myDiv.textContent;
            
            // 输出文本内容
            console.log(text); // => Hello, World!
        </script>
    </body>
</html>

以上示例中，使用 textContent 属性获取了 id 为 myDiv 的 div 元素的文本内容，并将其输出到控制台。

以下示例演示了如何使用 textContent 属性设置 HTML 元素的文本内容：

<!DOCTYPE html>
<html>
    <head>
        <title>示例</title>
    </head>
    <body>
        <div id="myDiv">
            <p>Hello, World!</p>
        </div>
        <script>
            // 设置文本内容
            var myDiv = document.getElementById("myDiv");
            myDiv.textContent = "Hello, JavaScript!";
        </script>
    </body>
</html>

以上示例中，使用 textContent 属性将 id 为 myDiv 的 div 元素的文本内容设置为 "Hello, JavaScript!"。

总结

HTML | DOM textContent 属性是用于获取或设置 HTML 元素文本内容的属性。由于不受 HTML 标签的影响，因此通常比 innerHTML 属性更为稳定。虽然 textContent 属性是只读的，但是将其设置为某个文本字符串实际上会覆盖元素内部的所有节点，因此需要谨慎使用。