childNodes บน IE และ Firefox

property childNodes บน IE และ Firefox นั้นคืนค่าไม่เหมือนกัน เนื่องจากบน Firefox จะทำการคืนค่าทุก Node ที่เป็นโหนดลูก แต่บน IE จะทำการคืนค่าเฉพาะ Node ลำดับเดียวกันเท่านั้น ทำให้ไม่สามารถใช้ property นี้ได้อย่างสมบูรณ์แบบ ลองดูตัวอย่างนี้

<dl id="test">

   <dd><span>000</span><span>111</span></dd>

</dl>

<input type="button" value="Demo" onclick="alert( document.getElementById('test').childNodes.length )" />

ลองใช้ Firfox หรือ IE คลิกดูตัวอย่างกันเอานะครับ

ตัวอย่าง :

000111

การแก้ปัญหา สามารถทำได้โดยเลี่ยงไปใช้ getElementsByTagName('*') แทนครับ

<dl id="test">

   <dd><span>000</span><span>111</span></dd>

</dl>

<input type="button" value="Demo" onclick="alert( document.getElementById('test').getElementsByTagName('*').length )" />

วิธีการนี้จะทำให้ ทั้ง IE และ Firefox คืนค่าออกมาเหมือนๆกัน โดยคืนค่าทุกๆ tag ที่เป็น โหนดลูก