JavaScript HTML DOM
ด้วย HTML DOM ทำให้ JavaScript สามารถเข้าถึงและเปลี่ยนแปลงองค์ประกอบทั้งหมดของเอกสาร HTML ได้
HTML DOM (Document Object Model)
เมื่อโหลดหน้าเว็บ เบราว์เซอร์จะสร้างD ocument O bject M odel ของหน้า
โมเดลHTML DOMถูกสร้างเป็นแผนผังของObjects :
HTML DOM Tree of Objects
ด้วยโมเดลวัตถุ JavaScript ได้รับพลังทั้งหมดที่จำเป็นในการสร้าง HTML แบบไดนามิก:
- JavaScript สามารถเปลี่ยนองค์ประกอบ HTML ทั้งหมดในหน้าได้
- JavaScript สามารถเปลี่ยนแอตทริบิวต์ HTML ทั้งหมดในหน้าได้
- JavaScript สามารถเปลี่ยนสไตล์ CSS ทั้งหมดในเพจได้
- JavaScript สามารถลบองค์ประกอบ HTML และแอตทริบิวต์ที่มีอยู่
- JavaScript สามารถเพิ่มองค์ประกอบ HTML และแอตทริบิวต์ใหม่ได้
- JavaScript สามารถตอบสนองต่อเหตุการณ์ HTML ที่มีอยู่ทั้งหมดในหน้า
- JavaScript สามารถสร้างเหตุการณ์ HTML ใหม่ในหน้า
สิ่งที่คุณจะได้เรียนรู้
ในบทต่อไปของบทช่วยสอนนี้ คุณจะได้เรียนรู้:
- วิธีการเปลี่ยนเนื้อหาขององค์ประกอบ HTML
- วิธีเปลี่ยนสไตล์ (CSS) ขององค์ประกอบ HTML
- วิธีตอบสนองต่อเหตุการณ์ HTML DOM
- วิธีเพิ่มและลบองค์ประกอบ HTML
DOM คืออะไร?
DOM เป็นมาตรฐาน W3C (World Wide Web Consortium)
DOM กำหนดมาตรฐานสำหรับการเข้าถึงเอกสาร:
"W3C Document Object Model (DOM) เป็นแพลตฟอร์มและอินเทอร์เฟซที่เป็นกลางทางภาษา ซึ่งช่วยให้โปรแกรมและสคริปต์สามารถเข้าถึงและอัปเดตเนื้อหา โครงสร้าง และรูปแบบของเอกสารแบบไดนามิกได้"
มาตรฐาน W3C DOM แบ่งออกเป็น 3 ส่วนที่แตกต่างกัน:
- Core DOM - รุ่นมาตรฐานสำหรับเอกสารทุกประเภท
- XML DOM - โมเดลมาตรฐานสำหรับเอกสาร XML
- HTML DOM - โมเดลมาตรฐานสำหรับเอกสาร HTML
HTML DOM คืออะไร?
HTML DOM เป็นโมเดลอ็อบเจ็กต์ มาตรฐานและ อินเทอร์เฟซการเขียนโปรแกรมสำหรับ HTML มันกำหนด:
- องค์ประกอบ HTML เป็นวัตถุ
- คุณสมบัติขององค์ประกอบ HTML ทั้งหมด
- วิธีการเข้าถึงองค์ประกอบ HTML ทั้งหมด
- เหตุการณ์สำหรับองค์ประกอบ HTML ทั้งหมด
กล่าวอีกนัยหนึ่ง: HTML DOM เป็นมาตรฐานสำหรับวิธีการรับ เปลี่ยนแปลง เพิ่ม หรือลบองค์ประกอบ HTML