JavaScript操作DOM元素のchildNodesとchildrenの違い

DOM元素に対して、childrenはDOM Objectタイプのサブオブジェクトを指し、「間に隠れて存在するText Node」を含まず、childNodesは「間に隠れて存在するText Nodeオブジェクト」を含む.
具体的にはchildrenとchildNodesに対するchrome環境下のテストを見てください.

 

 
 
 


 
 function test() {
 var o = document.getElementById("div1");
 var child = o.children;
 console.log("div1.children    :");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 console.log("");
 child = o.childNodes;
 console.log("div1.childNodes    :");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 }
 
 test();

テストの結果は以下の通りです.

 div1.children    :
 SPAN

 div1.childNodes    :
 undefined
 SPAN
 undefined

上のchildNodesの集合の結果、二つのundefinedノードがあります.これはnodeType=3のTextNodeです.
HTMLコードを次のように書くと、チルドレンとチルドレスの結果に差はないです.

document、head、body及びdivなどのHTML元素の実測には他の違いがありませんでした.