DOM Là Gì ? 1 Số Thao Tác Với DOM Trong JavaScript.

Danh mục bài viết

DOM là gì?

DOM (Document Object Model) là một giao diện lập trình cung cấp cấu trúc dữ liệu dạng cây để JavaScript có thể tương tác với tài liệu HTML hoặc XML. Khi trình duyệt tải trang web, nó chuyển đổi HTML thành một cây DOM. Mỗi thành phần trong tài liệu HTML sẽ trở thành một node trong cây DOM.

Nguồn: W3 Schools

Các thành phần chính của DOM:

1. Document

2. Elements

3. Attributes

4. Text Nodes

Đại diện cho nội dung văn bản nằm giữa các thẻ HTML, ví dụ

				
					<p>Chào mừng bạn đến với <a href="https://fstack.io.vn/ve-chung-toi/">Fstack</a>.</p>

Trong DOM, nội dung “Đây là một đoạn văn bản.” là một nút văn bản (text node).

Cách JavaScript tương tác với DOM

1. Truy xuất phần tử DOM

JavaScript cung cấp các phương thức để lấy các phần tử trong DOM:

				
					const heading = document.getElementById('heading');

				
					const items = document.getElementsByClassName('item');

				
					const firstItem = document.querySelector('.item'); // Lấy phần tử đầu tiên
const allItems = document.querySelectorAll('.item'); // Lấy tất cả

2. Thay đổi nội dung và thuộc tính

				
					const heading = document.getElementById('heading');
heading.textContent = 'Chào mừng bạn đến với Fstack!'; // Thay đổi nội dung

				
					const link = document.querySelector('a');
link.href = 'https://fstack.io.vn'; // Cập nhật liên kết

3. Thao tác với CSS

				
					const heading = document.querySelector('#heading');
heading.style.color = 'blue';
heading.style.fontSize = '24px';

				
					heading.classList.add('highlight'); // Thêm lớp
heading.classList.remove('highlight'); // Xóa lớp

4. Thêm và xóa phần tử

				
					const newItem = document.createElement('li');
newItem.textContent = 'Mục mới';
document.querySelector('ul').appendChild(newItem); // Thêm vào danh sách

				
					const item = document.querySelector('.item');
item.remove();

Ứng dụng thực tế

1. Xử lý sự kiện

Bạn có thể lắng nghe và phản hồi các sự kiện của người dùng, chẳng hạn như click, hover, hoặc submit.

				
					const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Bạn vừa nhấn nút!');
});

2. Tạo hiệu ứng động

DOM thường được sử dụng để tạo hiệu ứng tương tác như ẩn/hiện nội dung, thay đổi trạng thái.

				
					const box = document.querySelector('.box');
box.addEventListener('mouseover', () => {
  box.style.backgroundColor = 'yellow';
});
box.addEventListener('mouseout', () => {
  box.style.backgroundColor = 'white';
});

Tổng kết

Như vậy, chúng ta đã cùng nhau tìm hiểu các khái niệm cơ bản về cấu trúc tài liệu và cách tương tác với DOm. Mặc dù chỉ dừng lại ở những kiến thức nền tảng, bạn cũng có thể thấy sự quan trọng và sức mạnh của mô hình này. Hiểu rõ cách hoạt động của nó sẽ giúp bạn làm chủ các kỹ thuật hiện đại hơn như React, Vue, hoặc Angular.

Click để xem chi tiết hơn

Ở trên là 1 số chia sẻ về kiến thức JavaScript của mình, vì đây đa phần là kiến thức mình tự học nên có thể bài viết này có thể có nhiều chỗ chưa chính xác và thiếu sót, mong mọi người góp ý ở dưới phần bình luận để bài viết thêm hoàn chỉnh và xây dựng một cộng đồng nơi mọi người có thể chia sẻ kinh nghiệm lập trình cho nhau 😘.