JavaScript DOM Selector là gì? Tìm hiểu các phương thức chọn phần tử DOM phổ biến

JavaScript DOM Selector là một trong những khái niệm cơ bản và quan trọng nhất khi làm việc với JavaScript trong web development. Trong bài viết này, chúng ta sẽ tìm hiểu về các phương thức chọn phần tử DOM, cách sử dụng chúng hiệu quả và các best practices.

DOM Selector là gì?

DOM (Document Object Model) Selector là cách để chọn và thao tác với các phần tử HTML trên trang web của bạn thông qua JavaScript. Nó cho phép bạn truy cập, thay đổi, thêm hoặc xóa các phần tử HTML một cách động.

Bảng tổng hợp các phương thức DOM Selector

Phương thức	Cú pháp	Ví dụ	Mô tả
getElementById	`document.getElementById()`	`document.getElementById('header')`	Chọn phần tử theo ID
getElementsByClassName	`document.getElementsByClassName()`	`document.getElementsByClassName('item')`	Chọn các phần tử theo class
getElementsByTagName	`document.getElementsByTagName()`	`document.getElementsByTagName('p')`	Chọn các phần tử theo tên thẻ
querySelector	`document.querySelector()`	`document.querySelector('.item')`	Chọn phần tử đầu tiên khớp với selector
querySelectorAll	`document.querySelectorAll()`	`document.querySelectorAll('.item')`	Chọn tất cả phần tử khớp với selector
getElementsByName	`document.getElementsByName()`	`document.getElementsByName('username')`	Chọn các phần tử theo thuộc tính name
closest	`element.closest()`	`element.closest('.parent')`	Tìm phần tử cha gần nhất khớp với selector
matches	`element.matches()`	`element.matches('.active')`	Kiểm tra phần tử có khớp với selector

Các phương thức DOM Selector cơ bản

1. getElementById

Chọn phần tử theo ID cụ thể.

<!-- HTML -->
<header id="header">
    <h1>Logo</h1>
    <nav>Menu</nav>
</header>

// JavaScript
const header = document.getElementById('header');
header.style.backgroundColor = '#333';
header.style.color = 'white';

2. getElementsByClassName

Chọn tất cả các phần tử có class cụ thể.

<!-- HTML -->
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

// JavaScript
const items = document.getElementsByClassName('item');
// items là HTMLCollection
Array.from(items).forEach(item => {
    item.style.color = 'blue';
});

3. getElementsByTagName

Chọn tất cả các phần tử theo tên thẻ.

<!-- HTML -->
<p>Đoạn văn bản 1</p>
<p>Đoạn văn bản 2</p>
<p>Đoạn văn bản 3</p>

// JavaScript
const paragraphs = document.getElementsByTagName('p');
// paragraphs là HTMLCollection
Array.from(paragraphs).forEach(p => {
    p.style.fontSize = '16px';
});

4. querySelector

Chọn phần tử đầu tiên khớp với selector CSS.

<!-- HTML -->
<div class="container">
    <p class="highlight">Đoạn văn bản được highlight</p>
    <p>Đoạn văn bản thông thường</p>
    <p class="highlight">Đoạn văn bản được highlight khác</p>
</div>

// JavaScript
// Chọn phần tử đầu tiên có class="highlight"
const firstHighlight = document.querySelector('.highlight');
firstHighlight.style.backgroundColor = 'yellow';

// Chọn phần tử đầu tiên có class="highlight" trong .container
const containerHighlight = document.querySelector('.container .highlight');
containerHighlight.style.fontWeight = 'bold';

5. querySelectorAll

Chọn tất cả các phần tử khớp với selector CSS.

<!-- HTML -->
<ul class="menu">
    <li class="item">Mục 1</li>
    <li class="item">Mục 2</li>
    <li class="item">Mục 3</li>
</ul>

// JavaScript
// Chọn tất cả các phần tử có class="item"
const items = document.querySelectorAll('.item');
// items là NodeList
items.forEach(item => {
    item.style.listStyle = 'none';
    item.style.padding = '10px';
});

6. getElementsByName

Chọn các phần tử theo thuộc tính name.

<!-- HTML -->
<form>
    <input type="text" name="username" placeholder="Tên đăng nhập">
    <input type="password" name="password" placeholder="Mật khẩu">
    <input type="text" name="email" placeholder="Email">
</form>

// JavaScript
const usernameInputs = document.getElementsByName('username');
// usernameInputs là NodeList
usernameInputs.forEach(input => {
    input.style.border = '1px solid #ccc';
});

7. closest

Tìm phần tử cha gần nhất khớp với selector.

<!-- HTML -->
<div class="container">
    <div class="box">
        <button class="btn">Click me</button>
    </div>
</div>

// JavaScript
const button = document.querySelector('.btn');
const container = button.closest('.container');
container.style.border = '1px solid #000';

8. matches

Kiểm tra phần tử có khớp với selector hay không.

<!-- HTML -->
<div class="item active">Item 1</div>
<div class="item">Item 2</div>
<div class="item active">Item 3</div>

// JavaScript
const items = document.querySelectorAll('.item');
items.forEach(item => {
    if (item.matches('.active')) {
        item.style.color = 'green';
    }
});

Các phương thức DOM Selector nâng cao

1. Kết hợp nhiều selector

<!-- HTML -->
<div class="container">
    <div class="box">
        <p class="text">Nội dung 1</p>
    </div>
    <div class="box">
        <p class="text">Nội dung 2</p>
    </div>
</div>

// JavaScript
// Chọn tất cả các p có class="text" trong .box
const texts = document.querySelectorAll('.box .text');
texts.forEach(text => {
    text.style.color = 'blue';
});

// Chọn tất cả các .box trong .container
const boxes = document.querySelector('.container').querySelectorAll('.box');
boxes.forEach(box => {
    box.style.margin = '10px';
});

2. Sử dụng với các thuộc tính

<!-- HTML -->
<input type="text" data-validate="required">
<input type="email" data-validate="email">
<input type="password" data-validate="password">

// JavaScript
// Chọn tất cả các input có data-validate
const inputs = document.querySelectorAll('input[data-validate]');
inputs.forEach(input => {
    const validateType = input.getAttribute('data-validate');
    input.setAttribute('placeholder', `Nhập ${validateType}`);
});

3. Sử dụng với pseudo-classes

<!-- HTML -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

// JavaScript
// Chọn phần tử đầu tiên
const firstItem = document.querySelector('li:first-child');
firstItem.style.fontWeight = 'bold';

// Chọn phần tử cuối cùng
const lastItem = document.querySelector('li:last-child');
lastItem.style.color = 'red';

// Chọn các phần tử chẵn
const evenItems = document.querySelectorAll('li:nth-child(even)');
evenItems.forEach(item => {
    item.style.backgroundColor = '#f0f0f0';
});

Best Practices khi sử dụng DOM Selector

Ưu tiên sử dụng querySelector/querySelectorAll vì chúng linh hoạt và mạnh mẽ hơn.
Cache các selector để tránh truy vấn DOM nhiều lần.
Sử dụng ID selector khi cần chọn một phần tử cụ thể.
Tránh selector quá phức tạp để dễ maintain.
Kiểm tra null trước khi thao tác với phần tử.
Sử dụng event delegation để xử lý sự kiện hiệu quả.
Tận dụng các phương thức DOM để thao tác với phần tử.

Ví dụ về Event Delegation

<!-- HTML -->
<ul class="menu">
    <li data-action="edit">Chỉnh sửa</li>
    <li data-action="delete">Xóa</li>
    <li data-action="view">Xem</li>
</ul>

// JavaScript
const menu = document.querySelector('.menu');
menu.addEventListener('click', (e) => {
    const action = e.target.dataset.action;
    if (action) {
        switch (action) {
            case 'edit':
                console.log('Chỉnh sửa');
                break;
            case 'delete':
                console.log('Xóa');
                break;
            case 'view':
                console.log('Xem');
                break;
        }
    }
});

Kết luận

JavaScript DOM Selector là công cụ mạnh mẽ giúp bạn thao tác với các phần tử HTML một cách linh hoạt. Việc hiểu và sử dụng đúng các phương thức selector sẽ giúp bạn viết code JavaScript hiệu quả và dễ maintain hơn. Hãy thực hành và áp dụng các best practices để tạo ra những ứng dụng web tốt nhất.

JavaScript DOM Selector là gì? Tìm hiểu các phương thức chọn phần tử DOM phổ biến

JavaScript DOM Selector là gì? Tìm hiểu các phương thức chọn phần tử DOM phổ biến

DOM Selector là gì?

Bảng tổng hợp các phương thức DOM Selector

Các phương thức DOM Selector cơ bản

1. getElementById

2. getElementsByClassName

3. getElementsByTagName

4. querySelector

5. querySelectorAll

6. getElementsByName

7. closest

8. matches

Các phương thức DOM Selector nâng cao

1. Kết hợp nhiều selector

2. Sử dụng với các thuộc tính

3. Sử dụng với pseudo-classes

Best Practices khi sử dụng DOM Selector

Ví dụ về Event Delegation

Kết luận

Bài viết liên quan

Table of Contents