Giới thiệu về mô hình DOM

Giới thiệu về mô hình DOM

Anh NguyễnBạn nghĩ gì về bài viết này?

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về mô hình DOM là gì và một số thuộc tính, phương thức có trong mô hình DOM nhé!

Định nghĩa mô hình DOM

DOM (Document Object Model) hay Mô hình đối tượng tài liệu là một chuẩn được định nghĩa bởi tổ chức Web Toàn Cầu (World Wide Web Consortium – W3C). Mô hình DOM cung cấp cách thức để truy cập và thay đổi nội dung của các tài liệu HTML và XML bằng các ngôn ngữ lập trình thông dịch như JavaScript, PHP, Python.

Cũng như rất nhiều chuẩn khác, đặc biệt các chuẩn liên quan đến lập trình web, mô hìnhDOM được phát triển và cải tiến qua nhiều năm.

Giới thiệu về mô hình DOM

DOM giúp thao tác dữ liệu theo mô hình hướng đối tượng. Các phần tử bên trong một tài liệu có cấu trúc được định nghĩa thành các đối tượng, phương thức và thuộc tính để có thể truy xuất dễ dàng mà vẫn đảm bảo tính cấu trúc: mỗi phần tử là một đối tượng, sở hữu các thuộc tính và các phương thức để làm việc với các thuộc tính đó như thêm, xóa, sửa, cập nhật. Bên cạnh đó, bạn cũng có thể thêm bớt các phần tử tùy thích, giúp cho nội dung và cấu trúc của trang web luôn cập nhật động.

Việc xử lý và làm việc với đối tượng HTML rất phức tạp và đa dạng, chính vì vậy JavaScript có cung cấp cho chúng ta nhiều phương thức, đối tượng và mỗi thành phần như vậy sẽ có những nhiệm vụ riêng biệt. Bạn có thể dùng DOM cho nhiều mục đích khác ngoài việc lập trình JavaScript.

HTML DOM

HTML DOM định nghĩa một chuẩn cho việc truy cập và thao tác trên các tài liệu HTML. Trong HTML DOM, mọi thành phần đều được xem là một nút (node), được biểu diễn trên một cấu trúc dạng cây gọi là DOM Tree. 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à ba 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).

Xem xét tài liệu HTML sau:

<!DOCTYPE html>
<html>
<head>
    <title> Hello World</title>
</head>
<body>
    <p> Van ban 1 </p>
    <p> Van ban 2 </p>
    <p> Lien ket den <a href = "http://www.w3.org">W3</a> </p>
</body>
</html>Code language: HTML, XML (xml)

Trình bày tài liệu HTML trên theo cấu trúc cây ngược của DOM

Giới thiệu về mô hình DOM

Khi làm việc với mô hình DOM, bạn cần phân biệt rõ ràng việc truy xuất phần tử, thiết lập giá trị cho phần tử và xóa các phần tử. Phương thức làm việc với các phần tử của DOM sẽ phản ánh sự khác biệt này.

Làm việc với các nút (node)

Các phần tử trên cấu trúc cây đôi khi được gọi là các nút hay các đối tượng nút. Các nút bên dưới một nút khác được gọi là nút con. Chẳng hạn, trong cấu trúc cây tài liệu HTML, nút body có ba nút con, đều là các phần tử p và một trong số các nút p có một nút con a.

Nút body được gọi là nút cha của các nút p. Bất cứ nút nào nằm dưới một nút nhất định đều được gọi là con của nút đó. Ba nút p trong cấu trúc cây tài liệu HTML được gọi là anh em (sibling) vì chúng cùng cấp bậc.

Giới thiệu về mô hình DOM

Tương tự như cách làm việc với các phần tử của DOM, bạn cũng dùng phương thức để làm việc với các nút. Chẳng hạn, bạn dùng appendChild() để thêm nút vào một nút cha có sẵn.

Một số các thuộc tính và phương thức thông dụng sẽ được mô tả ở bảng dưới đây:

Thuộc tính quan hệ:

Thuộc tính quan hệMô tả
 parentNodeNút cha
 childNodesCác nút con
 firstChildNút con đầu tiên
 lastChildNút con cuối cùng
 nextSiblingNút anh em liền kề sau
 previousSiblingNút anh em liền kề trước

Thuộc tính:

Thuộc tínhMô tả
 idLà 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.
 classNameTê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ử.
 tagNameTên thẻ HTML.
 innerHTMLTrả 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.
 outerHTMLTrả về mã HTML của phần tử hiện tại. Nói cách khác, outerHTML = tagName + innerHTML.
 textContentTrả 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.
 attributesTập các thuộc tính như id, name, class, href, title…
 styleTập các thiết lập định dạng của phần tử hiện tại.
 valueLấy giá trị của thành phần được chọn thành một biến.

Phương thức:

Phương thứcMô tả
 getElementById(id)Tham chiếu đến 1 nút duy nhất có thuộc tính id giố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 tagName giố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ụng document.getElementsByTagName('*').
 getElementsByName(name)Tham chiếu đến tất cả các nút có thuộc tính name cầ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.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận