本文首发博客园：http://jscode.cnblogs.com，转载请注明出处。
关于Element跟Node的区别，cilldren跟childNodes的区别很多朋友弄不清楚，本文试图让大家明白这几个概念之间的区别。
Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分，常见的有：
| 节点类型 | NodeType |
|---|---|
| 元素element | 1 |
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
Element继承了Node类，也就是说Element是Node多种类型中的一种，即当NodeType为1时Node即为ElementNode，另外Element扩展了Node，Element拥有id、class、children等属性。
以上就是Element跟Node的区别。
那么用document.getElementById("xxx")取到的是Node还是Element呢？我们来测试一下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <div id="test"> <p>One</p> <P>Two</p> </div> <script> var oDiv=document.getElementById("test"); console.log(oDiv instanceof Node); //true console.log(oDiv instanceof Element); //true </script> </body> </html>
我们可以看到用document.getElementById("xxx")取到的既是Element也是Node。
children是Element的属性，childNodes是Node的属性，我们再来测试一下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <div id="test"> <p>One</p> <P>Two</p> </div> <script> var oDiv=document.getElementById("test"); console.log(oDiv.children[0] instanceof Node); //true console.log(oDiv.children[0] instanceof Element); //true console.log(oDiv.childNodes[0] instanceof Node); //true console.log(oDiv.childNodes[0] instanceof Element); //false console.log(typeof oDiv.childNodes[0].children); //undefined console.log(typeof oDiv.childNodes[0].childNodes); //object </script> </body> </html>
通过上面的代码我们可以看到，Element的children[0]仍为Element，是Node和Element的实例，Node的childNdoes[0]为Node，只是Node的实例，不是Element的实例。
同时，Node的children属性为为undefined。
当我获取子元素时用children[0]来代替就可以使用对应方法getBoundingClientRect()来获取元素位置
用childNodes来获取时有时候是获取的是[object HTMLDListElement]但是有时候获取的是[object Text]这是为什么呢？
有人说是浏览器的问题，但是我用的都是火狐测试的,后来我发现出现[object Text]是因为我换行了childNodes给我抓了空格当第一个node，去掉换行就OK了