DOM là gì và cách nó liên kết với CSS như thế nào?

DOM (Document Object Model) là một interface lập trình cho HTML và XML. Nó xác định cấu trsuc của document và cách mà document được hiển thị và quản lý. Document này cho phép javascript truy cập và quản lý phần tử và style của web. Mô hình được xây dựng theo cấu trúc cây đối tượng và xác định:

• Các phần tử HTML là đối tượng
• Thuộc tính của tất cả phần tử HTML
• Phương thức truy cập đến tất cả phần tử HTML
• Sự kiện với tất cả phần tử HTML

DOM Document

Là chủ sở hữu tất cả đối tượng trong web. Nếu bạn muốn truy cập đến bất kỳ phần tử nào đều phải bắt đầu với document. Nó còn chứa các thuộc tính và phương thức quan trọng cho truy cập và chỉnh sửa trang web.

Tìm kiếm phần tử HTML

Phương thức	Mô tả
getElementById()	Dùng để lấy các phần tử đơn theo id
getElementsByClassName()	Dùng để lấy mảng phần tử theo tên lớp
getElementsByTagName()	Dùng để lấy phần tử đơn theo tên tag
querySelector()	Trả về phần tử đầu tiến ứng với một Selector cụ thể. Nó có thể lấy theo id, lớp, tag hay bất cứ selector nào hợp lệ trong CSS
querySelectorAll()	Giống với querySelector() ngoại trừ việc nó trả về tất cả phần tử phù hợp với CSS Selector

Thay đổi phần tử HTML

Thuộc tính innerHTML có thể dùng cho thay đổi nội dung của phần tử HTML. Trong ví dụ này ta lấy phần tử với id của header và thiết lập nội dung trong nó là "Hello World"

// Example: Using text
document.getElementById("#header").innerHTML = "Hello World!";

// Example: Using text with tag
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

Thay đổi giá trị thuộc tính

Ta cũng có thể thay đổi giá trị thuộc tính như sau:

document.getElementsByTag("img").src = "image.jpg";

Thay đổi style

Để đổi style cho một phần tử HTML ta cần thay đổi thuộc tính style của phần tử. Ta có thể viết như sau:

document.getElementsByTag("h1").style.borderBottom = "solid 3px #000";

Thêm và xoá phần tử

Thêm phần tử: tạo một phần tử div sử dụng phương thức `create...