innerHTML nodeValue 的区别

DOM中的节点是分好几种类型,常见的有
1.文档节点 (document,唯一)
2.元素节点 (那些个标签div,p之类)
3.属性节点(class,src这种)
4.文本节点(插入在p,div内的文本)
其它。。

其中element.nodeValue,是节点的值,其中属性节点和文本节点是有值的,而元素节点没有值。

innerHTML以字符串形式返回该节点的所有子节点及其值

举个例子 :
<p id="example" title="texts">
  这是一段文本
  <span></span>
</p>
var p = document.getElementById('example');
p.nodeValue 
//null,p是元素节点,所以nodeValue为null
p.getAttributeNode('id').nodeValue    
//example,这里获取到p的id属性的属性节点,nodeValue就是它的属性值
p.childNodes[0].nodeValue            
/*
"
    这是一段文本
"
p是含有两个子节点的,插入的文本虽然没有标签,但它依然是一个节点。
其类型是是文本节点,其nodeValue是就是写入在其中的字符串,包含换行和缩进
*/
p.innerHTML
/*
"
    这是一段文本
<span></span>"
这里innerHTML返回了p所包含的全部的节点的所包含的各种值了,以字符串的形式。
*/
posted @ 2016-08-23 23:03  阿木木Superstar  阅读(185)  评论(0编辑  收藏  举报