Mô hình Đối tượng Tài liệu (DOM)
DOM (Mô hình Đối tượng Tài liệu) là một tiêu chuẩn định nghĩa tài liệu HTML hoặc XML dưới dạng cây nút có cấu trúc. Mỗi nút đại diện cho một phần của tài liệu như các yếu tố, thuộc tính hay văn bản. DOM cho phép JavaScript truy cập và thao tác các nút này một cách lập trình, từ đó thay đổi nội dung, cấu trúc và kiểu dáng của trang web.
Mô hình Đối tượng Trình duyệt (BOM)
BOM (Mô hình Đối tượng Trình duyệt) không phải là một tiêu chuẩn mà là một tập hợp quy tắc xác định các đối tượng do trình duyệt cung cấp, cho phép nhà phát triển tương tác với cửa sổ trình duyệt. BOM bao gồm chức năng như cửa sổ trình duyệt, mở cửa sổ mới, vị trí, lịch sử v.v.
Dưới đây là một ví dụ đơn giản để minh họa việc sử dụng DOM và BOM:
// Sử dụng DOM để lấy một phần tử
var phanTu = document.getElementById("phanTu");
// Thay đổi nội dung của phần tử
phanTu.innerHTML = "Xin chào, Thế giới!";
// Sử dụng BOM để mở một cửa sổ trình duyệt mới
window.open("http://example.com", "_blank");
1. Thao tác với Phần tử
1.1 Lấy thẻ
1.1.1 Ví dụ về việc lấy bằng id và tên thẻ
<div id="khuVuc">Nội dung mặc định</div>
var khuVuc = document.getElementById('khuVuc'); // Lấy thẻ
console.log(khuVuc); // Kiểm tra xem đã lấy thành công chưa
Để sửa đổi khu vực, bạn có thể sử dụng: khuVuc.textContent='Nội dung được sửa đổi'
Khi không sử dụng id, hãy tạo nhiều thẻ p, kết quả thường sẽ là một mảng
<body>
<p>Nội dung mặc định</p>
<p>Nội dung mặc định</p>
<p>Nội dung mặc định</p>
<p>Nội dung mặc định</p>
</body>
<script>
var noiDungs = document.getElementsByTagName('p');
console.log(noiDungs);
</script>
Kết quả in ra sẽ là một mảng, nếu muốn sửa đổi nội dung của mảng, cần sử dụng chỉ số
noiDungs[0].textContent="Thẻ p đầu tiên";
Cài đặt đồng bộ, sử dụng vòng lặp for
1.1.2
Có thể sử dụng document.querySelectorAll()
Nội dung bên trong dấu ngoặc đơn cần sử dụng quy tắc CSS, ở đây không giải thích thêm
1.1.3 Lấy phần tử cha/con
var bien1 = bien2.parentNode; // Ghi đè toàn bộ nội dung của lớp cha trước đó
Lấy phần tử con: bien.children
2. Xử lý Kiểu dáng
Trong JavaScript, thay đổi kiểu dáng
var khuVuc = document.querySelector('#khuVuc');
khuVuc.style.width = '100px';
khuVuc.style.height='100px';
khuVuc.style.backgroundColor = 'aqua';
Hoặc gọi tên lớp
khuVuc.className = "tên lớp"
3. Xử lý Văn bản
Ngoài textContent, còn có innerHTML
Khác biệt: innerHTML có thể phân tích văn bản
4. Xử lý Sự kiện
4.1 Phương pháp này so với truyền thống, nếu viết hai lần, sẽ xảy ra việc ghi đè
khuVuc.onclick = function () {
alert('Surprise!');
};
khuVuc.onclick = function () {
alert('Surprise lại!');
};
4.2 Phương pháp này sẽ không gây ra vấn đề ghi đè, và phạm vi sử dụng cũng rộng hơn
khuVuc.addEventListener('click', function () {
alert('Surprise!');
});
khuVuc.addEventListener('click', function () {
alert('Surprise lại!');
});
5. Bộ định thời
5.1 Bộ định thời chậm, đơn vị của 2000 là miligiây
setTimeout (function () {
alert('Surprise');
}, 2000);
5.2 Đầu ra định kỳ
setInterval(function () {
console.log('Đầu ra mỗi 2s một lần');
}, 2000);