DOM là gì? Những khái niệm cơ bản đến nâng cao về DOM

DOM là gì?

DOM (Document Object Model) là một mô hình đối tượng được sử dụng để đại diện cho cấu trúc của tài liệu HTML và XML. Nó giúp các nhà phát triển tương tác với tài liệu web thông qua các ngôn ngữ lập trình như JavaScript. DOM biến các phần tử trong HTML thành các đối tượng mà bạn có thể truy xuất và thay đổi, giúp trang web trở nên động hơn.

1. Cấu trúc cơ bản của DOM

Khi trình duyệt tải một tài liệu HTML, nó tạo ra một cây DOM, trong đó:

• Document: Đại diện cho toàn bộ tài liệu.
• Element: Các phần tử HTML như <div>, <p>, <h1>.
• Text: Nội dung văn bản bên trong các thẻ HTML.

Ví dụ về cấu trúc DOM

getElementById()

getElementsByClassName()

Lấy tất cả các phần tử có class giống nhau.

querySelector()

querySelectorAll()

Lấy tất cả các phần tử khớp với selector CSS.

textContent

Thay đổi nội dung HTML với innerHTML

Bạn có thể thay đổi hoặc lấy toàn bộ nội dung HTML bên trong một phần tử.

createElement()

Xóa phần tử với removeChild()

Bạn có thể xóa một phần tử con khỏi phần tử cha.

replaceChild()

5. Sự kiện trong DOM (Event)

DOM cung cấp khả năng xử lý sự kiện, cho phép trang web phản hồi khi người dùng tương tác như nhấn chuột, nhập liệu, hoặc di chuyển chuột.

Lắng nghe sự kiện với addEventListener()

Phương thức này cho phép bạn đăng ký một hàm xử lý sự kiện cho một phần tử.

MutationObserver

Trong ví dụ này, MutationObserver sẽ theo dõi và ghi lại bất kỳ sự thay đổi nào xảy ra trong danh sách con của body.

7. Tối ưu hóa thao tác với DOM

Giảm thiểu số lần truy xuất DOM

Truy xuất DOM có thể tốn nhiều tài nguyên, vì vậy bạn nên lưu trữ các phần tử đã truy xuất vào biến để tái sử dụng:

DocumentFragment

Kết luận

DOM là một thành phần quan trọng trong lập trình web, cho phép bạn truy xuất, thay đổi, và tương tác với các phần tử HTML. Từ các thao tác cơ bản đến các kỹ thuật nâng cao như Virtual DOM, Shadow DOM và MutationObserver, việc nắm vững DOM sẽ giúp bạn xây dựng các ứng dụng web hiệu quả hơn.

• JavaScript
• HTML