一、概念理解：
关于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。
二、使用全解
一些典型的 DOM 属性：
- x.nodeName - x 的名称
- x.nodeValue - x 的值
- x.nodeType -x 的类型
- x.parentNode - x 的父节点
- x.childNodes - x 的子节点
- x.attributes - x 的属性节点
从 books.xml 中的 <title> 元素获取文本的 JavaScript 代码：
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue
x=xmlDoc.getElementsByTagName("book")[0].attributes;
cat=x.getNamedItem("category").nodeValue
在此语句执行后，txt 保存的值是 "Harry Potter"。
解释：
- xmlDoc - 由解析器创建的 XML DOM （文档节点）
- getElementsByTagName("title")[0] - 第一个 <title> 元素 （元素节点）
- childNodes[0] - <title> 元素的第一个子节点 (文本节点)
- nodeValue - 节点的值 (文本节点的值)
- attributes -属性节点 （属性节点）
在上面的例子中，getElementsByTagName 是方法，而 childNodes 和 nodeValue 是属性。
