JavaScript DOM 3 - 查找特定位置上的节点

首先把，接下来用于测试的html先贴出来：

    
item list
    

        
book 1
        
book 2
    
 
    

        
cat 1
        
cat 2
    

在前面的文章“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这个'

'元素会返回两个node(两个'
• '元素)，但是结果却返回了5个元素，其中有三个'text'节点，依次是：

  1: 第一个'
  '元素与'
  '之间的空格
  2: 第一个'
  '与第二个'
  '之间的空格
  3: 第二个'
  '与'
  '之间的空格。
  

  但是如果我们想只返回那两个'

• '元素，可以使用'.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'。

  7: childElementCount

  返回此元素的去除空格元素的的子节点个数
  

  childElementCount = children.length. 并没有一个对于的childCount与它对应。如果想得出包含空格在内的元素的个数，可以通过：childNodes.length 获取。