Trong lập trình web, việc hiểu biết về DOM và khả năng thao tác với DOM là hai điều cực kỳ quan trọng và cần thiết. DOM cho phép bạn can thiệp vào mọi phần của trang web, từ việc thêm, xóa đến sửa đổi nội dung giúp tạo ra trải nghiệm và nội dung tốt nhất cho người dùng.
Vậy nói tóm lại DOM là gì? Các yếu tố bên trong cây cấu trúc DOM là gì? Tìm hiểu các loại DOM có trong Javascript, các lưu ý và các thao tác đơn giản để thực hiện Dom bằng Javascript như thế nào? Hãy cùng InterData khám phá ngay nhé!
Tìm hiểu khái quát DOM là gì?
DOM, viết tắt của “Document Object Model” (Mô hình Các Đối tượng Tài Liệu), là một chuẩn được W3C (Tổ Chức Web Toàn Cầu) định nghĩa. Nó cho phép truy xuất và thao tác trên các tài liệu có cấu trúc HTML hoặc XML bằng các ngôn ngữ lập trình phổ biến như Javascript, PHP…
Mỗi thẻ HTML đều có các thuộc tính và thuộc tính này có thể phân cấp theo mối quan hệ cha – con với các thẻ HTML khác. Việc này được gọi là selector, và trong DOM, nhiệm vụ của nó là xử lý các vấn đề như thay đổi thuộc tính của thẻ và cấu trúc HTML của thẻ.
Tất cả các thẻ HTML đều được quản lý trong đối tượng document. Thẻ cao nhất là thẻ HTML, tiếp theo là body và head.
Trong phần head, ta thường thấy các thẻ như style, title, còn trong phần body, có vô số các thẻ HTML khác. Vì vậy, khi làm việc với các thẻ HTML bằng JavaScript, ta phải sử dụng đối tượng document.
Nhiệm vụ DOM trong JavaScript
DOM có 4 nhiệm vụ cơ bản trong JavaScript như sau:
- Truy xuất đến các phần tử HTML được thông qua.
- Thay đổi hoặc cập nhật các thuộc tính của các phần tử HTML.
- Thay đổi hoặc cập nhật CSS của các phần tử HTML để điều chỉnh giao diện.
- Thêm, xóa, hoặc chỉnh sửa các phần tử HTML để tạo ra các thay đổi trên trang web.
Các yếu tố bên trong cây cấu trúc DOM
Sau khi đã hiểu khái quát Dom là gì, hãy cùng khám phá các yếu tố bên trong cây DOM có gì nhé!
Node
Trong HTML DOM, mỗi phần tử được xem như một nút (node), được sắp xếp trên một cây cấu trúc gọi là DOM Tree.
Các phần tử khác nhau được phân loại thành các loại nút khác nhau, tuy nhiên, có ba loại quan trọng nhất: Node gốc (document node), Node phần tử (element node), và Node văn bản (text node), mỗi loại có chức năng và đặc điểm riêng.
- Node gốc: Thường là tài liệu HTML tổng thể, được biểu diễn bởi thẻ <html>.
- Node phần tử: Đại diện cho một phần tử HTML cụ thể.
- Node văn bản: Là mỗi đoạn ký tự trong tài liệu HTML, được bao bọc bên trong các thẻ HTML. Đây có thể là tiêu đề trang trong thẻ <title>, tiêu đề mục trong thẻ <h1>, hoặc một đoạn văn bản trong thẻ <p>.
Ngoài ra, còn có các loại node khác như node thuộc tính (attribute node) và node chú thích (comment node).
Quan hệ giữa các nút
Trong DOM, các node được tổ chức thành một cấu trúc cây, với mỗi node đóng vai trò quan trọng và có quan hệ riêng. Dưới đây là một số khái niệm cơ bản:
- Node gốc (document): Luôn là node đầu tiên và đại diện.
- Các node không phải là node gốc đều chỉ có một node cha (parent).
- Một node có thể có một hoặc nhiều node con, nhưng cũng có thể không có con nào.
- Các node có cùng node cha được gọi là các node có quan hệ anh em (siblings).
- Trong các node anh em, node đầu tiên được gọi là con cả (firstChild) và node cuối cùng là con út (lastChild).
Các loại DOM có trong Javascript
JavaScript cung cấp cho người dùng một số loại DOM khác nhau để làm việc với HTML và CSS một cách thuận tiện và linh hoạt hơn.
- DOM document: Đây là một cấu trúc dữ liệu mạnh mẽ lưu trữ toàn bộ các thành phần trong tài liệu của trang web.
- DOM element: Cho phép truy xuất và tương tác với các thẻ HTML thông qua các thuộc tính như class, id, hoặc name của chúng.
- DOM HTML: Cung cấp các phương thức để thay đổi nội dung và các thuộc tính của các thẻ HTML một cách linh hoạt.
- DOM CSS: Cho phép thay đổi và điều chỉnh các kiểu dáng CSS của các thẻ HTML.
- DOM Event: Là quá trình gán các sự kiện như onclick(), onload() vào các thẻ HTML để xử lý hành động của người dùng trên trang web.
- DOM Listener: Là cơ chế lắng nghe và xử lý các sự kiện được kích hoạt trên các thẻ HTML.
- DOM Navigation: Công cụ giúp quản lý và thao tác với các thẻ HTML dễ dàng, đồng thời hiển thị mối quan hệ cha – con của chúng trong cấu trúc DOM.
- DOM Node và NodeList: Là các đối tượng cho phép chúng ta thực hiện các thao tác và truy xuất dữ liệu trong HTML thông qua đối tượng (Object).
Các thao tác đơn giản với DOM bằng JavaScript
Truy xuất DOM
Truy xuất trực tiếp
Truy xuất trực tiếp là phương pháp nhanh chóng và đơn giản, đặc biệt khi bạn không cần phải quan tâm đến các mối quan hệ và vị trí của các nút trong cấu trúc DOM. Có ba phương thức được hỗ trợ bởi mọi trình duyệt để bạn có thể truy xuất trực tiếp đó là:
document.getElementById('id_cần_tìm')
document.getElementsByTagName('div')
document.getElementsByName('tên_cần_tìm')
Các trình duyệt hiện đại như Chrome đã tiến xa hơn với việc hỗ trợ các phương pháp truy xuất mạnh mẽ và linh hoạt hơn rất nhiều, bao gồm khả năng truy xuất theo các vùng chọn CSS phức tạp như jQuery, một thư viện Javascript mạnh giúp tối ưu hóa hiệu suất công việc và tiết kiệm thời gian đáng kể.
document.querySelector('#id p.class')
: truy xuất đến vùng chọn và trả về kết quả tham chiếu đầu tiên.document.querySelectorAll('#id p[class^=test]')
: tương tựquerySelector
nhưng trả về mảng các tham chiếu.document.getElementsByName('class1 class2')
: tham chiếu đến tất cả các nút có thuộc tínhclassName
chứa tất cả các tên lớp cần tìm.
Truy xuất gián tiếp
Mỗi nút trên cây DOM đều có 6 thuộc tính quan hệ để giúp bạn truy xuất gián tiếp dựa trên vị trí của nút:
- Node.parentNode: Đây là thuộc tính tham chiếu đến nút cha của nút hiện tại. Mỗi nút chỉ có một nút cha duy nhất. Để tìm nguồn gốc xa của một nút, bạn cần nối thuộc tính này nhiều lần, ví dụ Node.parentNode.parentNode.
- Node.childNodes: trỏ đến các nút con trực tiếp của nút hiện tại và trả về một mảng chứa các đối tượng này. Cần lưu ý rằng, các nút con không được phân biệt theo loại, vì vậy mảng trả về có thể chứa nhiều loại nút khác nhau.
- Node.firstChild: chỉ đơn giản là tham chiếu đến nút con đầu tiên của nút hiện tại, tương đương với việc truy cập Node.childNodes[0].
- Node.lastChild: trỏ đến nút con cuối cùng của nút hiện tại, và tương đương với việc truy cập Node.childNodes[Element.childNodes.length-1].
- Node.nextSibling: thuộc tính tham chiếu đến nút anh em nằm liền kề sau với nút hiện tại.
- Node.previousSibling: thuộc tính tham chiếu đến nút anh em nằm liền kề trước với nút hiện tại.
Một số điều cần lưu ý trong DOM Tree
- Document (nút gốc) luôn là node duy nhất và đứng đầu của cây DOM.
- Mỗi node chỉ có một node cha (parent) duy nhất.
- Một node có thể chứa một hoặc nhiều node con, và cũng có thể không có node con nào.
- Các node cùng cha được gọi là siblings (anh em ruột).
- Các node được tổ chức thành các tầng thế hệ, với node đầu tiên được gọi là firstchild và node cuối cùng là lastchild.
Ngoài việc giới thiệu về DOM là gì, các yếu tố bên trong cây cấu trúc DOM và các thao tác đơn giản với DOM bằng JavaScript, InterData cũng hy vọng bài viết này sẽ mang lại cho bạn những hiểu biết thú vị và hữu ích, đặc biệt là đối với những người làm trong lĩnh vực IT.