childNodesプロパティ検証 2
■(例 1) 下のように改行しないで一直線に記述したHTMLソースでは
<div id="oya1"><h6>私は</h6><img src="../../images/anime/16.gif"><p>太郎です</p></div>
私は
太郎です
子ノード数は：3
H6/null /1
IMG/null/1
P/null/1
のようになる。
■(例 2) 下のように改行したHTMLソースでは
<div id="oya1">
<h6>私は</h6>
<img src="../../images/anime/16.gif">
<p>太郎です</p>
</div>
私は
太郎です
子ノード数は：4
H6/null /1
IMG/null/1
#text/ /3
P/null/1
FireFoxでは
子ノード数は：7
#text/ /3
H6/null /1
#text/ /3
IMG/null/1
#text/ /3
P/null/1
#text/ /3
のようになる。
検証結果は：
FireFoxでは、HMLソースコードで改行すると、その位置に必ず 「#text テキストノード」が挿入される。GooglChromeでも同じ結果です。
IE8の場合、検証1、検証2を総合すると、インライン要素の直後の改行だけに「#text テキストノード」が挿入される。
HMLソースコードの書き方で内容が変わってしまうようでは、 childNodesプロパティは使用するのにためらわれる。
■(例 3) こななこともやってみました。下のようにテキストだけを改行しないで一直線に記述した場合
<div id="oya3">私は太郎です</div>
子ノード数は：1
#text/私は太郎です/3
のようになる。
■(例 4) 下のようにテキストの途中にの改行タグを入れた場合
<div id="oya4">私は<br>太郎です</div>
太郎です
子ノード数は：3
#text/私は太郎です/3
BR/null/1
#text/私は太郎です/3
のようになる。
■(例 5) 下のように全て改行した例では
<div id="oya5">
私
<img src="../../images/anime/16.gif">
<span>は</span>
太郎です
</div>
は
太郎です
子ノード数は：5
#text/私/3
IMG/null/1
#text/ /3
SPAN/null/1
#text/太郎です/3
となります
結論は：
HTMLソースコードでエレメント(要素）間で改行した場合、FireFoxでは「#text テキストノード」が挿入される。IE8ではインライン･エレメント(要素）とインライン･エレメント(要素）、またはインライン･エレメント(要素）とブロック･エレメント(要素）間で改行した場合だけ挿入される。 どうもHTML内で使っている「スペース、タブ、改行」の解釈で差異が出ているようです。
＜＜ ややこしくて、俺も混乱してきた、子供探しも大変だ！このプロパティから逃げるベェ･･･(^ム^)