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:

<h1 id="title">Xin chào</h1>
<ul class="items">
<li class="item">A</li>
<li class="item">B</li>
</ul>

Các bộ chọn 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ị.

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 = '<em>Tiêu đề động</em>'; // 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.

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):

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.

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:

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.

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:

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:

<input id="newText" placeholder="Thêm mục">
<button id="addBtn">Thêm</button>
<ul id="todo"></ul>

Mã nguồn 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!