中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

標準參考

Node（節點）不僅包括元素節點，也包含文本節點、注釋節點、屬性節點等等，節點的類型可以使用 nodeType 來區分。

在 HTML 源代碼中，位于標簽之內以及標簽之間的文本（包括空白字符）將被創建為文本節點。

關于 Node 的更多信息，請參考 DOM-1 Core Interface Node 及 DOM-2 Core Interface Node 中的內容。

關于 Text 的更多信息，請參考 DOM-2 Core Interface Text 中的內容。

問題描述

IE 在創建 DOM 樹時，會忽略某些空白字符，因此會比其他瀏覽器少創建一些文本節點。反過來說，同樣的一篇文檔，其他瀏覽器將比 IE 多創建一些文本節點。

造成的影響

用戶針對 IE 設計的腳本如果使用節點對象的 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法，可能會因為此問題而無法在其他瀏覽器中達到相同的目的，如腳本執行出錯，或對錯誤的目標對象進行了操作。

受影響的瀏覽器

IE6 IE7 IE8

問題分析

分析以下代碼：

...

<!--測試元素-->

<div id="a"> <div>div</div> <span id="b">span</span> <span>span</span> </div>

<!--腳本輸出-->

<pre>

<script>

//獲取父元素。

var $a=document.getElementById("a");

//測試 childNodes。

var nodeList=$a.childNodes;

var string="";

for(var i=0;i<nodeList.length;i++)string+=nodeList[i].nodeType;

document.writeln("nodeList: "+string);

//測試 firstChild。

document.writeln("firstChild: "+$a.firstChild.nodeType);

//測試 lastChild。

document.writeln("lastChild: "+$a.lastChild.nodeType);

//獲取子元素。

var $b=document.getElementById("b");

//測試 previousSibling。

document.writeln("previousSibling: "+$b.previousSibling.nodeType);

//測試 nextSibling。

document.writeln("nextSibling: "+$b.nextSibling.nodeType);

//顯示 innerHTML。

alert("|"+$a.innerHTML+"|");

</script>

</pre>

...

注意以上代碼，外層 DIV 標簽內的各標簽間有空格符。空格符被標記為紅色。

根據規范中的描述，腳本的預計輸出情況如下：

第一行輸出應該是“nodeList: 3131313”，因為該元素內的節點共有 7 個：3 個元素節點穿插在 4 個文本節點之間。

第二行輸出應該是“firstChild: 3”，第一個節點是文本節點。

第三行輸出應該是“lastChild: 3”，最后一個節點也是文本節點。

第四行輸出應該是“previousSibling: 3”。本次的目標元素（SPAN[id=b]）的前一個節點是文本節點。

第五行輸出應該是“nextSibling: 3”，原因同上。

這段代碼在不同的瀏覽器環境中的表現：

IE其他瀏覽器

nodeList:113133131313

firstChild:13

lastChild:33

previousSibling:13

nextSibling:33

最后彈出 DIV[id=a] 元素的 innerHTML 為：

IE

|<DIV>div</DIV><SPAN id=b>span</SPAN> <SPAN>span</SPAN> |

其他瀏覽器:

| <div>div</div> <span id="b">span</span> <span>span</span> |

對原代碼中的“測試元素部分”進行改動后（將其中第二個 SPAN 更換為 DIV 元素）：

...

<!--測試元素-->

<div id="a"> <div>div</div> <span id="b">span</span> <div>div</div> </div>

...

再次測試，各瀏覽器表現如下：

IE6 IE7 IE8Firefox Chrome Safari Opera

nodeList:11313131313

firstChild:13

lastChild:13

previousSibling:13

nextSibling:33

最后彈出 DIV[id=a] 元素的 innerHTML 為：

IE

|<DIV>div</DIV><SPAN id=b>span</SPAN>

<DIV>div</DIV>|

其他瀏覽器:

| <div>div</div> <span id="b">span</span> <div>div</div> |

可見：IE 在生成 DOM 樹時，忽略了一些空白字符，從而比其他瀏覽器少創建了一些文本節點。這導致在使用 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法時，在 IE 和其他瀏覽器中得到的結果不一致。

解決方案

1. 沒有必要時盡量去掉各標簽之間的空白字符。

因為頁面腳本多是對“元素節點”進行操作，因此只要保證各元素之間沒有文本節點（即源代碼中的標簽之間沒有空白字符——包括空格符、換行符、制表符），就能使上述各屬性在各瀏覽器中的行為一致。如：

<div id="a"><div>div</div><span id="b">span</span><span>span</span></div>

另外，使用腳本創建并順次添加的元素，他們本身就是緊密相聯的，各元素之間并沒有文本節點，因此這種情況也不必擔心上述兼容性問題，如：

...

var $a=document.createElement("div");

...

var $b=document.createElement("div");

...

document.body.appendChild($a);

document.body.appendChild($b);

...

$a.nextSibling.className="foo";

...

上述代碼中，'$a.nextSibling' 在所有瀏覽器中都將是 $b。

2. 在獲取節點時做類型判斷。

無法保證各元素之間沒有文本節點時，則需要在針對節點的操作上添加類型判斷，如：

function getPreviousElementSibling ($target) {

var $previousNode = $target.previousSibling;

while ($previousNode && $previousNode.nodeType!=1) {

$previousNode = $previousNode.previousSibling;

}

return $previousNode;

}

另外，在非IE中，還可以使用 Element Traversal Specification 草案中提到的 previousElementSibling 和 nextElementSibling 獲取元素節點，例如：以 Element.nextElementSibling 取得與元素 Element 的相鄰的下一個元素節點。

更多信息請查看IT技術專欄