HTML 在innerText和nodeValue之间如何选择

在本文中，我们将介绍在使用JavaScript时如何在innerText和nodeValue之间进行选择。innerText和nodeValue都可以用来获取或设置HTML元素的文本内容。然而，它们之间有一些关键区别，根据你的需求和具体情况，你可以选择使用其中之一。

阅读更多：HTML 教程

innerText

innerText是DOM的属性之一，它用于获取或设置一个元素的文本内容。它返回元素的可见文本内容，同时会触发浏览器渲染和重绘。innerText会返回格式化文本，将多个空格和换行符合并成一个空格，并且会忽略元素中的HTML标签。

下面是一个示例：

<div id="exampleDiv">
  <p>Hello <span>World</span>!</p>
</div>

<script>
  var div = document.getElementById("exampleDiv");
  console.log(div.innerText); // 输出：Hello World!
</script>

在上面的代码中，div元素包含了一个段落元素和一个span元素。通过使用innerText属性，我们可以获得合并后的文本结果，即”Hello World!”。

除获取文本内容外，innerText还可以被用于设置元素的文本内容：

<div id="exampleDiv">
  <p></p>
</div>

<script>
  var div = document.getElementById("exampleDiv");
  div.innerText = "Hello World!";
  console.log(div.innerHTML); // 输出："<p>Hello World!</p>"
</script>

在上面的代码中，我们通过设置div的innerText属性为”Hello World!”，并且发现它自动地将其视为一个段落元素。

需要注意的是，innerText在旧版本的Internet Explorer中不被支持，如果你的代码需要兼容旧版浏览器，你可以选择使用nodeValue属性。

nodeValue

nodeValue是DOM的属性之一，它用于获取或设置一个节点的值。该属性可以用于获取或设置文本节点、注释节点和属性节点的值。对于HTML元素节点来说，nodeValue通常返回null。

下面是一个示例：

<p id="exampleParagraph">Hello World!</p>

<script>
  var paragraph = document.getElementById("exampleParagraph");
  console.log(paragraph.firstChild.nodeValue); // 输出：Hello World!
</script>

在上面的代码中，我们使用了nodeValue属性和firstChild属性来获取带有文本内容的段落元素的值。

同样地，nodeValue也可以用于设置节点的值：

<p id="exampleParagraph"></p>

<script>
  var paragraph = document.getElementById("exampleParagraph");
  paragraph.firstChild.nodeValue = "Hello World!";
  console.log(paragraph.innerHTML); // 输出：Hello World!
</script>

在上面的代码中，我们通过设置firstChild的nodeValue属性为”Hello World!”，并且发现它将其作为文本内容插入到了段落元素中。

需要注意的是，虽然nodeValue是一个通用的属性，但在某些情况下它可能并不适用。比如，对于元素节点来说，它的nodeValue属性始终为null。在这种情况下，你需要借助其他属性（比如innerText）来获取文本内容。