0
顶一下

说不清的 childNodes

2007-06-16 16:36:49  作者:   来源:   浏览次数:323   评论

以下内容在IE浏览器下测试:

firstChild 获取对象的 childNodes 集合的第一个子对象的引用。

<div onclick="alert(this.firstChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>


lastChild 获取该对象 childNodes 集合中最后一个子对象的引用。

<div onclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>

在<div>标签内再加一行lastChild就找不到了

<div onclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>

那么用childNodes来测试

<div onclick="alert(this.childNodes[0].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>

childNodes[0]是表示span,而childNodes[1]表示的并非pre,childNodes[2]才是。

那么如果说childNodes[0]是span,childNodes[2]是pre,那么childNodes[1]则是这两个标签对象间的换行

但为什么childNodes[3]表示了font,而不是childNodes[4]的呢?

<div onclick="alert(this.childNodes[3].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>
再来一行,childNodes[4]表示的又即是换行,childNodes[5]才是标签p

<div onclick="alert(this.childNodes[5].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
</div>
根据这个规律,我可以断定childNodes[6]不是换行

<div onclick="alert(this.childNodes[6].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
<a>a-href</a>
</div>
那么对于对象的换行来说,首项是1,公差是3的等差数列?

此外,对于FF浏览器的测试结果表示满意:
childNodes[1]、childNodes[3]、childNodes[5]、childNodes[7]分别表示<span> <pre> <font> <p>

〖责任编辑:发表评论 告诉好友     
javascript childNodes 相关的教程                         
...