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

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

DOM นั้นมาจากคำว่า Document Object Model ก็คือการมองส่วนต่างๆของหน้าเว็บให้เป็น object เพื่อให้เราสามารถเรียกใช้ object เหล่านั้นได้

จริงๆแล้ว DOM html เป็นเรื่องที่เข้าใจได้ง่ายนิดเดียว DOM ก็คือการประกาศ object เพื่อให้สามารถเข้าถึงได้ (เช่นเราเขียน javascript เพื่อเรียก object ต่างๆที่อยู่หน้าเว็บ)

อธิบายไป อาจจะงง ไปดูของจริงให้เห็นภาพกันดีกว่า

จากหน้าเว็บปกติที่แสนจะธรรมดา

<html> <head>   <title>My title</title> </head> <body>   <h1>My header</h1>   <a href="test.html">My link</a> </body> </html>

 จากหน้าเว็บนี้ ถ้าเราเอามาเขียนผังโครงสร้างแบบ tree เพื่อใช้ในการอธิบาย DOM เราก็จะได้ออกมาหน้าตาแบบนี้


จากรูปเราจะเห็นชัดเลย ว่าใครอยู่เหนือใคร  ใครเป็น parent ใครเป็น child และจากพื้นฐานของ DOM ที่ทำให้เราแยกแยะ object ออกมาได้แล้วนั้น จะทำให้เวลาที่เราจะ access เข้าถึงแต่ละ object เราก็จะทำได้อย่างง่ายขึ้นนั่นเองครับ

เช่น ซ้ายมือ เราจะเห็นว่า title เป็น child ของ head และกลับกัน head เป็น parent ของ child

โดย DOM นี้จะถูกประกาศเมื่อ หน้าเว็บโหลดเสร็จแล้วเท่านั้นครับ และ element ใดที่ไม่ปรากฏเมื่อตอนที่หน้าเว็บโหลดเสร็จแล้ว ก็จะไม่มีใน DOM ด้วยเช่นกัน (ส่วนที่สร้างโดยใช้ javascript)

และอาจจะสงสัย ว่า DOM เอาไปใช้ตอนไหนอย่างไร จริงๆ ไม่ได้เอามาใช้อะไรเป็นเรื่องราวหรอกครับ แต่เป็นเรื่องที่เราจะต้องเข้าใจ เพราะว่าทั้ง CSS เอย และ JavaScript เอย มีการเรียกใช้ และเขียน syntax ที่อ้างอิงกับ parent child พวกนี้ด้วยครับ  หากเรามองไม่ออกว่า ใครเหนือใคร เวลาที่เราเขียน CSS เราก็จะงงมากครับ

เรื่องของ DOM ก็มีเท่านี้แหล่ะครับ ไม่อยากให้เข้าใจยาก 

Create: Modify : 2010-08-05 09:30:06 Read : 17907 URL :