JavaScript 获取元素的文本

在本文中，我们提供了一个HTML文档，任务是获取元素的文本内容。有两种方法用于获取元素，如下所讨论：

HTML DOM textContent 属性： 此属性设置/返回定义节点及其所有后代的文本内容。通过设置 textContent 属性，子节点被删除并用指定的字符串替换。

语法：

返回节点的文本内容。

node.textContent

设置节点的文本内容。

node.textContent = text

HTML DOM innerText Property : 此属性设置/返回定义的节点及其所有后代的文本内容。通过设置innerText属性，任何子节点都将被移除并替换为一个具有指定字符串的Text节点。

语法：

返回节点的文本内容。

node.innerText

设置节点的文本内容。

node.innerText = text

示例1： 此示例使用 textContent属性 获取内容。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        JavaScript Get the text of a span element
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
 
    <span id="GFG_Span" style="font-size: 15px; 
                               font-weight: bold;">
        This is text of Span element.
    </span>
 
    <br><br>
 
    <button onclick="gfg_Run()">
        Click here
    </button>
 
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;">
    </p>
 
    <script>
        let span = document.getElementById("GFG_Span");
        let el_down = document.getElementById("GFG_DOWN");
 
        function gfg_Run() {
            el_down.innerHTML = span.textContent;
        }        
    </script>
</body>
</html>

输出：

JavaScript 获取元素的文本

示例2： 此示例通过使用 innerText属性 来获取内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        JavaScript Get the text of a span element
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <span id="GFG_Span" style="font-size: 15px; 
                               font-weight: bold;">
        This is text of Span element.
    </span>
 
    <br><br>
 
    <button onclick="gfg_Run()">
        Click here
    </button>
 
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;">
    </p>
 
    <script>
        let span = document.getElementById("GFG_Span");
        let el_down = document.getElementById("GFG_DOWN");
 
        function gfg_Run() {
            el_down.innerHTML = span.innerText;
        }        
    </script>
</body>
</html>

输出：

JavaScript 获取元素的文本