HTML DOM เป็นหนึ่งในความลับของ Web Developer เก่งๆ เชื่อไหมว่า โปรแกรมเมอร์ส่วนใหญ่ไม่รู้จัก DOM ทั้งๆ ที่ใช้กันอยู่บ่อยๆ เช่น document.getElementById(“element”); หลายคนคงร้องอ๋อ…
อย่ามองข้ามเรื่อง DOM นะครับ DOM เป็นพื้นฐานสำคัญในการพัฒนาเว็บยุคใหม่ Javascript Library หลายๆ ยี่ห้อที่เรารู้จัก สร้าง method ครอบ DOM นี่แหละครับ ตัวอย่างเว็บดังๆ ที่ใช้ Javascript Library คือ Twitter, Facebook, WordPress,…
ปัญหาสำคัญของโปรแกรมเมอร์ส่วนใหญ่คือ แก้ไขหรือปรับปรุง Javascript Library เองไม่ได้ เพราะไม่มีพื้นฐานที่ดีใน Javascript และ HTML DOM มีหลายๆ คนปฏิเสธ Javascript ไปเลยก็มี เด็กจบใหม่ส่วนใหญ่มีความเชื่อผิดๆ ว่า Javascript เป็นภาษาที่ใช้สร้างลูกเล่นในเว็บ ไม่ได้มีความสำคัญอะไร และเป็นสคริปต์ที่น่ารำคาญ เพราะทุกครั้งที่เปิดไดอารี่ออนไลน์ของเพื่อน ชอบมี popup ขึ้นมาบ่อยๆ เพียงแค่มุมมองเล็กๆ ที่อคติ เราอาจจะพลาดโอกาสสำคัญๆ ที่จะเรื่องรู้อะไรใหม่ได้
DOM (Document Object Model) คือการจัดเอกสาร HTML ให้อยู่ในรูปแบบของ DOM Tree โดยนิยาม objects และ properties เพื่อให้โปรแกรมหรือสคริปต์ สามารถปรับเปลี่ยนโครงสร้าง, ข้อมูล และ styles ของ HTML DOM ผ่าน methods ได้
DOM แบ่งออกเป็น 3 ส่วน
- Core DOM – การจัดรูปแบบ DOM Tree สำหรับทุกๆ เอกสาร
- XML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร
- XML HTML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร HTML จากรูป 1
 |
| รูปที่ 1 |
เป็นการเปรียบเทียบเอกสาร HTML เมื่อถูกจัดรูปแบบเป็น DOM Tree ถ้าดูดีๆ เหมือนรากต้นไม้ที่แตกสาขา โดยแต่ละกล่อง เราเรียกว่า Node เพราะฉะนั้นรูปที่ 1 คือ DOM Node Tree นั่นเอง
คำถามต่อแล้ว DOM Node Tree คืออะไร?
คือการนิยามแต่ละ Node ใน DOM Node Tree เราอาจจะเคยได้ยิน Keyword นี้กันบ้าง เช่น Node Parents, Children และ Siblings มาดูสิว่า เค้าอธิบายว่ายังไงกันบ้าง
 |
| รูปที่ 2 |
- ในหนึ่ง Node Tree (ใน 1 เอกสาร HTML นั่นแหละ) จะมี Node เพียงแค่อันเดียวที่อยู่บนสุด เราเรียกว่า Root
- ทุกๆ Node ยกเว้น Root จะต้องมี 1 Parent Node (ลูกๆ ยังต้องมีพ่อกะแม่ผู้ให้กำเนิด)
- ใน 1 Node จะมีหรือไม่มีลูก (Children) ก็ได้
- Leaf คือ Node ที่ไม่มีลูก (Children) จำนวนลูกเท่ากับ 0 นั่นเอง
- Siblings คือ Nodes ที่มี Parent Node เดียวกัน (เป็นพี่น้องกันนี่เอง) HTML DOM Properties และ Methods
อ่านเพิ่มเติม >>
ข้อมูลจาก: ห้องลับ.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น