查找html_nodes,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 获取。