JavaScriptの動かないコード　(中級編)　DOMで子要素を指定する際のエラー

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

<body>

<table border=1>
<tbody id="my_tbody">
	<tr><td>この行がコピーされます。</td></tr>
</tbody>
</table>

<input type="button" value="行をコピー" onClick="f()">

<script language="JavaScript">

function f()
{
	// tbody中の最初の行を取得
	var old_element = my_tbody.childNodes[0];
	
	// コピー
	var new_element = old_element.cloneNode( true );
	
	// 表に追加
	my_tbody.appendChild( new_element );
}

</script>

</body>

答え

IEでは，行がコピーされて２行になる。

しかしFirefoxでは，コピーされない。画面上で何も起こらなかったように見える。

IEとFFでは，要素の子ノードの認識の仕方が異なる。

次のコードを実行してみよう。

<div id="my_div">

<div id="div1">text1 (この上下の行は改行)</div>

<div id="div2">text2 (この下には２つの改行)</div>


<div id="div3">text3</div>
text4
<div id="div5">text5 (この下には一つの全角空白)</div>
　
<div id="div6">text6 (この下には一つの半角空白)</div>
 
<div id="div7">text7</div>
<div id="div8">text8 (この下には１つの改行)</div>

</div>


<script language="JavaScript">

function f()
{
	// 子ノード数
	alert( my_div.childNodes.length );

	// すべてのノードについて内容を表示
	for( var i = 0; i < my_div.childNodes.length; i ++ )
	{
		// ノードタイプで分岐
		switch( my_div.childNodes[ i ].nodeType)
		{
			// 要素ノード
			case 1:
				alert( my_div.childNodes[ i ].innerHTML );
				break;
			// テキストノード
			case 3:
				alert( my_div.childNodes[ i ].nodeValue );
				break;
		}
	}
}

</script>

IEでは，子ノード数は９になる。

まず div タグが７つあって，それらタグと同じ階層に「text4」というテキストノードが１つある。

それに加え，全角空白が１つのテキストノードとみなされる。

半角スペースや改行はノードとみなさず合計９つのノードとなる。

しかしFirefoxでは，タグとタグの間に存在する空白や改行を漏らさずカウントするため，なんと子ノード数は１５になる。

div7 と div8 の間にあるような，見やすくしようとして挿入した単なる改行も，一つのテキストノードとして認識されてしまう。

この場合の空白やスペースのカウント規則としては，タグとタグの「間のテキスト」が一つのノードになるため

divタグの要素ノードが７つ
divタグの前後のテキストノードが合計８つ

合計１５の子ノードが計上される。

冒頭のコードでFirefoxが行コピーできなかった理由も，１番目の要素として， tr タグではなくその前にある改行を取得してしまっているからだ。

IEのほうが人間の直感にあった動作をしているように見える。

でも，実はFirefoxの動作のほうがDOMの仕様上正しい。

Mozillaのサイト：DOM Inspector FAQ
https://developer.mozilla.org/ja/DOM_...

Q.
元のドキュメントにない空の #text ノードがいっぱいあります。これらは何でしょう？どうして存在して、どうすれば取り除けるのでしょう？

A.
これらのテキストノードは実際は要素間の改行とスペースなのです。どうしてそれらを表示するのかについての長々とした議論は bug 26179 で行われています。
都合の良いことに、[表示] メニューの [ホワイトスペースノードを表示] からチェックを外せば、Inspector の中でこれらのホワイトスペースノードを隠せます。ただし、すべての空のテキストノードを隠せるわけではありません。連続するホワイトスペースをユーザエージェントがまとめることを CSS の white-space プロパティの値で制限しているノードが隠されることはありません。

改行がノード？(JAXP)
http://oshiete1.goo.ne.jp/qa1222983.html