Thao tác DOM
1 tuần Sơ cấpThao tác các thành phần HTML từ JavaScript và thay đổi trang web một cách động.
Tổng quan
DOM (Document Object Model) là cơ chế xử lý các thành phần HTML như các đối tượng trong JavaScript.
Nếu không thể thao tác DOM, bạn không thể tạo ra sự thay đổi trên trang web. Đây là kiến thức nền tảng cho các thư viện như React.
- Cách lấy các phần tử
- Lắng nghe sự kiện (Event Listener)
- Thay đổi Class và Style
- Tạo và xóa phần tử
Chi tiết
Lấy phần tử
Đưa các phần tử HTML vào thế giới JS. Lấy 1 phần tử bằng ID hoặc dùng querySelector như CSS selector.
- document.getElementById('msg')
- document.querySelectorAll('li')
- querySelectorAll có thể dùng forEach để lặp qua
- Thao tác khi chưa lấy được phần tử (null) dẫn đến lỗi
Sự kiện (Click, v.v.)
Chạy xử lý khi 'Nút được nhấn' hoặc 'Ký tự được nhập'. Đây được gọi là Event Listener.
- btn.addEventListener('click', () => {\n console.log('Đã nhấn');\n})
- Có kỹ thuật 'Event Delegation' gắn listener vào phần tử cha
Ghi đè, thêm, xóa phần tử
Dùng textContent thay đổi chữ, classList.add thêm class CSS. createElement để tạo mới và remove để xóa.
- el.textContent = 'Hello'
- el.classList.add('active')
- el.remove()
- Kết hợp thay đổi class với CSS transition để tạo hiệu ứng
- Dùng innerHTML hiển thị trực tiếp đầu vào gây lỗ hổng bảo mật (XSS)
Các bước thực hành
- 1 Lấy phần tử HTML 2 phút
Đưa phần tử HTML vào thế giới chương trình để thao tác.
- Gắn id="target" cho phần tử muốn thao tác
- Dùng document.getElementById để lấy và gán vào biến
<!-- HTML -->\n<p id="target">Văn bản cũ</p>\n\n<script>\nconst el = document.getElementById('target');\nconsole.log(el);\n</script> - 2 Thay đổi văn bản và diện mạo 3 phút
Ghi đè trực tiếp nội dung hoặc kiểu dáng của phần tử đã lấy.
- Dùng thuộc tính textContent để đổi chữ
- Dùng thuộc tính style để đổi màu chữ
<script>\nconst el = document.getElementById('target');\nel.textContent = 'Đã thay đổi văn bản mới!';\nel.style.color = 'red';\n</script> - 3 Tạo sự kiện Click 5 phút
Cơ chế chạy xử lý ngay khi nút được nhấn.
- Chuẩn bị thẻ button có ID
- Dùng addEventListener để theo dõi sự kiện 'click'
- Hiển thị thông báo khi được click
<button id="btn">Nhấn tôi</button>\n\n<script>\nconst btn = document.getElementById('btn');\nbtn.addEventListener('click', () => {\n alert('Nút đã được nhấn!');\n});\n</script>
Câu hỏi thường gặp
- Tại sao nên dùng textContent thay vì innerHTML?
- innerHTML thực thi các thẻ HTML bên trong, nếu người dùng nhập mã độc, nó sẽ chạy (tấn công XSS). textContent chỉ coi đó là văn bản thuần túy nên an toàn hơn nhiều.
- Nút mới thêm bằng JS không phản hồi khi click?
- Có thể do khi bạn gán listener, nút đó chưa tồn tại. Hãy dùng 'Event Delegation' bằng cách gán listener vào phần tử cha và kiểm tra e.target.
- Sự khác biệt giữa NodeList và Array?
- querySelectorAll trả về NodeList. Nó trông giống mảng nhưng không có các phương thức như map(). Hãy dùng Array.from(nodeList) để chuyển nó thành mảng thực thụ.
① Đã đọc giải thích. Tiếp theo ② Làm bài tập.
Đã có thể làm trang web chuyển động bằng JS.
Học về Layout để làm giao diện chuyên nghiệp hơn.