ทำความรู้จัก HTML DOM

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 ส่วน

1. Core DOM – การจัดรูปแบบ DOM Tree สำหรับทุกๆ เอกสาร
2. XML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร XML
3. 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

1. ในหนึ่ง Node Tree (ใน 1 เอกสาร HTML นั่นแหละ) จะมี Node เพียงแค่อันเดียวที่อยู่บนสุด เราเรียกว่า Root
2. ทุกๆ Node ยกเว้น Root จะต้องมี 1 Parent Node (ลูกๆ ยังต้องมีพ่อกะแม่ผู้ให้กำเนิด)
3. ใน 1 Node จะมีหรือไม่มีลูก (Children) ก็ได้
4. Leaf คือ Node ที่ไม่มีลูก (Children) จำนวนลูกเท่ากับ 0 นั่นเอง
5. Siblings คือ Nodes ที่มี Parent Node เดียวกัน (เป็นพี่น้องกันนี่เอง)

HTML DOM Properties และ Methods
ยกตัวอย่างบางส่วนของ properties มาให้เห็นกัน สมมติ Node x คือ Tag H1 ดูรูปที่ 1 ประกอบ

1. x.innerHTML – แทนที่ข้อมูลใน Node x ด้วย Tag HTML โดย method นี้จะ compile Tag HTML ให้
2. x.innerText – แทนที่ข้อมูลใน Node x ด้วย Text ธรรมดา โดย method นี้จะไม่ compile Tag HTML ให้ ถ้าใส่ Tag HTML ตัวมันเองจะมองว่าเป็นเพียงแค่ Text
3. x.nodeName – ชื่อของ Node x คือ “H1”
4. x.parentNode – parent node ของ x คือ “BODY”
5. x.childNodes – child nodes ของ x (ลูกของ H1 คือ #text, #text คือ Text Node)
6. x.nodeValue – value ของ x คือ null แต่ value ของ #text ซึงเป็นลูกของ x คือ “My header”

ยกตัวอย่างบางส่วนของ methods

1. x.getElementById(id) – เกทอิลิเมนต์ด้วย id ที่เรากำหนด, และ id ต้องมีหนึ่งเดียวในเอกสาร HTML
2. x.getElementsByTagName(name) – เกทอิลิเมนต์ด้วยชื่อ Tag ตามที่เรากำหนด ผลลัพธ์ที่ได้จะเป็น array ของ object เวลาเราจะอ้างอิงแต่ละ object คือ x.getElementsByTagName(“DIV”)[i].nodeType, i มีค่าได้ตั้งแต่ 0-n โดย n < x.getElementsByTagName("DIV").length
   Tip-Trick ในการจำ ถ้า methods ใด มี keyword แบบนี้ “getElements” ผลลัพธ์ที่ได้ต้องเป็น array
3. x.appendChild(node) – แทรก child node ใน x เช่น x.appendChild(document.createTextNode (“ลงทุนกับสลากออมสิน“)); คือ การสร้าง Text Node แทรกใน Node x
4. x.removeChild(node) – remove child node จาก x เช่น x.removeChild(x.firstChild) เมื่อกี้ผมแทรก Text Node อันใหม่ใน x ทำให้ x มีลูก 2 ตัว ผมก็ remove ลูกตัวแรกออก ก็คือ #text ที่มี value เท่ากับ “My header” ใน Tag H1 ก็จะเหลือแต่ #text ที่มี value เท่ากับ “ลงทุนกับสลากออมสิน” เพียงตัวเดียว แค่นั้นเอง 
5. ที่มา:http://honglub.com/web-applications/html-dom-tutorial/