🟣 Phần 4: DOM và Event Handling

Dưới đây là đáp án chi tiết cho phần 🟣 Phần 4: DOM và Event Handling:

---

1. DOM là gì? Các cách truy cập DOM?

• DOM (Document Object Model) là mô hình dạng cây đại diện cho cấu trúc HTML của trang web. Mỗi phần tử HTML là một node.

Cách truy cập DOM:

document.getElementById('id');
document.getElementsByClassName('class');
document.getElementsByTagName('tag');
document.querySelector('.class or #id');
document.querySelectorAll('.class');

---

2. Event bubbling và event capturing là gì?

• Event bubbling (mặc định): sự kiện lan truyền từ phần tử con → cha → gốc (bubbling lên trên).

• Event capturing: lan truyền từ gốc → phần tử mục tiêu (capturing từ trên xuống).

element.addEventListener('click', handler, true); // capturing
element.addEventListener('click', handler, false); // bubbling (default)

---

3. addEventListener vs onclick: sự khác biệt?

Thuộc tính	onclick	addEventListener
Ghi đè nhiều handler	❌ Không hỗ trợ	✅ Có thể gán nhiều listener
Gỡ bỏ listener	❌ Không dễ gỡ	✅ Dùng removeEventListener()
Cú pháp	element.onclick = fn	element.addEventListener('click', fn)

---

4. preventDefault() và stopPropagation() có tác dụng gì?

• preventDefault(): ngăn hành vi mặc định (ví dụ: chặn submit form, chặn link chuyển trang).

• stopPropagation(): ngăn sự kiện lan truyền (bubbling hoặc capturing).

element.addEventListener('click', function(e) {
  e.preventDefault();      // chặn hành vi mặc định
  e.stopPropagation();     // chặn lan truyền
});

---

5. Các bước cơ bản để thao tác với DOM (thêm, xoá, sửa node)?

Thêm node:

const el = document.createElement('div');
el.textContent = 'Hello';
document.body.appendChild(el);

Xoá node:

el.remove();
// hoặc
parent.removeChild(el);

Sửa node:

el.textContent = 'Updated';
el.setAttribute('class', 'new-class');
el.style.color = 'red';

---

6. Làm sao để xử lý sự kiện khi thêm DOM động (event delegation)?

• Event delegation là kỹ thuật gán sự kiện cho phần tử cha, rồi kiểm tra phần tử con nào được click.

🔧 Dùng khi: bạn thêm phần tử động và không muốn add listener cho từng phần tử mới.

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target && e.target.matches('li.item')) {
    console.log('You clicked: ', e.target.textContent);
  }
});

---