NIIT - ICT HÀ NỘI

Kiến thức lập trình

DOM là gì?

  • Tác giả NIIT - ICT HANOI

  • Ngày đăng 11/ 06/ 2020

  • Bình luận 0 Bình luận

Trong những bài tiếp theo bạn sẽ được học về cách sử dụng JavaScript để thao tác với các phần tử DOM. Nhưng trước tiên, hãy tìm hiểu xem DOM là gì?

 

DOM là gì?

 

DOM là tên gọi tắt của Document Object Model, là một mô hình độc lập về nền tảng và ngôn ngữ để thể hiện các tài liệu HTML hoặc XML.

 

DOM định nghĩa cấu trúc logic của các tài liệu và cách thức mà chúng có thể được truy cập và thao tác bởi một chương trình ứng dụng.

 

Trong DOM, tất cả các phần của tài liệu, chẳng hạn như các thành phần, thuộc tính, văn bản, v.v. được tổ chức theo cấu trúc giống như cây phân cấp.

 

Tương tự như một cây gia phả trong cuộc sống thực bao gồm cha mẹ và con cái, ông bà, cháu chắt chút chít chụt chịt....

 

Trong thuật ngữ DOM, các phần riêng lẻ của tài liệu này được gọi là các Node.

 

DOM đại diện cho tài liệu HTML được gọi là HTML DOM. Tương tự, DOM đại diện cho tài liệu XML được gọi là XML DOM.

 

Trong những bài tiết theo này, chúng ta sẽ cùng học về HTML DOM, cách thức tiêu chuẩn để truy cập và thao tác với các tài liệu HTML thông qua JavaScript.

 

Với HTML DOM, bạn có thể sử dụng JavaScript để xây dựng các tài liệu HTML, điều hướng cấu trúc phân cấp của chúng và thêm, sửa đổi hoặc xóa các thành phần và thuộc tính hoặc nội dung của chúng, v.v.

 

Hầu hết mọi thứ được tìm thấy trong tài liệu HTML đều có thể được truy cập, thay đổi, xóa hoặc thêm bằng JavaScript với sự trợ giúp của HTML DOM.

 

Để hiểu rõ hơn về điều này, hãy xem xét tài liệu HTML đơn giản sau:

 

<!DOCTYPE html>
<html>
<head>
    <title>Trang Web của tôi</title>
</head>
<body>
    <h1>Hệ điều hành</h1>
    <ul>
        <li>Android</li>
        <li>iOS</li>
    </ul>
</body>
</html>

 

Tài liệu HTML ở trên có thể được biểu diễn bằng DOM tree (cây thư mục DOM) như sau:

 

Ví dụ minh họa sơ đồ DOM tree đơn giản

Sơ đồ minh họa DOM tree đơn giản

 

Sơ đồ trên cho thấy mối quan hệ cha / con giữa các node.

 

Nút trên cùng, tức là nút Document là nút gốc (root node) của cây DOM, có một phần tử con là phần tử <html>.

 

Trong khi đó, các phần tử <head> và <body> là các nút con của nút cha <html>.

 

Các phần tử <head> và <body> là anh em ruột vì chúng ở cùng cấp độ.

 

Ngoài ra, nội dung văn bản bên trong một phần tử là một nút con của phần tử cha. Vì vậy, ví dụ, 'Hệ điều hành' được coi là node con của <h1>, v.v.

 

Nhận xét (commnet) bên trong tài liệu HTML cũng là các node trong cây DOM, mặc dù nó không ảnh hưởng đến biểu diễn trực quan.

 

Nhận xét (comment) rất hữu ích cho việc ghi chú lại code. Mặc dù nó cũng là một node, nhưng bạn sẽ hiếm khi cần truy xuất và thao tác với chúng.

 

Các thuộc tính HTML như id, class, title, style, v.v. cũng được coi là các node trong hệ thống phân cấp DOM nhưng chúng không tham gia vào các mối quan hệ cha / con như các node khác làm. Chúng được truy cập như các thuộc tính của phần tử node có chứa chúng.

 

Mỗi phần tử trong tài liệu HTML như hình ảnh, siêu liên kết, biểu mẫu, nút, tiêu đề, đoạn, v.v. được thể hiện bằng cách sử dụng một đối tượng JavaScript trong hệ thống phân cấp DOM và mỗi đối tượng chứa các thuộc tính và phương thức để mô tả và thao tác các đối tượng này.

 

Ví dụ: Thuộc tính style của các thành phần DOM có thể được sử dụng để lấy hoặc thiết lập style nội tuyến của một thành phần.

 

Mẹo: Trên thực tế, Document Object Model hoặc DOM về cơ bản là đại diện cho các thành phần khác nhau của trình duyệt và tài liệu Web hiện tại (HTML hoặc XML) có thể được truy cập hoặc thao tác bằng ngôn ngữ kịch bản như JavaScript.

 

Như vậy là bạn đã hiểu sơ bộ về DOM là gì. Bài tiếp theo chúng ta sẽ học cách sử dụng JavaScript để thao tác, sửa đổi các phần tử DOM.

 

> Đọc thêm: Đối tượng trong JavaScript

 

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 - 0914939543 - 0353655150 

Email: hello@niithanoi.edu.vn

Website: https://niithanoi.edu.vn

Fanpage: https://facebook.com/NIIT.ICT/

#niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python

Tags
Bài viết liên quan
17/06/2020
  • 0
Chi tiết
DOM Selector trong JavaScript

Để thao tác với DOM trong JavaScript thì chúng ta cũng phải nhắm được đến (select) DOM đấy đã đúng không nào. Cũng giống như cô giáo...

Xem thêm
 
Chat với chúng tôi