DOM Manipulation cơ bản: Nắm nền tảng trước khi dùng React

DOM (Document Object Model) là cách trình duyệt biểu diễn cấu trúc HTML dưới dạng object. Mọi framework frontend cuối cùng cũng chỉ thao tác lên DOM.

1. Chọn phần tử

const title = document.querySelector('h1');
const items = document.querySelectorAll('.item');

2. Thêm event listener

const button = document.querySelector('#btn');
button.addEventListener('click', () => {
  console.log('Clicked!');
});

3. Thay đổi nội dung & class

title.textContent = 'Xin chào';
title.classList.add('text-red-500');

---

Nắm được DOM giúp bạn debug UI dễ hơn, hiểu vì sao React/Vanilla JS phải tối ưu render như vậy và không còn “sợ” khi phải code thuần mà không dùng framework.