(ความแตกต่างเล็กน้อย)
// Children
const parent = document.getElementById("parent");
console.log(parent.children); // HTMLCollection(3)
console.log(parent.children[0]); // 
";
box.innerHTML = userInput; // ⚠️ ปลอดภัยไม่ดี
// แทนที่ใช้ textContent สำหรับ user input
box.textContent = userInput; // ปลอดภัย
```
#### innerText - ข้อความที่มองเห็น
```javascript
// HTML:
```
#### insertBefore() - เพิ่มก่อน element
```javascript
const container = document.getElementById("container");
// HTML:
const newDiv = document.createElement("div");
newDiv.textContent = "Item 0";
const firstChild = container.firstElementChild;
container.insertBefore(newDiv, firstChild);
// HTML:
```
#### insertAdjacentHTML() - เพิ่มที่ตำแหน่งต่างๆ
```javascript
const element = document.querySelector("#box");
// 'beforebegin' - ก่อน element
element.insertAdjacentHTML("beforebegin", "Counter App
```
### ตัวอย่าง 2: Todo List
```html
Todo List
```
### ตัวอย่าง 3: Form Validation
```html
Form Validation
```
### ตัวอย่าง 4: Image Gallery
```html
Image Gallery
```
---
## แบบฝึกหัด {#exercises}
### คำอธิบาย
แบบฝึกหัดเหล่านี้ออกแบบมาเพื่อให้:
- ฝึกปฏิบัติ DOM manipulation และ event handling
- เพิ่มความเข้าใจผ่าน hands-on projects
- สร้างความมั่นใจในการสร้าง interactive features
- ก้าวจาก simple tasks ไปยัง complex projects
- ได้ประสบการณ์กับ real-world scenarios
แบบฝึกหัดเรียงจาก Easy (ง่าย) ไป Hard (ยาก) เพื่อให้ความท้าทายเพิ่มขึ้นทีละน้อย
### ระดับ Easy
#### 1. Color Changer
```javascript
// สร้างปุ่ม 3 ตัว (Red, Green, Blue)
// เมื่อคลิกปุ่ม ให้เปลี่ยนสีพื้นหลังของ page
```
#### 2. Show/Hide Element
```javascript
// สร้างปุ่ม Toggle
// เมื่อคลิก ให้ซ่อน/แสดง div
```
#### 3. Text Input Display
```javascript
// เมื่อพิมพ์ในช่อง input ให้แสดงข้อความใน div
```
### ระดับ Medium
#### 4. Interactive List
```javascript
// สร้าง input และปุ่ม Add
// เมื่อคลิก Add ให้เพิ่ม item เข้า list
// สามารถลบ item ได้ด้วย
// สามารถทำเครื่องหมาย item ได้
```
#### 5. Accordion Menu
```javascript
// สร้าง accordion ที่มี 3 sections
// เมื่อคลิก section ให้ขยาย/ยุบ
// เฉพาะ 1 section เท่านั้นที่ขยายได้
```
#### 6. Modal Dialog
```javascript
// สร้างปุ่มเปิด Modal
// Modal มีปุ่มปิด
// ลบ modal เมื่อคลิก ปุ่มปิดหรือพื้นหลัง
```
### ระดับ Hard
#### 7. Real-time Search
```javascript
// สร้าง input ค้นหา
// มี list ของข้อมูล (ชื่อผู้คน)
// เมื่อพิมพ์ ให้กรอง list แบบ real-time
// ไม่ case-sensitive
```
#### 8. Drag and Drop
```javascript
// สร้าง draggable elements
// สร้าง drop zones
// ลาก elements ไปยัง drop zones
// บันทึกตำแหน่งที่ลาก
```
#### 9. Shopping Cart
```javascript
// สร้างหน้าจำหน่ายสินค้า (ชื่อ, ราคา, รูป)
// ปุ่ม Add to Cart
// แสดง cart ด้านข้าง
// คำนวณราคารวม
// สามารถเปลี่ยน quantity และลบสินค้า
```
#### 10. Advanced Form Validation
```javascript
// สร้าง form สมัครสมาชิก
// ตรวจสอบ:
// - Username (3-20 ตัวอักษร)
// - Email (valid format)
// - Password (min 8 ตัวอักษร, ต้องมีตัวเลข)
// - Confirm Password
// - Terms & Conditions (ต้อง check)
// แสดง error messages
// Disable submit button จนกว่า valid
```
---
## สรุป
- **DOM** คือ JavaScript API ที่ใช้จัดการ HTML
- **querySelector/querySelectorAll** ทำให้ง่ายและ flexible ที่สุด
- **textContent** สำหรับข้อความ, **innerHTML** สำหรับ HTML (ระวัง XSS)
- **createElement + appendChild** เพื่อสร้าง elements
- **classList** เพื่อจัดการ classes
- **addEventListener** สำหรับจับเหตุการณ์
- **Event Delegation** ทำให้ efficient สำหรับหลายๆ elements
- **preventDefault()** เพื่อยกเลิก default actions
- **event.target** เพื่อรู้ว่า element ไหนถูก trigger
---
## แหล่งอ้างอิง
- [MDN - DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
- [MDN - DOM API](https://developer.mozilla.org/en-US/docs/Web/API/DOM)
- [MDN - Events](https://developer.mozilla.org/en-US/docs/Web/Events)
- [JavaScript.info - DOM](https://javascript.info/dom-nodes)
- [JavaScript.info - Events](https://javascript.info/events)
Title
console.log(parent.childNodes); // NodeList (รวม text nodes) console.log(parent.firstElementChild); //Title
console.log(parent.lastElementChild); // Span text // Siblings console.log(h1.nextElementSibling); //Paragraph
console.log(h1.previousElementSibling); // null (ไม่มี) const p = document.querySelector("p"); console.log(p.nextElementSibling); // Span text console.log(p.previousElementSibling); //Title
``` ### Traverse ผ่าน DOM ```javascript // ขึ้นไปหา parent ที่ตรงตามเงื่อนไข const button = document.querySelector("button"); const card = button.closest(".card"); // ขึ้นไปจนหา .card console.log(card); //...
// ลงมาหา child ที่ตรงตามเงื่อนไข
const form = document.querySelector("form");
const submitBtn = form.querySelector('[type="submit"]');
console.log(submitBtn); //
```
---
## การจัดการ Elements {#manipulating-elements}
### คำอธิบาย
การจัดการ (manipulate) elements คือการแก้ไข content, structure, และ styling ของ HTML elements ผ่าน JavaScript ความสามารถนี้ช่วยให้:
- สร้าง dynamic content ที่เปลี่ยนแปลงตามการกระทำของผู้ใช้
- สร้าง Single Page Applications (SPAs) โดยไม่ต้อง reload page
- Update content ของ page โดยไม่กระทบกับ page เอง
- สร้าง user interfaces ที่ interactive
- Manipulate DOM คือ core skill สำหรับ modern web development
### 1. ข้อความและ HTML
#### textContent - ข้อความล้วน
```javascript
// HTML: Hello World
const box = document.getElementById("box");
// อ่าน
console.log(box.textContent); // 'Hello World'
// เขียน (ลบ HTML tags)
box.textContent = "Goodbye";
// HTML กลายเป็น: Goodbye
```
#### innerHTML - HTML content
```javascript
// HTML: Hello World
const box = document.getElementById("box");
// อ่าน
console.log(box.innerHTML); // 'Hello World'
// เขียน (รักษา HTML tags)
box.innerHTML = "Goodbye Friend";
// HTML กลายเป็น: Goodbye Friend
// ⚠️ ระวัง XSS (Cross-Site Scripting)
// ห้ามใช้ innerHTML กับ user input โดยตรง
const userInput = "Hello World
const box = document.getElementById("box");
console.log(box.innerText); // 'Hello World' (ซ่อน hidden text)
console.log(box.textContent); // 'Hello Hidden World' (รวม hidden text)
```
### 2. การสร้าง Elements
#### createElement()
```javascript
// สร้าง element
const newDiv = document.createElement("div");
newDiv.textContent = "New Box";
newDiv.className = "box-class";
newDiv.id = "new-box";
console.log(newDiv); // New Box
// ยังไม่อยู่ใน DOM ต้องเพิ่มเข้าไป
```
#### appendChild() - เพิ่มที่ท้าย
```javascript
const container = document.getElementById("container");
const newDiv = document.createElement("div");
newDiv.textContent = "New Item";
container.appendChild(newDiv);
// New Item
Item 1
Item 0
Item 1
Before
");
// 'afterbegin' - หลังเปิด tag (ภายใน ด้านหน้า)
element.insertAdjacentHTML("afterbegin", "Inside Start");
// 'beforeend' - ก่อนปิด tag (ภายใน ด้านท้าย)
element.insertAdjacentHTML("beforeend", "Inside End");
// 'afterend' - หลัง element
element.insertAdjacentHTML("afterend", "After
");
// ผลลัพธ์:
// Before
//
// Inside Start
// ... (original content)
// Inside End
//
// After
```
### 3. การลบ Elements
#### removeChild()
```javascript
const container = document.getElementById("container");
const item = container.querySelector(".item");
container.removeChild(item); // ลบ item
```
#### remove()
```javascript
const item = document.querySelector(".item");
item.remove(); // ลบตัวเอง (วิธีง่ายกว่า)
```
#### innerHTML = ''
```javascript
const container = document.getElementById("container");
container.innerHTML = ""; // ลบ content ทั้งหมด
```
### 4. การคัดลอก Elements
```javascript
const original = document.querySelector(".card");
// Shallow clone (ไม่คัดลอก children)
const clone1 = original.cloneNode();
// Deep clone (คัดลอก children)
const clone2 = original.cloneNode(true);
// เพิ่มไปยัง DOM
document.getElementById("container").appendChild(clone2);
```
---
## Attributes และ Classes {#attributes-classes}
### คำอธิบาย
Attributes และ Classes เป็นส่วนสำคัญของการจัดการ DOM เพราะว่า:
- HTML attributes เก็บข้อมูลเพิ่มเติมเกี่ยวกับ elements (href, src, data-\* ฯลฯ)
- Classes ใช้สำหรับการ styling ด้วย CSS และ styling ด้วย JavaScript
- Data attributes (data-\*) ช่วยให้เก็บ custom data เกี่ยวกับ elements
- classList API ทำให้จัดการ classes ได้อย่างสะดวก
- การจัดการ attributes และ classes เป็นวิธีที่ปลอดภัยและ semantic ในการเปลี่ยนแปลง elements
### 1. Attributes
#### getAttribute()
```javascript
// HTML: Link
const link = document.getElementById("link");
console.log(link.getAttribute("href")); // 'https://example.com'
console.log(link.getAttribute("class")); // 'external'
console.log(link.getAttribute("data-id")); // null (ไม่มี)
```
#### setAttribute()
```javascript
const link = document.getElementById("link");
link.setAttribute("href", "https://new-example.com");
link.setAttribute("target", "_blank");
link.setAttribute("data-id", "123");
// HTML กลายเป็น:
// Link
```
#### removeAttribute()
```javascript
const link = document.getElementById("link");
link.removeAttribute("target");
// HTML: Link
```
#### hasAttribute()
```javascript
const link = document.getElementById("link");
console.log(link.hasAttribute("href")); // true
console.log(link.hasAttribute("target")); // false
```
### 2. Data Attributes
```html
```
```javascript
const user = document.getElementById("user");
// อ่าน data attributes
console.log(user.dataset.id); // '123'
console.log(user.dataset.name); // 'John'
console.log(user.dataset.role); // 'admin'
// เขียน data attributes
user.dataset.id = "456";
user.dataset.email = "john@example.com";
// HTML กลายเป็น:
//
```
### 3. Class Management
#### classList
```javascript
// HTML: Box
const box = document.getElementById("box");
// add - เพิ่ม class
box.classList.add("active");
// HTML: Box
// remove - ลบ class
box.classList.remove("container");
// HTML: Box
// toggle - สลับ class (มีก็ลบ ไม่มีก็เพิ่ม)
box.classList.toggle("active");
// HTML: Box
// contains - ตรวจสอบ class มีอยู่หรือไม่
console.log(box.classList.contains("active")); // false
// add หลายตัว
box.classList.add("active", "highlight", "animated");
```
---
## Events (เหตุการณ์) {#events}
### คำอธิบาย
Events คือการกระทำหรือสิ่งที่เกิดขึ้นกับ elements เมื่อผู้ใช้หรือ browser ทำการกระทำบางอย่าง Event system ช่วยให้:
- ตอบสนองต่อการกระทำของผู้ใช้ (คลิก, พิมพ์, ขยับ ฯลฯ)
- สร้าง interactive experiences
- ทำให้ applications เป็น dynamic และ responsive
- จับและประมวลผลสิ่งที่เกิดขึ้นใน page
- Event-driven programming คือ paradigm ที่สำคัญสำหรับ web development
การเข้าใจและใช้งาน events เป็นสิ่งจำเป็นสำหรับการสร้าง interactive web applications
### ประเภท Events ทั่วไป
#### Mouse Events
```javascript
const element = document.querySelector("button");
// click - คลิก
element.addEventListener("click", () => {
console.log("Clicked!");
});
// dblclick - คลิกสองครั้ง
element.addEventListener("dblclick", () => {
console.log("Double clicked!");
});
// mouseenter - เมาส์เข้า
element.addEventListener("mouseenter", () => {
console.log("Mouse entered");
});
// mouseleave - เมาส์ออก
element.addEventListener("mouseleave", () => {
console.log("Mouse left");
});
// mousemove - เมาส์เคลื่อนไหว
element.addEventListener("mousemove", (event) => {
console.log("X:", event.clientX, "Y:", event.clientY);
});
// contextmenu - คลิกขวา
element.addEventListener("contextmenu", (event) => {
event.preventDefault(); // ยกเลิก menu ปกติ
console.log("Right clicked!");
});
```
#### Keyboard Events
```javascript
const input = document.querySelector("input");
// keydown - กด key
input.addEventListener("keydown", (event) => {
console.log("Key pressed:", event.key);
});
// keyup - ปล่อย key
input.addEventListener("keyup", (event) => {
console.log("Key released:", event.key);
});
// keypress - พิมพ์ (deprecated)
// ตรวจสอบ key เฉพาะ
input.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
console.log("Enter pressed");
}
if (event.key === "Escape") {
console.log("Escape pressed");
}
// modifier keys
if (event.ctrlKey || event.metaKey) {
console.log("Ctrl/Cmd pressed");
}
if (event.shiftKey) {
console.log("Shift pressed");
}
});
```
#### Form Events
```javascript
const input = document.querySelector("input");
const form = document.querySelector("form");
// input - ค่ามีการเปลี่ยน
input.addEventListener("input", (event) => {
console.log("Input value:", event.target.value);
});
// change - ค่ามีการเปลี่ยน และเสีย focus
input.addEventListener("change", (event) => {
console.log("Input changed:", event.target.value);
});
// focus - element ได้รับ focus
input.addEventListener("focus", () => {
console.log("Input focused");
});
// blur - element เสีย focus
input.addEventListener("blur", () => {
console.log("Input blurred");
});
// submit - form ถูก submit
form.addEventListener("submit", (event) => {
event.preventDefault(); // ยกเลิก default action
console.log("Form submitted");
});
```
#### Window Events
```javascript
// load - page โหลดเสร็จ
window.addEventListener("load", () => {
console.log("Page loaded");
});
// scroll - scroll
window.addEventListener("scroll", () => {
console.log("Scrolling");
});
// resize - เปลี่ยนขนาด window
window.addEventListener("resize", () => {
console.log("Window resized");
});
```
---
## Event Listeners {#event-listeners}
### คำอธิบาย
Event Listeners คือวิธีการบอกให้ browser รู้ว่า "เมื่อเกิด event นี้ ให้ทำการ execute function นี้" Event listeners ช่วยให้:
- สามารถ attach behaviors ไปยัง elements ได้
- แยกระหว่าง HTML structure กับ JavaScript logic (separation of concerns)
- สามารถ add, remove, หรือ modify behaviors ได้ง่าย
- จัดการ events ได้หลากหลายวิธี
- addEventListener เป็น modern best practice สำหรับ event handling
### วิธีการเพิ่ม Event Listener
#### 1. addEventListener() - วิธีปกติ (แนะนำ)
```javascript
const button = document.querySelector("button");
button.addEventListener("click", function (event) {
console.log("Clicked!");
console.log(event); // Event object
});
// หรือใช้ arrow function
button.addEventListener("click", (event) => {
console.log("Clicked!");
});
```
#### 2. Inline event handler (ไม่แนะนำ)
```html
```
### Event Object
```javascript
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
console.log(event); // Event object
console.log(event.type); // 'click'
console.log(event.target); //
console.log(event.currentTarget); //
console.log(event.timeStamp); // เวลา event
console.log(event.clientX); // X position (mouse)
console.log(event.clientY); // Y position (mouse)
});
```
### ลบ Event Listener
```javascript
function handleClick(event) {
console.log("Clicked!");
}
const button = document.querySelector("button");
// เพิ่ม
button.addEventListener("click", handleClick);
// ลบ (ต้องเป็น function เดียวกัน)
button.removeEventListener("click", handleClick);
// สำหรับ anonymous function ลบได้ยาก
button.addEventListener("click", () => {
console.log("Clicked!"); // ลบไม่ได้
});
```
### Event Propagation
#### Bubbling - เหตุการณ์ไหลขึ้น
```html
Parent
```
#### stopPropagation() - หยุดการ Bubble
```javascript
const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.addEventListener("click", () => {
console.log("Parent clicked");
});
child.addEventListener("click", (event) => {
event.stopPropagation(); // หยุด bubbling
console.log("Child clicked");
// ผลลัพธ์:
// Child clicked (ไม่ bubble ขึ้น)
});
```
#### preventDefault() - ยกเลิก default action
```javascript
const form = document.querySelector("form");
const link = document.querySelector("a");
form.addEventListener("submit", (event) => {
event.preventDefault(); // ไม่ submit form
console.log("Form prevented from submitting");
});
link.addEventListener("click", (event) => {
event.preventDefault(); // ไม่ไป URL
console.log("Link prevented from navigating");
});
```
---
## Event Delegation {#event-delegation}
### คำอธิบาย
Event Delegation คือ pattern ที่ทำให้ efficient และ flexible เนื่องจาก:
- ไม่ต้อง attach event listeners ไปยังทุก individual elements
- ใช้ event bubbling เพื่อจับ events จาก elements ลูกๆ
- เมื่อ elements ใหม่ถูกเพิ่มเข้า page อย่างไรก็ไม่ต้อง attach listeners ใหม่
- ลดจำนวน event listeners ในหน้า (better performance)
- ทำให้ code เรียบร้อยและ maintainable มากขึ้น
Event delegation เป็น essential pattern สำหรับการจัดการ dynamic lists หรือ collections
### ปัญหา: เพิ่ม listener ให้หลายๆ elements
```javascript
// ❌ ปัญหา: ต้องให้แต่ละ item
const items = document.querySelectorAll(".item");
items.forEach((item) => {
item.addEventListener("click", () => {
console.log("Item clicked");
});
});
// ถ้าเพิ่ม item ใหม่ผ่าน JavaScript ต้องเพิ่ม listener ใหม่อีก
```
### วิธีแก้: Event Delegation
```javascript
// ✅ ดี: ใช้ parent และ event.target
const container = document.querySelector(".container");
container.addEventListener("click", (event) => {
if (event.target.classList.contains("item")) {
console.log("Item clicked:", event.target.textContent);
}
});
// หรือใช้ closest()
container.addEventListener("click", (event) => {
const item = event.target.closest(".item");
if (item) {
console.log("Item clicked:", item.textContent);
}
});
// ตอนนี้แม้เพิ่ม item ใหม่ก็ยังใช้ได้
const newItem = document.createElement("div");
newItem.className = "item";
newItem.textContent = "New Item";
container.appendChild(newItem); // ✅ ยังคงใช้ได้เลย
```
### ตัวอย่าง To-Do List
```javascript
const todoList = document.querySelector(".todo-list");
todoList.addEventListener("click", (event) => {
// ลบ item
if (event.target.classList.contains("delete-btn")) {
event.target.closest(".todo-item").remove();
}
// ทำเครื่องหมายสำเร็จ
if (event.target.classList.contains("checkbox")) {
event.target.closest(".todo-item").classList.toggle("completed");
}
});
```
---
## ตัวอย่างจริง {#practical-examples}
### คำอธิบาย
ตัวอย่างจริงแสดงให้เห็นว่าสิ่งที่เรียนรู้สามารถนำไปใช้กับสถานการณ์จริงอย่างไร ตัวอย่างเหล่านี้:
- ครอบคลุม common scenarios ที่ developers พบบ่อยๆ
- เป็นตัวอย่างของ best practices และ patterns ที่ใช้ได้จริง
- สามารถนำมาปรับเปลี่ยนและใช้กับ projects ของตัวเอง
- แสดงวิธีการ combine DOM manipulation กับ event handling
- เป็นพื้นฐานสำหรับการสร้าง complex features ขั้นสูง
### ตัวอย่าง 1: Counter App
```html
Counter
0
Todo List