DOM的三大结点：元素结点、文本结点、属性结点

先来看一句HTML小代码：

<p id="ptag">this is a p tag</p>

根据上面的那句代码，来说说一下什么是元素结点（element node），简单说就是一个标签,如：<p></p>(不带属性，不带内容，就仅仅只是一个标签)
对于元素结点的nodeName就是标签名（大写），而nodeValue就是null或undefined(除了标签名，啥也没有，nodeValue就不可能有值)

<p id="ptag">this is a p tag</p>
   <script>
      nodeObj = document.getElementById("ptag");
      console.log(nodeObj.nodeName);//result:P(注意:是大写)
      console.log(nodeObj.nodeValue);//result:null
   </script>

上面的nodeObj获得的是结点对象，指的是:<p id=”ptag”>this is a p tag</p>
但是用结点属性(nodeName,nodeValue…)访问它，针对的只是这个对象的标签，即元素结点


那什么是文本结点？
文本结点指的标签里面的所有内容，在<p id=”ptag”>this is a p tag</p> 这句代码里，指的是起始标签<p id=”ptag”> 和闭合标签</p> 之间的所有内容，即this is a p tag
用代码表示就是：

document.getElementById("ptag").childNodes[0]
//或
document.getElementById("ptag").firstChild

在这里就有疑问了，childNodes[0]和firstChild，都表示第一个儿子的意思？也就是说一个结点对象有多个文本结点？？

我做了一下测试：

<p id="ptag">
      this is the first paragraph.
      <span>this is the second paragraph.</span>
      this is the third paragraph.
   </p>
   <script>
      nodeObj = document.getElementById("ptag");
      console.log(nodeObj.childNodes[0]);
      //result:this is the first paragraph.
      console.log(nodeObj.childNodes[1]);
      //result:<span>this is the second paragraph.</span>
      console.log(nodeObj.childNodes[2]);
      //result:this is the third paragraph.
   </script>

我原本以为<p> 的第一个子结点就应该是<span>
然而事实并不是，一个元素的子结点可以分为两类：文本结点和元素结点
所以文本结点就得重新定义：文本结点就是元素起始标签和闭合标签内的不加其他标签修饰的文本内容
因此，文本结点的nodeValue就是文本内容，而nodeName都是#text

   <p id="ptag">this is a p tag.</p>
   <script>
      nodeObj = document.getElementById("ptag");
      textNode = nodeObj.childNodes[0];//从结点对象获得文本结点
      console.log(textNode.nodeName);//result:#text
      console.log(textNode.nodeValue);
      //result:this is a p tag.
   </script>

至于属性结点就是一个标签里面的属性内容
一个属性就是一个属性结点，例如<p id=”ptag”>this is a p tag</p> 的id属性结点表示方法就是：

document.getElementById("ptag").getAttributeNode("id")

而属性结点的nodeName就是属性名(key)，nodeValue就是属性值(value)

<p id="ptag">this is a p tag.</p>
   <script>
      nodeObj = document.getElementById("ptag");
      idAttributeNode = nodeObj.getAttributeNode("id");
      //从结点对象获得id属性结点
      console.log(idAttributeNode.nodeName);//result:id
      console.log(idAttributeNode.nodeValue);//result:ptag
   </script>

总结

tables	nodeName	nodeValue	nodeType
元素结点	标签名	undefined或null	1
属性结点	属性值	属性名	2
文本结点	text	文本本身	3