: เข้าถึง Node กันเถอะ
>> เรารู้จักตัวแปรสำเร็จรูปพร้อมใช้อย่าง document กันไปแล้ว เวลาต้องการเข้าถึงแท็กก็ว่า document.getElementsByTagName ใช่ไหมหือ ยังมีแบบนี้อีก document.getElementById ก็เพื่อเข้าถึงแท็กที่ถูกตั้ง identifier ไว้ไงล่ะ ตัวอย่างเช่น
<div id="content">
<h1></h1>
</div>
ทีนี้พอเขียนว่า
var e = document.getElementById("content");
console.log(e); //สำหรับ chrome กด F12 แล้วเลือกแท็บ console
ผลลัพธ์ก็จะได้แท็ก div หนึ่งแท็กนั่นเอง
>> ควรทราบว่า getElementById นั้นใช้ง่ายกว่า getElementsByTagName นะเออ เพราะอะไรน่ะเหรอ? ก็เพราะผลลัพธ์ที่ได้จาก id คือแท็กจำนวนแท็กเดียว ส่วนจาก tagName จะได้เป็น array ซึ่งจะต้องระบุ index ไปยังแท็กที่ต้องการเสมอครับ
>> พูดถึงแท็ก เรากลับไปมองโครงสร้างต้นไม้เขาก็คือ node องค์กรที่เรียกตัวเองว่า W3C ได้นิยามมาตราฐานของ node interface ไว้ดังนี้ (ที่ควรรู้จัก)
ในหนึ่ง node ต้องสามารถ
- มี childNodes มีชนิดเป็น NodeList
- มี firstChild มีชนิดเป็น Node
- มี lastChild มีชนิดเป็น Node
- มี nextSibling มีชนิดเป็น Node
- มี previousSibling มีชนิดเป็น Node
- มี parentNode มีชนิดเป็น Node
- มี nodeType มีชนิดเป็น int
- สามารถ appendChild หรือผูก node ลูกได้
- สามารถ removeChild หรือลบ node ลูกได้
- สามารถ replaceChild หรือสับเปลี่ยน node ได้
- สามารถ insertBefore หรือแทรก node ได้
>> พูดถึงประเภทของ node หรือ node type ที่มีชนิดเป็น int เพื่อนๆควรทราบว่าแต่ละค่ามีความหมายว่าอย่างไร ในเบื้องต้นนี้ได้แก่
- ถ้าค่าออกมาเป็น 1 เจ้า node จะมี interface เป็น Element
- ถ้าค่าออกมาเป็น 2 เจ้า node จะมี interface เป็น Attr
- เป็น 3 เจ้า node จะมี interface เป็น Text
- เป็น 8 เจ้า node จะมี interface เป็น Comment
- เป็น 9 เจ้า node จะมี interface เป็น Document หรือก็คือ root node ที่เพื่อนๆรู้จักไปแล้วนั่นแหละครับ
part นี้ไว้เท่านี้ก่อน เริ่มจะเยอะเกินไป อย่างไรผมจะมาเล่าให้ฟังใหม่นะค๊าบ
