首先把,接下来用于测试的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 获取。