Perbezaan antara childNodes dan kanak-kanak apabila JavaScript mengendalikan kemahiran elemen_javascript DOM

WBOY
Lepaskan: 2016-05-16 16:06:38
asal
1233 orang telah melayarinya

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>

Salin selepas log masuk


Keputusan ujian adalah seperti berikut:

 div1.children运行结果:
 SPAN

 div1.childNodes运行结果:
 undefined
 SPAN
 undefined

Salin selepas log masuk

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>

Salin selepas log masuk

Tiada perbezaan lain ditemui dalam ukuran sebenar elemen HTML seperti dokumen, kepala, badan dan div

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan