Thao Tác DOM bằng JavaScript: Tạo và Xóa Phần Tử HTML Động
Trong phát triển web hiện đại, JavaScript đóng vai trò quan trọng trong việc làm cho các trang web trở nên tương tác và động. Một trong những tính năng thiết yếu của JavaScript là thao tác DOM, cho phép bạn sửa đổi cấu trúc, nội dung và kiểu dáng của một trang web theo thời gian thực. Bằng cách thao tác với DOM, bạn có thể tạo và xóa các phần tử HTML một cách động, làm cho trang web của bạn hấp dẫn hơn với người dùng.
Nội Dung Bạn Sẽ Học
Khi kết thúc hướng dẫn này, bạn sẽ có khả năng:
- Hiểu về DOM và cách JavaScript tương tác với nó.
- Tạo ra các phần tử HTML mới một cách động.
- Xóa các phần tử hiện có dựa trên các điều kiện cụ thể.
- Áp dụng các kỹ thuật này vào các trường hợp thực tế, như thêm sản phẩm vào giỏ hàng hoặc xây dựng danh sách công việc động.
Hiểu Về DOM và Cách Chọn Phần Tử
Mô hình đối tượng tài liệu (DOM) là một giao diện lập trình cho cả tài liệu HTML và XML. Nó đại diện cho trang dưới dạng một cấu trúc cây, trong đó mỗi nút tương ứng với một phần tử hoặc một đoạn nội dung trong tài liệu HTML. JavaScript tương tác với DOM để thao tác với các phần tử và nội dung của chúng.
Chọn Các Phần Tử DOM
Trước khi bạn có thể tạo hoặc xóa các phần tử, bạn phải chọn các phần tử hiện có. Bạn có thể làm điều này bằng cách sử dụng nhiều phương pháp DOM khác nhau. Dưới đây là các phương pháp phổ biến nhất để chọn các phần tử:
javascript
let elementById = document.getElementById('myElement'); // Bằng ID
let elementsByClass = document.getElementsByClassName('myClass'); // Bằng Class
let elementsBySelector = document.querySelector('.myClass'); // Sử dụng selector CSS
let allElements = document.querySelectorAll('div'); // Chọn tất cả các phần tử divNhững phương pháp này cho phép bạn chọn các phần tử trên trang để thao tác thêm, chẳng hạn như thêm phần tử mới hoặc xóa các phần tử hiện có.
Tạo Các Phần Tử HTML Động
JavaScript cho phép bạn tạo ra các phần tử HTML mới bằng cách sử dụng phương thức createElement(). Sau khi tạo một phần tử, bạn có thể sửa đổi các thuộc tính của nó, chẳng hạn như nội dung, lớp hoặc thuộc tính trước khi thêm nó vào DOM.
Ví Dụ: Tạo Một Phần Tử div Mới
Hãy bắt đầu bằng cách tạo một phần tử div mới và thêm nó vào thân của trang web.
javascript
// Tạo một phần tử div mới
let newDiv = document.createElement('div');
// Thêm nội dung vào trong div
newDiv.innerHTML = 'Đây là một div được tạo động';
// Thêm lớp cho div để định dạng
newDiv.classList.add('new-class');
// Thêm div mới vào thân của trang web
document.body.appendChild(newDiv);Điều Gì Đang Xảy Ra:
document.createElement('div')tạo ra một phần tửdivmới..innerHTMLthiết lập nội dung cho phần tử mới..classList.add('new-class')gán một lớp chodivđể định dạng..appendChild(newDiv)thêmdivmới tạo vào thân của trang web.
Ví Dụ: Tạo Một Mục Danh Sách Mới
Giả sử bạn có một danh sách các nhiệm vụ và muốn thêm một mục danh sách mới một cách động. Đây là cách bạn có thể thực hiện điều đó:
Mã Nguồn HTML:
html
<ul id="taskList">
<li>Nhiệm vụ 1</li>
<li>Nhiệm vụ 2</li>
</ul>Mã Nguồn JavaScript:
javascript
// Chọn danh sách
let taskList = document.getElementById('taskList');
// Tạo một mục danh sách mới
let newItem = document.createElement('li');
// Đặt nội dung cho mục danh sách
newItem.textContent = 'Nhiệm vụ 3';
// Thêm mục mới vào danh sách
taskList.appendChild(newItem);Điều này sẽ thêm một mục mới vào danh sách.
Ví Dụ: Xóa Một Phần Tử Con Với removeChild()
Nếu bạn muốn xóa một phần tử con cụ thể từ cha của nó, hãy sử dụng removeChild(). Ví dụ, để xóa mục thứ hai trong danh sách:
javascript
// Chọn danh sách và phần tử con
let list = document.getElementById('taskList');
let itemToRemove = list.getElementsByTagName('li')[1]; // Xóa mục thứ hai
// Xóa mục đã chọn
list.removeChild(itemToRemove);Điều này sẽ xóa "Nhiệm vụ 2" khỏi danh sách.
Ứng Dụng Thực Tế
Bây giờ bạn đã biết cách tạo và xóa các phần tử, hãy xem một số ứng dụng thực tế mà các kỹ thuật này rất hữu ích.
Ví Dụ 1: Thêm Các Trường Form Mới
Nếu bạn đang xây dựng một form mà người dùng có thể thêm các trường một cách động, JavaScript có thể giúp bạn tạo ra các phần tử input để đáp ứng hành động của người dùng.
javascript
let form = document.getElementById('form');
let addButton = document.getElementById('addFieldButton');
addButton.addEventListener('click', () => {
let newInput = document.createElement('input');
newInput.type = 'text';
newInput.placeholder = 'Trường Nhập Mới';
form.appendChild(newInput);
});Ví Dụ 2: Xây Dựng Một Danh Sách Công Việc Động
Tạo một danh sách công việc động nơi người dùng có thể thêm và xóa nhiệm vụ là một cách tuyệt vời để thực hành thao tác DOM.
javascript
let addButton = document.getElementById('addTaskButton');
let taskList = document.getElementById('taskList');
addButton.addEventListener('click', () => {
let newTask = document.createElement('li');
newTask.textContent = 'Nhiệm vụ Mới';
taskList.appendChild(newTask);
});Bạn cũng có thể sử dụng
removeChild()để cho phép người dùng xóa các nhiệm vụ một cách động.
Kết Luận
Việc làm chủ thao tác DOM bằng JavaScript là điều cần thiết để tạo ra các ứng dụng web tương tác và động. Khả năng tạo và xóa các phần tử HTML theo phản ứng của người dùng giúp bạn kiểm soát hoàn toàn nội dung của trang web. Dù bạn đang xây dựng các form, danh sách công việc hay thêm các tính năng tương tác, những kỹ thuật này sẽ giúp bạn làm cho trang web của mình trở nên phản hồi và hấp dẫn hơn.
Bây giờ bạn đã biết cách chọn các phần tử, tạo các phần tử mới và xóa các phần tử cũ, bạn đã đi đúng hướng để xây dựng các ứng dụng web hiện đại và tương tác. Hãy tiếp tục thử nghiệm với các kỹ thuật này, và bạn sẽ có thêm tự tin để đối mặt với những nhiệm vụ DOM phức tạp hơn.
Bạn có thể liên hệ với tôi qua LinkedIn.
