Giới Thiệu

Khi bạn xây dựng các trang web, nội dung bạn thấy trong trình duyệt được đại diện dưới dạng Mô Hình Đối Tượng Tài Liệu (DOM). Bạn có thể tưởng tượng DOM như một cấu trúc dạng cây, nơi mỗi thẻ trong HTML của bạn, như tiêu đề, đoạn văn, nút và danh sách, trở thành một đối tượng mà JavaScript có thể tương tác.

Trước khi bạn có thể thay đổi bất cứ điều gì trên trang, trước tiên bạn cần chọn phần tử mà bạn muốn làm việc. Đây là nội dung chính của hướng dẫn này.

Những gì bạn sẽ học được

Cuối bài viết này, bạn sẽ hiểu:

• DOM là gì và tại sao nó quan trọng.
• Các cách chính để chọn một hoặc nhiều phần tử.
• Sự khác biệt giữa các bộ sưu tập động và danh sách tĩnh.
• Cách sử dụng các lựa chọn này trong các ví dụ thực tế.
• Những sai lầm thường gặp cần tránh khi bắt đầu.

Hiểu Về DOM

DOM đóng vai trò là cầu nối giữa cấu trúc HTML của bạn và mã JavaScript tương tác với nó. Nó cung cấp cho JavaScript quyền truy cập vào mọi phần tử trên trang, cho phép bạn đọc, cập nhật hoặc phản hồi các hành động của người dùng.

Ví dụ:

• Thay đổi văn bản của một tiêu đề.
• Ẩn hoặc hiện một phần.
• Thêm sự kiện click vào một nút.

Tất cả những điều này bắt đầu bằng việc chọn các phần tử một cách chính xác.

Chọn Một Phần Tử

getElementById

Cách dễ nhất và nhanh nhất để lấy một phần tử với ID duy nhất.

const title = document.getElementById('site-title');
title.textContent = 'Xin chào, thế giới!';

querySelector

Mạnh mẽ hơn vì nó chấp nhận bất kỳ bộ chọn CSS nào. Nó trả về kết quả đầu tiên mà nó tìm thấy.

const firstLink = document.querySelector('.nav a');
firstLink.setAttribute('aria-current', 'page');

Mẹo: Sử dụng getElementById cho việc tìm kiếm nhanh, và querySelector khi bạn cần nhiều tùy chọn hơn.

Chọn Nhiều Phần Tử

getElementsByClassName

Tìm tất cả các phần tử với một lớp cụ thể. Trả về một bộ sưu tập động.

const cards = document.getElementsByClassName('card');
console.log(cards.length); // cập nhật nếu có thẻ mới được thêm vào

getElementsByTagName

Tìm tất cả các phần tử của một thẻ nhất định (như p hoặc div).

querySelectorAll

Sử dụng các bộ chọn CSS để tìm tất cả các kết quả. Trả về một NodeList tĩnh.

const items = document.querySelectorAll('.item');
items.forEach((el, i) => {
el.textContent = `Mục ${i + 1}`;
});

Điểm khác biệt chính: HTMLCollections cập nhật tự động (động), trong khi NodeLists không thay đổi (tĩnh).

Ví Dụ Về Động và Tĩnh

<ul id="list">
<li class="item">A</li>
<li class="item">B</li>
</ul>

const live = document.getElementsByClassName('item'); // động
const staticList = document.querySelectorAll('.item'); // tĩnh
// Thêm mục danh sách mới
const li = document.createElement('li');
li.className = 'item';
li.textContent = 'C';
document.getElementById('list').appendChild(li);
console.log(live.length);     // 3
console.log(staticList.length); // 2

Tổng Hợp Tất Cả (Dự Án Nhỏ)

Dưới đây là một ví dụ đơn giản kết nối tất cả lại với nhau.

HTML:

<h1 id="site-title">Chào Mừng</h1>
<ul class="items">
<li class="item">Một</li>
<li class="item">Hai</li>
</ul>
<button id="changeBtn">Thay Đổi Tiêu Đề</button>

JavaScript:

// Chọn các phần tử
const title = document.getElementById('site-title');
const btn = document.querySelector('#changeBtn');
const listItems = document.querySelectorAll('.item');
// Thay đổi tiêu đề khi nhấn nút
btn.addEventListener('click', () => {
title.textContent = 'Tiêu đề đã được thay đổi!';
});
// Cập nhật các mục danh sách
listItems.forEach((li, index) => {
li.textContent = `${index + 1}. ${li.textContent}`;
});

Thực Hành Tốt Nhất Cho Người Mới Bắt Đầu

• Kiểm tra trước khi sử dụng: Luôn xác nhận một phần tử tồn tại (if (element) { ... }).
• Sử dụng thuộc tính dữ liệu: Để tạo liên kết cho JavaScript, hãy sử dụng data-js thay vì lớp CSS.
• Lưu trữ các phần tử: Lưu các phần tử vào biến nếu bạn sẽ sử dụng chúng nhiều lần.
• Tránh các bộ chọn sâu: Giữ cho chúng đơn giản và dễ đọc.
• Sử dụng phân quyền sự kiện: Thay vì gán nhiều trình lắng nghe sự kiện, hãy gán một cho phần tử cha và xử lý các cú nhấp chuột bên trong.

Kết Luận

Việc chọn các phần tử trong DOM là nền tảng để làm cho bất kỳ trang web nào trở nên tương tác. Với các phương pháp bạn đã học, chẳng hạn như getElementById, querySelector, và querySelectorAll, bạn có thể nhắm đến các phần tử cụ thể và làm việc với chúng một cách tự tin. Bạn cũng hiểu sự khác biệt giữa các bộ sưu tập động và danh sách tĩnh, điều này giúp bạn quyết định cách tiếp cận phù hợp khi làm việc với các nhóm phần tử.

Bằng cách thực hành những khái niệm này trong các dự án nhỏ như thay đổi văn bản, cập nhật danh sách hoặc phản hồi các cú nhấp chuột vào nút, bạn sẽ xây dựng được kỹ năng cần thiết để chuyển sang các chủ đề nâng cao hơn như thao tác DOM, định dạng và xử lý sự kiện. Càng khám phá, việc chọn và làm việc với các phần tử sẽ trở nên tự nhiên hơn, đó là một bước lớn để bạn cảm thấy thoải mái với JavaScript.

Bạn có thể liên hệ với tôi qua LinkedIn.