: รู้จักกับ DOM (Document Object Model)
>> แท้จริงว่าจะไม่กล่าวถึงเรื่องนี้แล้ว แต่ในเมื่อมันเป็นเรื่องสำคัญจึงเว้นไปไม่ได้ครับ อะไรคือ DOM แล้วมันเกี่ยวข้องกับ JavaScript อย่างไร?
ตอบ DOM คือวิธีการครับ เป็นวิธีการที่คิดขึ้นมาเพื่อเข้าถึงและควบคุมเอกสาร HTML แบ่งออกเป็นระดับ (level) เท่าที่ทราบขณะนี้คือ
- level 1 ว่าด้วยเรื่อง Core และ HTML
- level 2 ว่าด้วยเรื่องของ level 1, Events, Style, Views, Traversal และ Range
- level 3 ว่าด้วยเรื่องของ level 2, Load กับ Save และ Validation
>> เว็บแต่ละหน้าหรือเอกสาร HTML ของเรานั้นประกอบด้วยแท็กใช่ไหมล่ะครับ พื้นฐานเลยก็คือแท็ก html ภายในแท็กนี้ก็จะมีแท็ก head และ body หรืออยากเพิ่มขนาดตัวอักษรในลักษณะหัวข้อก็ใช้แท็ก h1, h2 ยัน h6 หรืออยากเน้นตัวหนาก็ใช้แท็ก b หรือ strong ใช่ไหมล่ะ ว่ากันว่าหากนำเอาแต่ละแท็กมาโยงกันเป็นโครงสร้างก็จะได้รูปต้นไม้กลับหัวครับ
>> ต้นไม้กลับหัวหรือว่า tree นี้ประกอบไปด้วยแท็ก เราจะเรียกแต่ละแท็กที่ทำหน้าที่ของมันว่าออบเจ็กต์ (object) หรือจะเรียกแต่ละแท็กที่ซ้อนกันเป็นลำดับชั้นนี้ว่า node นะครับ
>> เช่นนี้กล่าวได้ว่า node เริ่มต้นก็คือ html หรือออบเจ็กต์ html นั่นเอง แต่มี node ที่อยู่ก่อน node นี้ครับ เขาเรียกกันว่า root node และมันมีชื่ออย่างเป็นทางการว่า Document ครับ
>> เจ้า Document node นี้จะเป็นตัวแทนของทุก node ภายในเว็บหรือเอกสาร HTML หนึ่งหน้า (ตัวพ่อ) เพื่อใช้เข้าถึงแต่ละ node ในเอกสารได้ (ตัวลูก) ด้วยคำสั่ง document
>> สมมติเรามีเอกสารที่ประกอบด้วยแท็กดังต่อไปนี้นะครับ เริ่มจาก
html
head
body
h1
p
p
แล้วเขียนคำสั่ง
var e = document.getElementsByTagName("html");
ผลลัพธ์ของ e คือ
html
head
body
h1
p
p
เอาล่ะ ลองเขียนแบบนี้บ้าง
ver e = document.getElementsByTagName("head");
ผลลัพธ์ของ e คือ
head
body
h1
p
p
แล้วแบบนี้ล่ะ
var e = document.getElementsByTagName("p");
ผลลัพธ์ของ e คือ
p
p
นี่แสดงว่าอะไร? แสดงว่าเจ้า Document นี้สามารถเข้าถึงแต่ละสมาชิกแท็กที่อยู่ในเอกสารหนึ่งหน้าได้อย่างไรล่ะครับ
>> งงนะบางทีเรียก แท็ก บางทีก็เรียก node บางทีก็ว่า object ตกลงมันอันเดียวกันไหมหือ?
ตอบ แท้จริงเราก็พูดถึงสิ่งเดียวกันทั้งหมดนั่นแหละครับ เพียงแต่แยกบริบทของมันว่ากำลังทำอะไร หรือมีสถานะเป็นอะไรในเรื่องนั้นๆครับ ประมาณนี้
- แท็ก (tag) พูดถึงตอนจะเขียนมันเป็นเอกสารหนึ่งหน้า จะต้องประกอบด้วยแท็กอะไรบ้าง แบบนี้จะไม่พูดว่า node หรือ object เพราะฟังแล้วไม่เข้าใจ
- node พูดถึงตอนที่คิดถึงเอกสารในแบบโครงสร้างต้นไม้กลับหัวครับ ว่าประกอบด้วย node เรียกซ้อนกันไปอย่างไร
- ออบเจ็กต์ (object) พูดถึงตอนเขียนภาษาจาวาสคริปต์ ภาษานี้สร้างออบเจ็กต์ได้ แต่ละออบเจ็กต์จะมีคุณสมบัติ (properties) และพฤติกรรม (methods) รวมถึงเหตุการณ์ (evnets) เป็นของตัวเองครับ
>> อย่างไรผมจะเล่าให้ละเอียดมากขึ้นใน part ต่อๆไปนะครับ ขอบคุณที่ติดตามอ่านกันนะ สวัสดีครับ
