HTML DOM คืออะไร?
HTML DOMเป็นโมเดลวัตถุสำหรับHTML มันกำหนด:
- องค์ประกอบ HTML เป็นวัตถุ
- คุณสมบัติสำหรับองค์ประกอบ HTML ทั้งหมด
- วิธีการสำหรับองค์ประกอบ HTML ทั้งหมด
- เหตุการณ์สำหรับองค์ประกอบ HTML ทั้งหมด
HTML DOMเป็นAPI (Programming Interface) สำหรับJavaScript :
- JavaScript สามารถเพิ่ม/เปลี่ยน/ลบองค์ประกอบ HTML
- JavaScript สามารถเพิ่ม/เปลี่ยน/ลบแอตทริบิวต์ HTML
- JavaScript สามารถเพิ่ม/เปลี่ยน/ลบสไตล์ CSS
- JavaScript สามารถตอบสนองต่อเหตุการณ์ HTML ได้
- JavaScript สามารถเพิ่ม/เปลี่ยน/ลบเหตุการณ์ HTML
HTML DOM (Document Object Model)
เมื่อโหลดหน้าเว็บ เบราว์เซอร์จะสร้างD ocument O bject M odel ของหน้า
โมเดลHTML DOMถูกสร้างเป็นแผนผังของObjects :
HTML DOM Tree of Objects
ค้นหาองค์ประกอบ HTML
เมื่อคุณต้องการเข้าถึงองค์ประกอบ HTML ด้วย JavaScript คุณต้องค้นหาองค์ประกอบก่อน
มีสองวิธีในการทำเช่นนี้:
- ค้นหาองค์ประกอบ HTML ด้วย id
- ค้นหาองค์ประกอบ HTML ด้วยชื่อแท็ก
- ค้นหาองค์ประกอบ HTML ตามชื่อคลาส
- ค้นหาองค์ประกอบ HTML ด้วยตัวเลือก CSS
- การค้นหาองค์ประกอบ HTML โดยการรวบรวมวัตถุ HTML
ค้นหาองค์ประกอบ HTML ด้วย Id
วิธีที่ง่ายที่สุดในการค้นหาองค์ประกอบ HTML ใน DOM คือการใช้รหัสองค์ประกอบ
ตัวอย่างนี้พบองค์ประกอบที่มี id="intro":
ตัวอย่าง
var myElement = document.getElementById("intro");
หากพบองค์ประกอบ เมธอดจะคืนค่าองค์ประกอบเป็นวัตถุ (ใน myElement)
หากไม่พบองค์ประกอบ myElement จะมีค่า null
ค้นหาองค์ประกอบ HTML ด้วยชื่อแท็ก
ตัวอย่างนี้พบทั้งหมด <p> องค์ประกอบ:
ตัวอย่าง
var x = document.getElementsByTagName("p");
ตัวอย่างนี้ค้นหาองค์ประกอบที่มี id="main" แล้วค้นหาองค์ประกอบ <p> ทั้งหมดภายใน "main":
ตัวอย่าง
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
ค้นหาองค์ประกอบ HTML ตามชื่อคลาส
หากคุณต้องการค้นหาองค์ประกอบ HTML ทั้งหมดที่มีชื่อคลาสเดียวกัน ให้ใช้ getElementsByClassName()
ตัวอย่างนี้ส่งคืนรายการองค์ประกอบทั้งหมดที่มี class="intro"
ตัวอย่าง
var x = document.getElementsByClassName("intro");
การค้นหาองค์ประกอบตามชื่อคลาสไม่ทำงานใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
ค้นหาองค์ประกอบ HTML ด้วยตัวเลือก CSS
หากคุณต้องการค้นหาองค์ประกอบ HTML ทั้งหมดที่ตรงกับตัวเลือก CSS ที่ระบุ (id, ชื่อคลาส, ประเภท, คุณลักษณะ, ค่าของแอตทริบิวต์ ฯลฯ) ให้ใช้เมธอด querySelectorAll()
ตัวอย่างนี้ส่งคืนรายการองค์ประกอบ <p> ทั้งหมดที่มี class="intro"
ตัวอย่าง
var x = document.querySelectorAll("p.intro");
วิธี querySelectorAll() ไม่ทำงานใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
การค้นหาองค์ประกอบ HTML ด้วยคอลเล็กชันออบเจกต์ HTML
คอลเล็กชันวัตถุ HTML ยังสามารถเข้าถึงได้:
บทช่วยสอน HTML DOM
บทช่วยสอน HTMLDOM แบบเต็ม
นี่เป็นการแนะนำสั้นๆ เกี่ยวกับ HTMLDOM
สำหรับบท ช่วยสอน HTMLDOM แบบเต็ม ให้ไปที่W3Schools HTMLDOM Tutorial