Bạn Tìm Gì Hôm Nay ...?
Tất cả đều có chỉ trong 1 nốt nhạc !
Nếu cần hỗ trợ chi tiết gọi 1900 9477
- Trang chủ Cloud Server-Dedicated-Colocation/ Hướng dẫn - Thủ thuật/ Tìm hiểu về DOM (Document Object Model)
Tìm hiểu về DOM (Document Object Model)
- Monday 25/09/2023
DOM là gì?
DOM là viết tắt của Document Object Model, là một chuẩn được định nghĩa bởi W3C, và được sử dụng để truy xuất hoặc thao tác với các thành phần trong trình duyệt như HTML, CSS và JavaScript. Cấu trúc của DOM dạng cây gọi là DOM Tree, với mỗi thành phần đều được xem như là một nút trên cây. Điều này giúp cho việc xử lý và thao tác với các thành phần trên trình duyệt trở nên dễ dàng hơn. Nếu bạn đang học lập trình web thì tìm hiểu về DOM là một điều quan trọng và cần thiết để hiểu rõ hơn về quy trình xử lý và hiển thị trên trình duyệt.
DOM là rất quan trọng trong việc lập trình JavaScript vì nó cung cấp cho chúng ta một API để truy cập, thao tác và cập nhật các thành phần của trang web. Các thành phần này có thể là các phần tử HTML, thuộc tính CSS và thậm chí cả nội dung văn bản.
Việc sử dụng DOM giúp chúng ta có thể thay đổi nội dung của trang, thêm hoặc xoá các phần tử một cách động mà không cần phải tải lại trang. Điều này cải thiện trải nghiệm người dùng và làm cho trang web trở nên linh hoạt và đáp ứng tốt hơn.
Tại sao cần có DOM?
DOM là rất quan trọng trong việc lập trình JavaScript vì nó cung cấp cho chúng ta một API để truy cập, thao tác và cập nhật các thành phần của trang web. Các thành phần này có thể là các phần tử HTML, thuộc tính CSS và thậm chí cả nội dung văn bản.
Việc sử dụng DOM giúp chúng ta có thể thay đổi nội dung của trang, thêm hoặc xoá các phần tử một cách động mà không cần phải tải lại trang. Điều này cải thiện trải nghiệm người dùng và làm cho trang web trở nên linh hoạt và đáp ứng tốt hơn.
Một ví dụ điển hình cho việc sử dụng DOM trong JavaScript là khi chúng ta muốn thay đổi nội dung của một phần tử HTML bằng cách sử dụng hàm document.getElementById(). Chúng ta cũng có thể tổ chức các phần tử của trang web thành một cây DOM để có thể dễ dàng truy cập từng phần tử và thực hiện các hoạt động như tìm kiếm, thêm hoặc xoá một phần tử.
Trong tổng quan, DOM là một thành phần quan trọng trong việc lập trình JavaScript và giúp chúng ta làm việc với các thành phần của trang web một cách hiệu quả và linh hoạt.
Cấu trúc của DOM
Nút
Đối với HTML DOM, cấu trúc dạng cây gọi là DOM Tree có nghĩa là mọi thành phần đều được xem là 1 nút (node), được biểu diễn trên 1 cây . Các phần tử khác nhau sẽ được phân loại nút khác nhau nhưng quan trọng nhất là 3 loại: nút gốc (document node), nút phần tử (element node), nút văn bản (text node).
- Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ <html>.
- Nút phần tử: biểu diễn cho 1 phần tử HTML.
- Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ <title>, tên đề mục trong thẻ <h1>, hay một đoạn văn trong thẻ <p>.
- Ngoài ra còn có nút thuộc tính (attribute node) và nút chú thích (comment node).
Quan hệ giữa các nút
- Nút gốc (document) luôn là nút đầu tiên.
- Tất cả các nút không phải là nút gốc đều chỉ có 1 nút cha (parent).
- Một nút có thể có một hoặc nhiều con, nhưng cũng có thể không có con nào.
- Những nút có cùng nút cha được gọi là các nút anh em (siblings).
- Trong các nút anh em, nút đầu tiên được gọi là con cả (firstChild) và nút cuối cùng là con út (lastChild).
Các Thuộc tính và Phương thức thường gặp
Thuộc tính:
- id: Định danh – là duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng.
- className: Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử.
- tagName: Tên thẻ HTML.
- innerHTML: Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các nút phần tử và nút văn bản.
- outerHTML: Trả về mã HTML của phần tử hiện tại. Nói cách khác,
outerHTML = tagName + innerHTML. - textContent: Trả về 1 chuỗi kí tự chứa nội dung của tất cả nút văn bản bên trong phần tử hiện tại.
- attributes: Tập các thuộc tính như id, name, class, href, title…
- style: Tập các định dạng của phần tử hiện tại
- value: Lấy giá trị của thành phần được chọn thành một biến.
Phương thức:
- getElementById(id): Tham chiếu đến 1 nút duy nhất có thuộc tính
idgiống với id cần tìm. - getElementsByTagName(tagname): Tham chiếu đến tất cả các nút có thuộc tính
tagNamegiống với tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ thẻ trong tài liệu HTML thì hãy sử dụngdocument.getElementsByTagName('*'). - getElementsByName(name): Tham chiếu đến tất cả các nút có thuộc tính
namecần tìm. - getAttribute(attributeName): Lấy giá trị của thuộc tính.
- setAttribute(attributeName, value): Sửa giá trị của thuộc tính.
- appendChild(node): Thêm 1 nút con vào nút hiện tại.
- removeChild(node): Xóa 1 nút con khỏi nút hiện tại.
Mặt khác, các phần tử DOM đều là các nút trên cây cấu trúc DOM. Chúng sở hữu thêm các thuộc tính quan hệ để biểu diễn sự phụ thuộc giữa các nút với nhau. Nhờ các thuộc tính quan hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên quan hệ và vị trí của các phần tử:
Thuộc tính quan hệ:
- parentNode: Nút cha
- childNodes: Các nút con
- firstChild: Nút con đầu tiên
- lastChild: Nút con cuối cùng
- nextSibling: Nút anh em liền kề sau
- previousSibling: Nút anh em liền kề trước
Truy xuất DOM
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 theo vị trí của nút:
- Node.parentNode: tham chiếu đến nút cha của nút hiện tại, và nút cha này là duy nhất cho mỗi nút. Do đó, nếu bạn cần tìm nguồn gốc sâu xa của 1 nút, bạn phải nối thuộc tình nhiều lần, ví dụ
Node.parentNode.parentNode. - Node.childNodes: tham chiếu đến các nút con trực tiếp của nút hiện tại, và kết quả là 1 mảng các đối tượng. Lưu ý rằng, các nút con không bị phân biệt bởi loại nút, nên kết quả mảng trả về có thể bao gồm nhiều loại nút khác nhau.
- Node.firstChild: tham chiếu đến nút con đầu tiên của nút hiện tại, và tương đương với việc gọi
Node.childNodes[0]. - Node.lastChild: tham chiếu đến nút con cuối cùng của nút hiện tại, và tương đương với việc gọi
Node.childNodes[Element.childNodes.length-1]. - Node.nextSibling: tham chiếu đến nút anh em nằm liền kề sau với nút hiện tại.
- Node.previousSibling: tham chiếu đến nút anh em nằm liền kề trước với nút hiện tại.
Truy xuất trực tiếp:
Truy xuất trực tiếp sẽ nhanh hơn, và đơn giản hơn khi bạn không cần phải biết nhiều về quan hệ và vị trí của nút. Có 3 phương thức để bạn truy xuất trực tiếp được hỗ trợ ở mọi trình duyệt:
document.getElementById('id_cần_tìm')document.getElementsByTagName('div')document.getElementsByName('tên_cần_tìm')
Bên trên là 1 số thông tin cơ bản về DOM, bạn cũng có thể tham khảo chi tiết ở W3SCHOOL
Nguồn tham khảo:
w3school
codelearn
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
P.A Việt Nam cung cấp đa dạng các cấu hình Máy Chủ Ảo và Máy Chủ Riêng
Cloud Server
Cloud Server Pro
Máy Chủ Riêng
Tham khảo các ưu đãi: https://www.pavietnam.vn/vn/tin-khuyen-mai/
