以下內容在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>