[路飞]每日一答：innerHTML,nodeValue与textContent之间的区别

欧浪浪
146 阅读2分钟

innerHTML,nodeValue与textContent之间的区别

这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。


在回答问题之前我们可以创建一个简单的HTNL页面，分别查看和分析他们打印出的结果是什么。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ele</title>
  </head>
  <body>
    <div id="app"> i am app</div>
    <span id="span">i am span</span>
    <!-- built files will be auto injected -->
  </body>
</html>

他所显示的页面是这样的:

image.png

innerHTML

定义： innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

html 页面上有一个 id 为 ap的标签，我们获取这个标签，打印他的 innerHTML.

document.getElementById("app").innerHTML // ' i am app'

如果我们在标签内部再写一个标签。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>ele</title>
  </head>
  <body>
    <div id="app"> 
      i am app
      <div>i am inner</div>
    </div>
    <span id="span">i am span</span>
    <!-- built files will be auto injected -->
  </body>
</html>

打印结果：

document.getElementById("app").innerHTML // ' \n      i am app\n      <div>i am inner</div>\n    '

可以发现，它不仅打印了里面的内容，甚至连标签都一块被显示。

总结： innerHTML 返回的结果是: 由元素后代组成的 HTML 或者 XML，并且以字符串的形式返回

nodeValue

nodeValue 翻译过来就是节点值，这也是 nodeValue 的定义。

依然是上述案例，我们尝试获取 DOM 节点后打印 nodeValue:

document.getElementById('app').nodeValue // null

结果返回的是 null 。原因是 div是个元素节点，要通过 document.getElementById('app').childNodes[0].nodeValue 才能获取到

返回结果：

' \n i am app\n 结果是不含标签的节点文本值。

总结： nodeValue 返回一个字符串，表示当前节点本身的值。

节点值根据节点类型的不同而有所不同：

  • 文本节点：nodeValue属性值就是文本节点的内容。
  • 属性节点：nodeValue属性值就是属性节点的值。
  • 文档节点和元素节点：nodeValue属性是不可用的。

注：如果你想返回元素的文本，记住文本通常是插入到文本节点中，这样返回的就是文本节点的节点值(element.childNodes[0].nodeValue)。

textContent

document.getElementById('app').textContent //  ' \n      i am app\n      i am inner\n    '

可以看到他返回了当前节点的内容以及他所有子内容。

如果我们在页面中主动修改 textContent

<script>
  window.onload = function () {
    document.getElementById('app').textContent = 'test'
  }
</script>

那么 textContent将不再返回当前节点和子内容，而是返回修改值。

总结： textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。如果设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。

avatar
文章
阅读
粉丝