Document
Object Model (DOM) เป็นวิธีการอธิบายว่าข้อมูลต่างๆ ในเอกสาร HTML
หรือ XML จัดเรียงตัวแบบเชิงวัตถุ (object
oriented) อย่างไร DOM เป็นวิธีในการสร้าง
API ให้สามารถควบคุมเนื้อหา โครงสร้าง
และรูปแบบของเอกสารได้เดิมทีนั้นเว็บเบราว์เซอร์แต่ละค่ายมีการพัฒนา DOM
โดยใช้จาวาสคริปต์ที่แตกต่างกันออกไป ทาง W3C จึงได้ร่างมาตรฐานกลางที่เรียกว่า
W3C Document Object Model (W3C DOM) โดยไม่ขึ้นกับภาษาโปรแกรมมิ่งภาษาใดภาษาหนึ่ง
การจัดข้อมูลในรูปแบบ DOM นั้นใช้แผนภูมิต้นไม้ในการบอกความสัมพันธ์ระหว่างวัตถุแต่ละชิ้น
อย่างไรก็ตาม DOM มีจุดอ่อนในเรื่องประสิทธิภาพเมื่อต้องประมวลผลเอกสารขนาดใหญ่
ซึ่ง DOM จำเป็นต้องอ่านเอกสารให้ครบทั้งหมดก่อน
จึงจะเริ่มประมวลผล ข้อเสียนี้จึงเกิดการออกแบบ SAX ที่ใช้วิธีอ่านเอกสารทีละส่วนแทน
ตามมาตรฐานของ W3C นั้น
ได้แบ่ง DOM เป็นระดับชั้น (level) ที่มีข้อกำหนดแตกต่างกันออกไป
ปัจจุบันมี Level 0-3
12.2 Modeling a Document: DOM Nodes and Trees
- มองโครงสร้างเป็น DOM Tree
- จะมองความสัมพันธ์เป็นแบบพ่อ แม่ และลูก
- โหนดแต่ละโหนดสามารถมีลูกได้เยอะ แต่มีพ่อแม่ได้แค่คู่เดียว
- โหนดที่มีโหนดแม่เดียวกันจะเรียกว่าพี่น้อง
- html ที่โหนดในต้นไม้ DOM จะเรียกว่าโหนดรากเพราะมีไม่มีพ่อแม่
12.3
Traversing and Modifying a DOM Tree
CSS class highlighted 12.4 DOM Collections สามารถ
add remove select ใน form ของHTML
ได้เลย
12.4 DOM
Collections
- DOM มีกลุ่มคอลเลกชันของวัตถุที่เกี่ยวข้องในหน้า
- คอลเลกชัน DOM มีการเข้าถึงเป็นคุณสมบัติของวัตถุ
DOM เช่นวัตถุเอกสารหรือโหนด DOM
- คุณสมบัติความยาวของสะสมระบุจำนวนของรายการในการเก็บรวบรวม
12.5 Dynamic
Styles
- รูปแบบขององค์ประกอบสามารถเปลี่ยนแปลงได้แบบไดนามิก
- สามารถสร้างผลกระทบเมาส์เลื่อนเมนูแบบโต้ตอบและภาพเคลื่อนไหว
- วิธี setAttribute จะใช้ในการกำหนดคุณลักษณะอย่างมีสไตล์ด้วยสีที่ผู้ใช้กำหนดสำหรับ
background-colorคุณสมบัติ CSS
- หากคุณมีการกำหนดไว้ล่วงหน้าวินาทีกับการเรียนรูปแบบที่กำหนดไว้สำหรับเอกสารของคุณคุณยังสามารถใช้วิธีการ
setAttribute เพื่อตั้งค่าแอตทริบิวต์ชั้น
12.6 Using a
Timer and Dynamic Styles to Create
Animated Effects
- ตัวอย่างต่อไปแนะนำวิธีการ setInterval และ
clearInterval วัตถุหน้าต่างของรวมพวกเขามีรูปแบบแบบไดนามิกเพื่อสร้างผลภาพเคลื่อนไหว
- ตัวอย่างนี้เป็นโปรแกรมดูภาพขั้นพื้นฐานที่ช่วยให้คุณสามารถเลือกปกหนังสือและจะดูในขนาดที่ใหญ่กว่า.
เมื่อผู้ใช้คลิกที่ภาพรุ่นใหญ่เติบโตจากมุมบนซ้ายของพื้นที่ภาพหลัก
ไม่มีความคิดเห็น:
แสดงความคิดเห็น