HTML - DOM textContent 属性

HTML DOM 的textContent属性用于访问和更新HTML元素及其所有子元素的文本内容作为一个单一字符串。

访问textContent时，它返回元素及其后代的组合文本，不包括任何HTML标签。

语法

以下是HTML DOM 的textContent（访问内容）属性的语法：

element.textContent;

要使用新内容更新现有的HTML内容，请使用以下语法：

element.textContent = new_text;

其中new_text是用于更新元素内容的文本。

参数

此属性不接受任何参数。

返回值

textContent属性返回一个字符串值，该值包含在HTML元素及其所有子元素中找到的所有文本。如果未找到文本，则返回'null'。

示例 1：更新文本内容

以下是HTML DOM textContent属性的基本示例。它更新<h1>元素的文本内容：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM textContent</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<h2>textContent Property</h2>
<p>Click the below button to change its text content..</p>
<h1 id="myHeading">Hello from Us</h1>
<button onclick="updateText()">Change Text</button>
<script>
   function updateText() {
      // Get the element by its ID
      var Us=document.getElementById('myHeading');
      // Update the text content
      Us.textContent='Welcome to Our Website';
   }
</script>
</body>
</html>

上面的程序在单击按钮时更新“h1”元素的文本内容。

示例 2：显示组合文本内容

以下是HTML DOM textContent属性的另一个示例。我们使用此属性来访问和显示<div>元素的组合文本内容，包括其所有子元素：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM textContent</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<p>It displays the text content of div element.</p>
<div id="myDiv">
<p>This is a <span>paragraph</span> with 
<strong>strong</strong> emphasis.
</p>
</div>
<button onclick="displayText()">Display Text Content</button>
<p id="textContentDisplay"></p>
<script>
   function displayText() { 
      var ele=document.getElementById('myDiv');
      // Retrieve and display the text content
      var textcon = ele.textContent;
      document.getElementById('textContentDisplay').textContent = 'Text Content: ' + textcon;
   }
</script>
</body>
</html>

示例 3：检查空内容

在下面的示例中，textContent属性用于检查<div>元素的文本内容。如果未找到文本内容，则显示“未找到文本内容”。否则，它将显示可访问的文本内容：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM textContent</title>
<style>
   button{
      padding: 8px 10px;
   }
</style>
</head>
<body>
<p>Checking for empty content..</p>
<div id="myDiv"></div>
<button onclick="checkContent()">Check Content</button>
<p id="contentStatus"></p>
<script>
   function checkContent() { 
      var ele=document.getElementById('myDiv');
      
      // Check if text content exists
      var textContent = ele.textContent;
      if (textContent === '') {
         document.getElementById
         ('contentStatus').textContent = 'No text content found.';
      } else {
        document.getElementById
        ('contentStatus').textContent = 'Text Content: ' + textContent;
      }
   }
</script>
</body>
</html>

支持的浏览器

属性
textContent	是	是	是	是	是

html_dom_element_reference.htm

打印页面