### Cấu trúc cây DOM (Document Object Model) trong HTML
Cây DOM là một cấu trúc dữ liệu dạng cây đại diện cho các phần tử của tài liệu HTML. Mỗi thẻ HTML trở thành một nút (node) trong cây, với các mối quan hệ cha-con giữa các phần tử. Cấu trúc này bao gồm:
1. **Nút gốc**: Là nút đầu tiên, đại diện cho toàn bộ tài liệu, thường là `<html>`.
2. **Nút con**: Các phần tử con như `<head>`, `<body>`, và các thẻ khác nằm dưới nút gốc.
3. **Nút lá**: Các nút không có con, như các thẻ văn bản, hình ảnh hoặc liên kết.
### Tại sao DOM lại quan trọng trong việc tương tác với trang web thông qua JavaScript?
1. **Tương tác động**: DOM cho phép JavaScript truy cập và thay đổi nội dung, cấu trúc và phong cách của trang web sau khi nó đã được tải.
2. **Thay đổi nội dung**: Bạn có thể thêm, xóa hoặc sửa đổi các phần tử HTML mà không cần tải lại trang, tạo ra trải nghiệm người dùng linh hoạt và mượt mà.
3. **Xử lý sự kiện**: DOM hỗ trợ việc lắng nghe và xử lý các sự kiện như nhấp chuột, di chuột hay nhập liệu từ bàn phím, giúp tạo ra tương tác phong phú.
4. **Khả năng lập trình hóa**: Cấu trúc cây dễ dàng cho lập trình viên thao tác thông qua các phương thức JavaScript như `getElementById()`, `querySelector()`, và nhiều phương thức khác để truy cập và điều chỉnh các nút trong cây.
Tóm lại, DOM là cầu nối giữa tài liệu HTML và JavaScript, cho phép lập trình viên tương tác hiệu quả với trang web để tạo ra trải nghiệm người dùng tốt hơn.