看如下HTML代碼
- <html>
- <head><title>DOM Test</title></head>
- <body>
- <table>
- <tr>
- <td id="TEST">
- <input type="submit" value="確定"/>
- <input type="button" value="取消"/>
- </td>
- </tr>
- </table>
- <script type="text/javascript">
- <!--
- var td = document.getElementById("TEST");
- alert(td.childNodes.length); //結果爲4
- -->
- </script>
- </body>
- </html>
由於DOM中，空白也是作爲一個文本節點，而兩個input元素後面都有空白（回車、空格、製表符），所以結果爲4，刪除空白後結果爲2。
爲了處理裏面的空格節點,用以下函數來處理。
- function cleanWhitespace(element)
- {
- for(var i=0; i<element.childNodes.length; i++)
- {
- var node = element.childNodes[i];
- if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
- {
- node.parentNode.removeChild(node);
- }
- }
- }
處理結點cleanWhitespace(document.getElementById("TEST"))後,OK,解決
-----------------------------------------------------------------------------------------------------------------------------------------------------
1.爲什麼會出現空白節點的問題
因爲瀏覽器的差異在對於非空文本節點前面或後面有空格或換行符等特殊的文本字符組成，IE和FF就會產生分歧，IE會忽略這些節點，而FF則認可這些節點。
2.表現是形式
<dl >
<dt>title</dt>
<dd>definition</dd>
</dl>- 1
- 2
- 3
- 4
上面的一段代碼段分別在IE瀏覽器FF瀏覽器下執行下面的代碼，作用是顯示
IE爲2，FF爲5。兩個瀏覽器產生了不同的結果，這是由於一段文本是一個獨立的節點，但如果這段文本僅僅由空格，換行，製表符這些特殊的文本字符組成，IE和FF就會產生分歧，IE會忽略這些節點，而FF則認可這些節點。分歧產生的原因是FF認爲- ,和
- ,和
3.對我們的的影響
childNodes[index],nextSibling,previousSibling這些間接節點引用的行爲，因爲nextSibling很可能是一個無用的空白文本節點。
4.解決的辦法
<script language="javascript" type="text/javascript">
function cleanWhitespace(oEelement)//定義一個刪除空白節點的函數
{
for(var i=0;i<oEelement.childNodes.length;i++){
var node=oEelement.childNodes[i];
if(node.nodeType==3 && /^\s+/.test(node.nodeValue)){
node.parentNode.removeChild(node)//刪除節點
}
}
}
</script>