ブラウザによって異なるブランクノード(jsクリアノード)


まず次のコードを見てください.<dl id="dll">
  <dt>title</dt>
  <dd>definition</dd>
</dl>
IEブラウザFFブラウザでそれぞれ以下のコードを実行します.役割は「dl」マークのサブノードの個数を表示します.var dll=document.getElementById("dll");
alert(dll.childNodes.length);
IEは2、FFは5であることが示された.二つのブラウザが異なる結果を生んだのは、テキストの一部が独立したノードであるためであるが、このテキストがスペース、改行、タブの特殊な文字だけで構成されると、IEとFFは分岐し、IEはこれらのノードを無視し、FFはこれらのノードを承認する.分岐の原因は、FFが<dl>と<dt>、<dt>と<dd>、<dd>と<dl>の間の空白ノードも単独のノードであり、FFの結果は5であり、IEの結果は2であるという.
ノードの認定について、IEは異なる場合にも異なる結果を示す.
IEは、divを変更するのは4つのサブノードであり、FFは5つのサブノードであると考え、テストによって、IEは<div>と
マーク間の空白テキストノードを無視しているが、他の空白テキストノードは無視されていない.
この不一致は開発に大きな困難をもたらし、nextSibling、previous Siblingなどの間接ノードによって参照される行為に影響を及ぼしています.nextSiblingは無駄な空白テキストノードである可能性が高いからです.この問題を解決するには、文書にテキストノードが現れないようにすることです.例えば:
title
definition

このように見ると読みにくいです.
もう一つの解決方法は、ノードの判断を用いて、参照するノードが必要なノードであるかどうかを判断することである.prototype-1.3.1フレームワークでは、この問題を解決するための方法が提供され、使用前に空白ノードを削除する:<div>
 <img alt="ttt" src="yy.gif" />
 <span>some here</span>
</div>
第一例のコードは次のように変更できます.<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>
の結果は、IEとFFの両方において2である.