# Thao tác DOM trong JavaScript: Thay đổi nội dung website một cách động Các website hiện đại hiếm khi tĩnh. Chúng phản hồi các cú nhấp chuột, cập nhật nội dung ngay lập tức và cho phép người dùng tương tác mà không cần làm mới trang. Tất cả điều này được thực hiện thông qua **thao tác DOM**, là cách mà JavaScript thay đổi và kiểm soát một trang web sau khi nó đã được tải. ## Mục tiêu bài viết Cuối bài viết này, bạn sẽ: * Hiểu cách chọn các phần tử trong DOM. * Biết cách cập nhật văn bản, thuộc tính và kiểu dáng một cách động. * Thành thạo trong việc tạo, chèn và xóa các phần tử. * Thêm tính tương tác với các trình lắng nghe sự kiện. * Tuân theo các thực hành tốt nhất để giữ cho mã của bạn sạch sẽ và dễ tiếp cận. ## Chọn phần tử Thao tác DOM luôn bắt đầu với **việc tìm kiếm phần tử bạn muốn thay đổi**. ### Ví dụ HTML: ```html

Xin chào

``` ### Các bộ chọn JavaScript: ```javascript const title = document.getElementById('title'); // chọn theo ID const firstItem = document.querySelector('.item'); // phần tử đầu tiên const allItems = document.querySelectorAll('.item'); // tất cả các phần tử (danh sách tĩnh) ``` > Hãy nghĩ về các bộ chọn như là “địa chỉ” của các phần tử HTML của bạn. Một khi bạn có địa chỉ, bạn có thể tương tác với phần tử trực tiếp. ## Thay đổi văn bản và HTML Khi đã chọn, bạn có thể thay đổi những gì một phần tử hiển thị. ```javascript title.textContent = 'Chào mừng đến với trang của tôi'; // văn bản đơn giản an toàn title.innerHTML = 'Tiêu đề động'; // cho phép HTML ``` * Sử dụng **`textContent`** khi chỉ cập nhật văn bản. * Sử dụng **`innerHTML`** chỉ khi bạn cần các thẻ HTML. > Tránh đặt `innerHTML` với đầu vào của người dùng, vì điều này có thể tạo ra rủi ro về bảo mật. ## Cập nhật thuộc tính và kiểu dáng Bạn cũng có thể thay đổi các thuộc tính của phần tử như liên kết, hình ảnh và kiểu dáng nội tuyến. ```javascript const link = document.querySelector('a'); link.setAttribute('href', 'https://example.com'); link.textContent = 'Đi đến Ví dụ'; ``` ### Làm việc với các lớp (thích hợp hơn so với kiểu nội tuyến): ```javascript const box = document.querySelector('.box'); box.classList.add('active'); // thêm lớp box.classList.remove('hidden'); // xóa lớp box.classList.toggle('open'); // bật/tắt ``` > Một thực hành tốt là giữ cho kiểu dáng trực quan trong CSS và chỉ chuyển đổi các lớp bằng JavaScript. ## Tạo và xóa các phần tử Thao tác DOM cũng cho phép bạn xây dựng nội dung ngay lập tức. ```javascript const ul = document.querySelector('.items'); const li = document.createElement('li'); li.textContent = 'Mục mới'; li.className = 'item'; ul.appendChild(li); // thêm vào cuối danh sách ``` Xóa một phần tử cũng đơn giản: ```javascript li.remove(); ``` > Đối với các cập nhật lớn hơn, hãy sử dụng DocumentFragment để thêm nhiều mục một cách hiệu quả. ## Thêm tính tương tác với các sự kiện Sức mạnh thực sự của thao tác DOM đến từ việc bạn phản hồi các hành động của người dùng. ```javascript const btn = document.getElementById('changeBtn'); bn.addEventListener('click', () => { title.textContent = 'Tiêu đề đã được cập nhật!'; }); ``` Bạn cũng có thể sử dụng phân cấp sự kiện để xử lý nhiều phần tử với một trình lắng nghe: ```javascript const ul = document.querySelector('.items'); ul.addEventListener('click', (e) => { const li = e.target.closest('.item'); if (li) li.classList.toggle('selected'); }); ``` > Cách tiếp cận này hiệu quả và hoạt động ngay cả khi các mục mới được thêm vào sau này. ## Dự án nhỏ: Danh sách công việc động Hãy cùng kết hợp mọi thứ lại với nhau. ### Mã nguồn HTML: ```html

``` ### Mã nguồn JavaScript: ```javascript const input = document.getElementById('newText'); const addBtn = document.getElementById('addBtn'); const todo = document.getElementById('todo'); addBtn.addEventListener('click', () => { const text = input.value.trim(); if (!text) return; const li = document.createElement('li'); li.textContent = text; li.className = 'item'; todo.appendChild(li); input.value = ''; // xóa nội dung đầu vào }); ``` > Ứng dụng nhỏ này minh họa việc chọn, cập nhật nội dung, tạo phần tử và xử lý sự kiện trong một quy trình duy nhất. ## Thực hành tốt nhất cho người mới bắt đầu * Sử dụng `textContent` cho các cập nhật văn bản an toàn và chỉ sử dụng `innerHTML` cho nội dung được tin cậy. * Dựa vào `classList` và CSS cho kiểu dáng hơn là kiểu nội tuyến. * Sử dụng thuộc tính `data-*` (như `data-js`) cho các móc JavaScript thay vì các lớp kiểu dáng. * Giữ cho mã được tổ chức: chọn một lần, tái sử dụng biến và tránh các bộ chọn lồng nhau sâu. * Cân nhắc đến khả năng tiếp cận, cập nhật nhãn ARIA và quản lý tiêu điểm khi thay đổi nội dung một cách động. ## Kết luận Thao tác DOM là trái tim của việc làm cho các website trở nên động và tương tác. Bằng việc học cách chọn các phần tử, cập nhật nội dung của chúng, thay đổi thuộc tính và phản hồi với các hành động của người dùng, bạn có thể biến những trang tĩnh thành những ứng dụng sống động. Ngay cả những dự án đơn giản, như chuyển đổi chủ đề hoặc xây dựng một danh sách công việc, đều giúp củng cố các khái niệm này và chuẩn bị cho bạn cho những công việc nâng cao hơn. Với việc thực hành, thao tác DOM sẽ trở nên tự nhiên, và bạn sẽ sẵn sàng khám phá những chủ đề sâu hơn như hoạt ảnh, xử lý biểu mẫu và xây dựng các ứng dụng hoàn chỉnh với JavaScript. Bạn có thể liên hệ với tôi qua LinkedIn để biết thêm chi tiết!

Bài viết về chủ đề#manipulation

Tổng hợp các bài viết về #manipulation

Thao tác DOM trong JavaScript: Thay đổi nội dung website một cách động#webdev#beginners#javascript#manipulation

Chủ đề phổ biến

Thao tác DOM trong JavaScript: Thay đổi nội dung website một cách động