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所包含的全部的节点的所包含的各种值了，以字符串的形式。
*/

转载于:https://www.cnblogs.com/amumu666/p/5801167.html