HTML DOM: Cách sử dụng Mô hình đối tượng tài liệu



Bài viết này sẽ cung cấp cho bạn kiến ​​thức chi tiết và toàn diện về HTML DOM, Document Object Model kèm theo các ví dụ minh họa.

Đối tượng Document đại diện cho tài liệu được hiển thị trong cửa sổ đó. Đối tượng Document có nhiều thuộc tính tham chiếu đến các đối tượng khác cho phép truy cập và sửa đổi nội dung tài liệu. Trong bài này, chúng ta sẽ hiểu về HTML DOM.

mảng sắp xếp c ++

Khái niệm DOM HTML

Cách một nội dung dạng tài liệu được truy cập và sửa đổi được gọi là Mô hình Đối tượng Tài liệu hoặc DOM. Các Đối tượng được tổ chức theo một hệ thống phân cấp. Cấu trúc phân cấp này áp dụng cho việc tổ chức các đối tượng trong tài liệu Web.





  • Đối tượng cửa sổ & dấu trừ Trên cùng của hệ thống phân cấp. Nó là yếu tố tối đa của hệ thống phân cấp đối tượng.
  • Đối tượng tài liệu & dấu trừ Mỗi tài liệu HTML được tải vào một cửa sổ sẽ trở thành một đối tượng tài liệu. Tài liệu chứa nội dung của trang.
  • Đối tượng biểu mẫu & dấu trừ Mọi thứ nằm trong thẻ… sẽ đặt đối tượng biểu mẫu.
  • Phần tử điều khiển biểu mẫu & dấu trừ Đối tượng biểu mẫu chứa tất cả các phần tử được xác định cho đối tượng đó như trường văn bản, nút, nút radio và hộp kiểm.

DOM HTML là gì

Mô hình Đối tượng Tài liệu là một API lập trình cho các tài liệu. Bản thân mô hình đối tượng gần giống với cấu trúc của các tài liệu mà nó mô hình hóa. Ví dụ: hãy xem xét bảng này, được lấy từ một tài liệu HTML:

 
Shady Grove Aeolian
Qua sông, Charlie Dorian

DOM HTML KHÔNG phải là gì

Phần này được thiết kế để hiểu chính xác hơn về Mô hình Đối tượng Tài liệu bằng cách phân biệt nó với các hệ thống khác có thể giống như nó.



Mặc dù Mô hình đối tượng tài liệu bị ảnh hưởng mạnh mẽ bởi HTML động, ở Cấp độ 1, nó không triển khai tất cả HTML động. Đặc biệt, các sự kiện vẫn chưa được xác định. Cấp độ 1 được thiết kế để tạo nền tảng vững chắc cho loại chức năng này bằng cách cung cấp một mô hình mạnh mẽ, linh hoạt của chính tài liệu.

Mô hình Đối tượng Tài liệu không phải là một đặc tả nhị phân. Các chương trình Mô hình Đối tượng Tài liệu được viết bằng cùng một ngôn ngữ sẽ tương thích với mã nguồn trên các nền tảng, nhưng Mô hình Đối tượng Tài liệu không xác định bất kỳ hình thức tương tác nhị phân nào.

Mô hình Đối tượng Tài liệu không phải là một cách tồn tại các đối tượng đối với XML hoặc HTML. Thay vì chỉ định cách các đối tượng có thể được biểu diễn trong XML, Mô hình Đối tượng Tài liệu chỉ định cách các tài liệu XML và HTML được biểu diễn dưới dạng các đối tượng, để chúng có thể được sử dụng trong các chương trình hướng đối tượng.



HTML DOM KHÔNG phải là

Mô hình Đối tượng Tài liệu không phải là một tập hợp các cấu trúc dữ liệu, nó là một mô hình đối tượng chỉ định các giao diện. Mặc dù tài liệu này chứa các sơ đồ hiển thị các mối quan hệ cha / con, nhưng đây là các mối quan hệ logic được xác định bởi các giao diện lập trình, không phải là biểu diễn của bất kỳ cấu trúc dữ liệu nội bộ cụ thể nào.

Mô hình Đối tượng Tài liệu không xác định “ngữ nghĩa bên trong thực sự” của XML hoặc HTML. Ngữ nghĩa của các ngôn ngữ đó được xác định bởi chính các ngôn ngữ đó.

Mô hình Đối tượng Tài liệu là một mô hình lập trình được thiết kế để tôn trọng những ngữ nghĩa này. Mô hình Đối tượng Tài liệu không có bất kỳ phân nhánh nào đối với cách bạn viết tài liệu XML và HTML, bất kỳ tài liệu nào có thể được viết bằng các ngôn ngữ này đều có thể được trình bày trong Mô hình Đối tượng Tài liệu.

Mô hình Đối tượng Tài liệu, bất chấp tên gọi của nó, không phải là đối thủ cạnh tranh với Mô hình Đối tượng Thành phần (COM). COM, giống như CORBA, là một cách độc lập với ngôn ngữ để chỉ định các giao diện và đối tượng. Mô hình Đối tượng Tài liệu là một tập hợp các giao diện và đối tượng được thiết kế để quản lý các tài liệu HTML và XML. DOM có thể làđược triển khai bằng các hệ thống độc lập với ngôn ngữ như COM hoặc CORBA, nó cũng có thể được triển khai bằng cách sử dụng các liên kết dành riêng cho ngôn ngữ như liên kết Java hoặc ECMAScript được chỉ định trong tài liệu này.

Mô hình đối tượng tài liệu đến từ đâu

Mô hình Đối tượng Tài liệu bắt nguồn như một đặc tả để cho phép các tập lệnh JavaScript và chương trình Java có thể di động giữa các trình duyệt web. HTML động là tổ tiên trực tiếp của Mô hình Đối tượng Tài liệu và ban đầu nó được nghĩ đến phần lớn là về các trình duyệt.

apache spark vs hadoop mapreduce

Tuy nhiên, khi Nhóm công tác mô hình đối tượng tài liệu được thành lập, nhóm này cũng được các nhà cung cấp trong các lĩnh vực khác tham gia, bao gồm các trình soạn thảo HTML hoặc XML và các kho tài liệu. Do đó, một số nhà cung cấp đã làm việc với SGML trước khi XML được phát triển, Mô hình Đối tượng Tài liệu đã bị ảnh hưởng bởi SGML Groves và tiêu chuẩn HyTime. Một số nhà cung cấp này cũng đã phát triển các mô hình đối tượng của riêng họ cho các tài liệu để cung cấplập trình API cho các trình soạn thảo SGML / XML hoặc kho lưu trữ tài liệu và các mô hình đối tượng này cũng đã ảnh hưởng đến Mô hình Đối tượng Tài liệu.

Thuộc tính của HTML DOM

Hãy xem các thuộc tính của đối tượng tài liệu mà đối tượng tài liệu có thể truy cập và sửa đổi.

DOM-Graph
  1. Đối tượng cửa sổ: Đối tượng Window luôn ở trên cùng của hệ thống phân cấp.
  2. Đối tượng tài liệu: Khi một tài liệu HTML được tải vào một cửa sổ, nó sẽ trở thành một đối tượng tài liệu.
  3. Đối tượng Biểu mẫu: Nó được đại diện bởi hình thức các thẻ.
  4. Đối tượng liên kết: Nó được đại diện bởi liên kết các thẻ.
  5. Đối tượng neo: Nó được đại diện bởi a href các thẻ.
  6. Phần tử điều khiển biểu mẫu: Biểu mẫu có thể có nhiều phần tử điều khiển như trường văn bản, nút, nút radio và hộp kiểm, v.v.

Phương pháp đối tượng tài liệu :

  1. ghi (“chuỗi”): ghi chuỗi đã cho trên tài liệu.
  2. getElementById (): trả về phần tử có giá trị id đã cho.
  3. getElementsByName (): trả về tất cả các phần tử có giá trị tên đã cho.
  4. getElementsByTagName (): trả về tất cả các phần tử có tên thẻ đã cho.
  5. getElementsByClassName (): trả về tất cả các phần tử có tên lớp đã cho.

Tìm các phần tử HTML

Khi bạn muốn truy cập các phần tử HTML bằng JavaScript, trước tiên bạn phải tìm các phần tử đó.

Có một vài cách để làm điều này:

  • Tìm các phần tử HTML theo id
  • Tìm các phần tử HTML theo tên thẻ
  • Tìm các phần tử HTML theo tên lớp

Tìm phần tử HTML theo Id

Cách dễ nhất để tìm một phần tử HTML trong DOM là sử dụng id phần tử.

Thí dụ

Tìm các phần tử HTML theo tên thẻ

Ví dụ này tìm phần tử có id = ”main”, sau đó tìm tất cả

các phần tử bên trong 'main':

Với điều này, chúng ta sẽ kết thúc bài viết HTML DOM này. Tôi hy vọng bạn đã hiểu về các khía cạnh khác nhau của HTML DOM, Mô hình Đối tượng Tài liệu.

java có-một mối quan hệ

Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Hình ảnh HTML” và chúng tôi sẽ liên hệ lại với bạn.