DOM Manipulation & Event

DOM (Document Object Model) เป็นมาตรฐานของ W3C ที่แทนเอกสาร HTML/XML เป็นโครงสร้าง ต้นไม้ของ object ที่โปรแกรมเข้าถึงและแก้ไขได้

DOM คืออะไร

• โครงสร้างแบบ Tree Structure
• เป็นตัวแทน user interface ที่เป็นกลางตามมาตรฐาน
• ให้นักพัฒนาเข้าถึงและเปลี่ยน เนื้อหา โครงสร้าง และสไตล์ ของเอกสาร HTML
• ปกติใช้ JavaScript ในการจัดการ DOM

<h1 id="title">Hello, World!</h1>
<button id="changeTitle">Change Title</button>
<script>
    var titleElement = document.getElementById('title');
    titleElement.textContent = 'Hello, DOM!';

    var button = document.getElementById('changeTitle');
    button.addEventListener('click', function() {
        titleElement.textContent = 'Title Changed!';
    });
</script>

เลือก element 5 วิธี

var paragraphs = document.getElementsByClassName('text');
console.log(paragraphs[0]);      // ต้องระบุ index ถึงจะได้ element เดียว

var first = document.querySelector('.text');       // ได้ตัวแรกเลย
var all   = document.querySelectorAll('.text');    // ได้ทั้งหมด

var parent = child.parentElement;                  // เดินขึ้นไปหา parent

innerHTML / innerText / textContent

let text = "<div style='background-color:red;'>Hello Dolly</div>";

document.getElementById("myP").innerHTML = text;    // ได้กล่องสีแดงจริง ๆ
document.getElementById("myP").textContent = text;  // เห็นเป็นตัวอักษร <div ...> ทั้งบรรทัด

attribute & class

// attribute
image.setAttribute('src', 'new-image.jpg');
console.log(image.getAttribute('src'));       // new-image.jpg
button.removeAttribute('disabled');
console.log(button.hasAttribute('disabled')); // false

element.href = "https://www.w3schools.com";   // property บางตัวตั้งตรง ๆ ได้

// class
div.classList.add('newClass');
div.classList.remove('oldClass');
console.log(div.className);

สร้าง / ลบ / โคลน element

// สร้างและเพิ่ม
var newDiv = document.createElement('div');
newDiv.classList.add('my-class');
newDiv.id = 'myDiv';
newDiv.textContent = 'Hello, World!';
document.body.appendChild(newDiv);      // ต่อท้ายสุด
document.body.prepend(newDiv);          // แทรกหน้าสุด

// ลบ
newDiv.remove();                        // ลบตัวเอง
parentElement.removeChild(childElement);// ให้ parent ลบลูก

// โคลน
document.querySelectorAll("div[data-items='posts']")[0].cloneNode(true);
// true  = ได้ลูกทุกตัวมาด้วย
// false = ได้เฉพาะตัวมันเอง

ผูก event 3 วิธี

<!-- 1. เขียนใน attribute ของ HTML ตรง ๆ -->
<button onclick="alert('Button clicked!')">Click Me</button>

// 2. ใช้ DOM property
button.onclick = function() { alert('Button clicked!'); };

// 3. ใช้ addEventListener  ← วิธีที่แนะนำ
button.addEventListener('click', function() { alert('Button clicked!'); });

event ที่ต้องรู้จัก

div.addEventListener('mouseover', function() { div.style.backgroundColor = 'red'; });
div.addEventListener('mouseout',  function() { div.style.backgroundColor = 'blue'; });

input.addEventListener('keydown', function(event) { console.log('Key down: ' + event.key); });
input.addEventListener('keyup',   function(event) { console.log('Key up: ' + event.key); });

Bubbling vs Capturing

// 1. Bubbling (ค่าปริยาย) — พารามิเตอร์ที่ 3 เป็น false หรือไม่ใส่
button.addEventListener('click', function(){ console.log('Button clicked!'); }, false);
document.body.addEventListener('click', function(){ console.log('Body clicked!'); });
// ผลลัพธ์: Button clicked!  →  Body clicked!

// 2. Capturing — ใส่ true
button.addEventListener('click', function(){ console.log('Button clicked!'); }, true);
document.body.addEventListener('click', function(){ console.log('Body clicked!'); }, true);

target vs currentTarget

body.addEventListener('click', function(event) {
    console.log('Target:', event.target);           // element ที่ถูกคลิกจริง เช่น button
    console.log('Current Target:', event.currentTarget); // element ที่ผูก handler ไว้ เช่น body
});

stopPropagation

button.addEventListener('click', function(event) {
    event.stopPropagation();          // หยุดไม่ให้ event วิ่งต่อไปชั้นบน
    console.log('Button clicked!');
}, false);

document.body.addEventListener('click', function(event) {
    console.log('Body clicked!');     // จะไม่ถูกเรียกอีกต่อไป
}, false);