innerHTML,nodeValue与textContent之间的区别

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML.DOM中的节点是分好几种类型,

  • 整个文档是一个文档节点(document,唯一)
  • 每个 HTML 元素是元素节点(标签div,h1,p之类)
  • HTML 元素内的文本是文本节点(插入在p,div, span内的文本)
  • 每个 HTML 属性是属性节点(class,src这种)
  • 注释是注释节点

nodeValue 属性设置返回指定节点的节点值。

nodeValue 属性的替代选择是 textContent 属性。

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

举个例子 :
<p id="prag" title="text">
  这是一段文本
  <span>这是一小句话</span>
</p>
var p = document.getElementById('prag');
p.nodeValue 
//null  因为p是元素节点,所以nodeValue为null
p.getAttributeNode('id').nodeValue    
//prag, 这里获取到p的id属性的属性节点,nodeValue就是它的属性值prag
p.childNodes[0].nodeValue            
/*
"
    这是一段文本
"
p是含有两个子节点的,插入的文本是文本节点。nodeValue是就是写入在其中的字符串,包含换行和缩进
*/
p.innerHTML
/*
"
    这是一段文本
<span>这是一小句话</span>"
这里innerHTML以字符串的形式返回开始和结束标签之间的 HTML。
*/

  

posted @ 2017-09-07 21:30  /*安少*/  阅读(705)  评论(0编辑  收藏  举报