Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

nodeValue、value、data、textContent

  从一个节点上获取值,最方便的方式就是使用 nodeValue 了。但是 nodeValue 是一个很古老的东西,而且奇奇怪怪的。一般的元素节点上,nodeValue 值是 null,而文本、注释节点上则是 data,到了属性节点上又是 value。总之它就是根据节点类型来决定自己的取值方式。
  比如下面是文本节点和注释节点:
<script> var t = new Text('web-tinker'); document.write(`<div>${t.nodeValue === t.data}</div>`); document.write(`<div>${t.nodeValue === t.textContent}</div>`); var c = new Comment('web-tinker'); document.write(`<div>${c.nodeValue === c.data}</div>`); document.write(`<div>${c.nodeValue === c.textContent}</div>`); </script>   上面的结果全是 true,也就是说文本和注释节点的 nodeValue 就是它们的 data,同时也是 textContent。
  但是属性节点就不同了,因为属性节点没有 data,数据是作为 value 保存的(神奇的是 textContent 居然可以取到值,我无法理解)。 <script> var a = document.createAttribute('web-tinker'); a.value = 'web-tinker'; document.write(`<div>${a.nodeValue === a.data}</div>`); document.write(`<div>${a.nodeValue === a.value}</div>`); document.write(`<div>${a.nodeValue === a.textContent}</div>`); </script>   在元素节点上,并没有 data 和 value、nodeValue 也为 null,而 textContent 虽然可以取到,但它是后代节点上值的总和。
<script> var d = document.createElement('div'); d.appendChild(new Text('web-tinker')); document.write(`<div>${d.nodeValue}</div>`); document.write(`<div>${d.value}</div>`); document.write(`<div>${d.data}</div>`); document.write(`<div>${d.textContent}</div>`); </script>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^