Html Dom /javascript
#Html_Dom
HTML DOM ย่อมาจาก Document Object Model สำหรับ HTML ครับ
มันคือ อินเทอร์เฟซ (interface) มาตรฐานทางโปรแกรม ที่ช่วยให้โปรแกรมหรือสคริปต์ (เช่น JavaScript) สามารถเข้าถึงและจัดการเนื้อหา, โครงสร้าง, และสไตล์ของเอกสาร HTML ได้
ส่วนประกอบและความสำคัญ
การแทนเอกสาร (Representation):
DOM แปลงเอกสาร HTML (ซึ่งเป็นข้อความ) ให้เป็น โครงสร้างแบบต้นไม้ (Tree Structure) ของ ออบเจกต์ (Objects).
แต่ละส่วนประกอบของ HTML, เช่น <html>, <body>, <p>, และแม้กระทั่งข้อความที่อยู่ภายใน, จะถูกแทนด้วย โหนด (Nodes) หรือ ออบเจกต์ ที่เรียกว่า DOM Node.
การเข้าถึงและการจัดการ (Access and Manipulation):
เนื่องจากทุกอย่างถูกแทนด้วยออบเจกต์ ทำให้ JavaScript สามารถใช้คุณสมบัติ (properties) และเมธอด (methods) ของ DOM เพื่อ:
เปลี่ยนแปลง องค์ประกอบ HTML (เช่น การเปลี่ยนข้อความในย่อหน้า, การเปลี่ยนสี).
เพิ่ม/ลบ องค์ประกอบ HTML ใหม่.
ตอบสนอง ต่อเหตุการณ์ (events) ของผู้ใช้ (เช่น การคลิกเมาส์).
เปลี่ยน สไตล์ CSS ขององค์ประกอบ.
กล่าวโดยสรุป HTML DOM คือแผนที่ (Map) และชุดเครื่องมื อ (Toolkit) ที่ JavaScript ใช้เพื่อ "พูดคุย" และ "ควบคุม" เว็บเพจได้แบบไดนามิก (dynamic) ครับ ทำให้หน้าเว็บไม่เป็นแค่เอกสารนิ่ง ๆ แต่สามารถโต้ตอบและเปลี่ยนแปลงได้ตามเวลาจริง (real-time).
ถ้าเพิ่งเริ่มกับ html javascript เรามักจะได้ยินคำว่า “DOM” บ่อยมาก เราแนะนำให้จำภาพง่าย ๆ ก่อนว่า HTML เป็นโครงสร้างหน้าเว็บ ส่วน DOM คือ “ต้นไม้ของออบเจกต์” ที่เบราว์เซอร์สร้างขึ้นจาก HTML อีกที เพื่อให้ JavaScript เข้ามาจัดการได้ ภาพรวม DOM Tree (เหมือนในรูปที่เจอบ่อย): เริ่มที่ document แล้วแตกเป็น <html> จากนั้นมี <head> และ <body> ภายในก็มี element ลูก ๆ เช่น <h1> <p> <a> รวมถึง node ประเภท text (ข้อความ) และ attribute (เช่น href) ด้วย พอเข้าใจว่าเว็บถูกแปลงเป็นต้นไม้ เราจะหา “กิ่ง” ที่ต้องการ แล้วแก้มันได้ ตัวอย่างพื้นฐานที่เราใช้บ่อยเวลาเริ่มทำเว็บแบบโต้ตอบ: 1) เลือก element จากหน้าเว็บ - document.getElementById('title') เหมาะกับของที่มี id ชัด ๆ - document.querySelector('.btn') เลือกตัวแรกที่ตรงเงื่อนไข - document.querySelectorAll('p') ได้รายการหลายตัว (NodeList) 2) เปลี่ยนข้อความ/HTML - el.textContent = 'สวัสดี DOM' (ปลอดภัย ใช้กับข้อความ) - el.innerHTML = '<b>หนา</b>' (ยืดหยุ่น แต่ต้องระวังข้อมูลที่มาจากผู้ใช้) 3) เปลี่ยนสไตล์ (CSS) แบบเร็ว ๆ - el.style.color = 'red' - el.classList.add('active') / remove / toggle (วิธีนี้นิยมกว่าเพราะจัดการผ่าน class) 4) จัดการ attribute ที่เจอบ่อยกับลิงก์ เช่น <a href="..."> เราแก้ได้ด้วย - link.setAttribute('href', 'https://example.com') - link.getAttribute('href') 5) เพิ่ม/ลบ element - const p = document.createElement('p') - p.textContent = 'เพิ่มย่อหน้าใหม่' - document.body.appendChild(p) - el.remove() (ลบ element ออกจาก DOM) 6) ทำให้เว็บ “โต้ตอบ” ด้วย events อันนี้คือหัวใจของการใช้ DOM กับ JavaScript เช่นปุ่มคลิกแล้วเปลี่ยนข้อความ: - btn.addEventListener('click', () => { title.textContent = 'คลิกแล้ว!' }) ทิปเล็ก ๆ จากประสบการณ์: ถ้าสคริปต์รันแล้วหา element ไม่เจอ ให้เช็กว่าเราเขียน JS ก่อน HTML โหลดเสร็จไหม วิธีง่ายคือวาง <script> ไว้ก่อนปิด </body> หรือใช้ DOMContentLoaded เพื่อรอให้ DOM พร้อมก่อนค่อยทำงาน สรุปคือ DOM เป็น “สะพาน” ระหว่าง HTML กับ JavaScript ทำให้หน้าเว็บจากเอกสารนิ่ง ๆ กลายเป็นหน้าเว็บที่แก้ได้แบบเรียลไทม์ ทั้งข้อความ โครงสร้าง และสไตล์
