Html Home /javascript
# Html_ Dom
HTML DOM stands for Document Object Model for HTML.
It is a programmatic standard interface that allows programs or scripts (such as JavaScript) to access and manage the content, structure, and style of HTML documents.
Components and Significance
Representation:
DOM converts an HTML document (which is text) into a Tree Structure of Objects.
Each component of HTML, such as < html >, < body >, < p >, and even the text inside, is represented by a node or object called a DOM Node.
Access and management:
Since everything is represented by objects, JavaScript can use DOM properties and methods to:
Change HTML elements (e.g., changing text in paragraphs, changing color).
Add / Remove New HTML Element.
Respond to user events (such as mouse clicks).
Change the CSS style of the elements.
In short, HTML DOM is a map and a toolkit that JavaScript uses to "talk" and "control" a dynamic web page, so that web pages are not just still documents, but can interact and change in 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 ทำให้หน้าเว็บจากเอกสารนิ่ง ๆ กลายเป็นหน้าเว็บที่แก้ได้แบบเรียลไทม์ ทั้งข้อความ โครงสร้าง และสไตล์
