พื้นฐานของ JavaScript : DOM & Event

1. DOM คืออะไร

DOM ย่อมาจาก Document Object Model

มันคือโครงสร้างของเอกสาร HTML ที่แปลงให้อยู่ในรูปแบบวัตถุ (Object) เพื่อให้ JavaScript สามารถเข้าถึงและเปลี่ยนแปลงเนื้อหา หน้าตา หรือโครงสร้างของเว็บเพจได้

ง่ายๆ คือ
"HTML -> แปลงเป็นวัตถุ -> JS เข้าถึงได้"

ตัวอย่าง HTML:

html

<p id="myText">สวัสดี DOM!</p>

JS สามารถเข้าถึงและแก้ไขได้:

javascript

let element = document.getElementById("myText");
element.textContent = "ข้อความถูกเปลี่ยนแล้ว";

---

2. วิธีเข้าถึง DOM

JavaScript มีหลายวิธีในการเลือก element จาก DOM

• document.getElementById("id") => เลือกตาม id

• document.getElementsByClassName("class") => เลือกตาม class

• document.getElementsByTagName("tag") => เลือกตาม tag

• document.querySelector("selector") => เลือกตัวแรกที่ตรงกับ selector (ใช้เหมือน CSS)

• document.querySelectorAll("selector") => เลือกทั้งหมดที่ตรงกับ selector

ตัวอย่าง:

javascript

let p1 = document.getElementById("myText");
let p2 = document.querySelector("#myText");

---

3. การเปลี่ยนแปลง DOM

เมื่อเลือก element ได้แล้ว เราสามารถเปลี่ยน:

เปลี่ยนข้อความ

javascript

p1.textContent = "เปลี่ยนข้อความแล้ว";

เปลี่ยน HTML ภายใน

javascript

p1.innerHTML = "<b>ตัวหนา</b>";

เปลี่ยน style

javascript

p1.style.color = "red";
p1.style.fontSize = "20px";

เปลี่ยน attribute

javascript

p1.setAttribute("title", "ข้อความ tooltip");

---

4. สร้าง / ลบ element

สร้าง element ใหม่

javascript

let newPara = document.createElement("p");
newPara.textContent = "ยินดีต้อนรับ";

document.body.appendChild(newPara);

ลบ element

javascript

p1.remove();

---

5. Event คืออะไร

Event คือเหตุการณ์ที่เกิดขึ้นบนหน้าเว็บ เช่น ผู้ใช้คลิก เม้าส์ขยับ พิมพ์ข้อความ ฯลฯ

JavaScript สามารถฟัง (listen) และตอบสนอง event เหล่านี้ได้

---

6. วิธีผูก Event

แบบ inline (ใน HTML เอง)

html

<button onclick="alert('สวัสดี!')">กดฉันสิ</button>

แบบใช้ JavaScript (ควรใช้แบบนี้)

javascript

let btn = document.querySelector("button");

btn.addEventListener("click", function() {
  alert("สวัสดีจาก event listener");
});

---

7. Event ที่พบบ่อย

• click = เมื่อคลิก

• mouseover = เมื่อนำเม้าส์ชี้

• mouseout = เมื่อเม้าส์ออกจาก element

• keydown = เมื่อกดคีย์บอร์ด

• submit = เมื่อส่งฟอร์ม

• change = เมื่อค่าถูกเปลี่ยน

ตัวอย่างการใช้งาน

javascript

let input = document.querySelector("input");

input.addEventListener("change", function() {
  console.log("คุณเปลี่ยนค่าเป็น: " + input.value);
});

---

8. ตัวอย่าง DOM + Event รวมกัน

html

<button id="btnChange">เปลี่ยนข้อความ</button>
<p id="myText">ข้อความเดิม</p>

<script>
  let btn = document.getElementById("btnChange");
  let text = document.getElementById("myText");

  btn.addEventListener("click", function() {
    text.textContent = "ข้อความใหม่!";
  });
</script>

---

สรุปสั้นๆ

• DOM ช่วยให้ JS เข้าถึงและควบคุม HTML

• Event ช่วยให้ JS ตอบสนองต่อการกระทำของผู้ใช้

• ทั้งสองเรื่องนี้เป็นพื้นฐานสำคัญของการทำเว็บแบบ interactive