Untuk elemen DOM, kanak-kanak merujuk kepada sub-objek jenis Objek DOM, tidak termasuk objek TextNode yang wujud tidak kelihatan antara teg dan childNodes termasuk objek TextNode yang wujud tidak kelihatan antara teg.
Lihat secara khusus pada ujian untuk kanak-kanak dan childNodes dalam persekitaran krom:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="div1" class="div"> <span id="s1" class="sp" lang="zh-cn"> </span> </div> </body> <script type="text/javascript"> 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(); </script> </html>
Keputusan ujian adalah seperti berikut:
div1.children运行结果: SPAN div1.childNodes运行结果: undefined SPAN undefined
Terdapat dua nod yang tidak ditentukan dalam hasil koleksi childNodes di atas, dan kedua-duanya ialah TextNode dengan nodeType=3.
Jika kod HTML ditulis dalam gaya berikut, tidak akan ada perbezaan dalam hasil kanak-kanak dan childNodes.
<body> <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div> </body>
Tiada perbezaan lain ditemui dalam ukuran sebenar elemen HTML seperti dokumen, kepala, badan dan div