首先把，接下来用于测试的html先贴出来：
<body>
<h1 id='pageTitle'>item list</h1>
<ul class='bookList'>
<li class='bookItem'>book 1</li>
<li class='bookItem'>book 2</li>
</ul>
<ul class='cats'>
<li class='cattem'>cat 1</li>
<li class='catItem'>cat 2</li>
</ul>
</body>
在前面的文章“JavaScript DOM 1－ node, Node, HTMLElement之间到底是什么关系”中，已经解释过的两个概念：
1: 整个document文档就是一棵树，这就意味着我们可以从某一个节点（node）开始，遍历这颗树上所有的节点
2: 因为document中的所有元素都是一个Node对象, 那就是说定义在Node类上的所有公用属性和方法，每一个node都可以说使用
为了实现对整棵树节点的遍历，Node定义了以下的相关属性：
1: parentNode
返回该节点的父节点。针对类似于Document对象，那就是null.
2: childNodes [children]
返回包含此节点的子节点的NodeList对象。
这个属性的返回结果可能不是你直观想象的那样。
以上结果是我们开篇那段HTML上测试的结果。当两个元素之间有空格的时候，即使没有写入文字，但是依然会有一个'text'节点。所以我们以为对bookList这个'<ul>'元素会返回两个node(两个'<li>'元素)，但是结果却返回了5个元素，其中有三个'text'节点，依次是：
1: 第一个'<li>'元素与'<ul>'之间的空格
2: 第一个'<li>'与第二个'<li>'之间的空格
3: 第二个'<li>'与'</ul>'之间的空格。
但是如果我们想只返回那两个'<li>'元素，可以使用'.children'这个属性，它是只包含Element元素的NodeList，它是实时变化的，会根据文档的改变而变化。
3: firstChild, lastChild [firstElementChild, lastElementChild]
返回该节点的子节点中的第一个和最后一个。
同样的，因为在第二点提到的原因呢，或许它放回的不是你直觉上的结果。
4: previousSibling, nextSibling [previousElementSibling, nextElementSibling]
返回该节点的前一个和后一个兄弟节点。
依然上会把空格算进去，而与之对应的'.previousElementSibling'和'nextElementSibling'则不会。
5: nodeValue
返回Text节点或者Comment节点的文本内容，对于HTMLElement之类的返回null
6: nodeName
返回元素的标签名，以大写表示
对于空格的text返回'#text',而对于我们常见的这些标签就返回大写的标签名字，比方说'<li>'元素，就返回'LI'。
7: childElementCount
返回此元素的去除空格元素的的子节点个数
childElementCount = children.length. 并没有一个对于的childCount与它对应。如果想得出包含空格在内的元素的个数，可以通过：childNodes.length 获取。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。