HTML DOM textContent 属性

在 Web 开发中，我们经常需要操作 DOM 元素的文本内容。在 HTML DOM 中，有一个非常常用的属性叫做 textContent，它用于获取或设置指定元素的文本内容。

获取元素的文本内容

要获取一个元素的文本内容，可以使用 textContent 属性。例如，如果我们有一个 <div> 元素如下：

<div id="myDiv">Hello, World!</div>

我们可以通过 JavaScript 来获取这个 <div> 元素的文本内容：

const myDiv = document.getElementById('myDiv');
const textContent = myDiv.textContent;
console.log(textContent); // 输出：Hello, World!

设置元素的文本内容

除了获取元素的文本内容，我们也可以通过 textContent 属性来设置元素的文本内容。例如，我们可以将上面的 <div> 元素的文本内容修改为 "Hello, JavaScript!"：

myDiv.textContent = 'Hello, JavaScript!';

注意事项

• textContent 属性会返回元素内部的所有文本内容，包括子元素的文本内容，但不包括 HTML 标签。
• 如果需要获取包括 HTML 标签在内的所有内容，可以使用 innerHTML 属性。

示例代码

下面是一个完整的示例代码，演示了如何使用 textContent 属性来获取和设置元素的文本内容：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>textContent 示例</title>
</head>
<body>

<div id="myDiv">Hello, World!</div>

<script>
  const myDiv = document.getElementById('myDiv');
  
  // 获取元素的文本内容
  const textContent = myDiv.textContent;
  console.log(textContent); // 输出：Hello, World!
  
  // 设置元素的文本内容
  myDiv.textContent = 'Hello, JavaScript!';
</script>

</body>
</html>

通过以上示例，我们可以看到 textContent 属性的基本用法和注意事项。希望这篇文章对你理解 HTML DOM 中的 textContent 属性有所帮助！