要素間に改行を追加するHTMLコードが "parentnode"ベースのjavascript関数を破る

Question

an HTML form with a simple JavaScript functionは、選択したオプションに基づいて別のリンクにユーザーを送信することを意味します。

<form> 
<select name="deliveryType"> 
    <option value="123">Item 1</option> 
    <option value="456">Item 2</option> 
    <option value="789">Item 3</option> 
</select> 
<p><a href="javascript:void(0);" onClick="javascript:addToCart(this);">Submit</a> 
<script> 
    function addToCart(t) { 
    var dT = t.parentNode.parentNode.childNodes[1].value; 
    alert(dT); 
    // location.href = "http://linkprefix.com/?variable=" + dT; 
}</script> 
</form> 

期待どおりに動作します。変数dTは、選択したオプションの値を返します。しかし

、<form>と<select>、dT戻りundefinedの間には改行がない場合。しかし、childNodes[1]をchildNodes[0]に変更すると、再び動作します。なぜこれが起こるのか分かりません。私は、parentNodeとchildNodeはHTML要素とその中のテキストに基づいており、要素間の改行ではないと考えました。私が推測しなければならない場合、改行はテキストノードとしてカウントされていますが、それは私には意味がありません。それは何が起こっているのですか？これを行うより良い方法はありますか？

Answer 1

コメントに示唆されているように、childNodes[1]をchildren[0]に変更すると、要素間の改行やスペースに関係なく機能が機能します。 See the updated fiddle。

childNodesは明らかにすべてのテキストノードをカウントし、childrenはカウントしません。また、改行はテキストノードとしてカウントされますが、これは "テキスト"の厳密な解釈では意味がありますが、すぐにわかりませんでした。

Answer 2

HTMLでは、要素内の空白はテキストとみなされ、テキストはノードと見なされます（w3schoolsを参照）。したがって、改行を追加することによって、ノードを追加することになります。そのため、<select>ノードはchildNodes [1]を通じてアクセス可能です。改行がない場合、<select>ノードはchildNodes [0]からアクセスできます。