Web APIs: Đối tượng Document

Giao diện Document biểu thị bất kỳ trang web nào được tải trong trình duyệt và đóng vai trò như một điểm vào nội dung của trang web, đó là cây DOM (Document Object Model). Cây DOM bao gồm các phần tử như <body> và <table>, cũng như nhiều phần tử khác. Nó cung cấp chức năng toàn cục cho tài liệu, như cách lấy URL của trang và tạo các phần tử mới trong tài liệu.

Giao diện Document mô tả các thuộc tính và phương thức chung cho bất kỳ loại tài liệu nào. Tùy thuộc vào loại tài liệu (ví dụ: HTML, XML, SVG,…), một API lớn hơn có sẵn: tài liệu HTML, được phân phát bằng loại nội dung “text/html”, cũng triển khai giao diện HTMLDocument, trong khi tài liệu XML và SVG triển khai giao diện XMLDocument.

Hàm tạo

Document()

Tạo một đối tượng Document mới.

Các thuộc tính

Giao diện này cũng được thừa kế từ giao diện Node và EventTarget.

```
Document.anchors Read only
```
Trả về danh sách tất cả các anchor trong tài liệu.
```
Document.body
```
Trả về phần tử <body> hoặc <frameset> của tài liệu hiện hành.
```
Document.characterSet Read only
```
Trả về tập ký tự đang được tài liệu sử dụng.
```
Document.compatMode Read only
```
Cho biết liệu tài liệu có được hiển thị ở chế độ quirks hay chế độ nghiêm ngặt hay không.
```
Document.contentType Read only
```
Trả về Content-Type trong MIME Header của tài liệu hiện hành.
```
Document.doctype Read only
```
Trả về Document Type Definition (DTD) của tài liệu hiện hành.
```
Document.documentElement Read only
```
Trả về Element là con trực tiếp của Document. Đối với tài liệu HTML, đây thường là phần tử HTMLElement.
```
Document.documentURI Read only
```
Trả về vị trí tài liệu dưới dạng một chuỗi.
```
Document.embeds Read only
```
Trả về một danh sách của các phần tử nhúng <embed> within tài liệu hiện hành.
```
Document.forms Read only
```
Trả về một danh sách của các phần tử <form> within tài liệu hiện hành.
```
Document.head Read only
```
Trả về phần tử <head> của tài liệu hiện hành.
```
Document.hidden Read only
```
…
```
Document.images Read only
```
Trả về một danh sách của các hình ảnh tài liệu hiện hành.
```
Document.implementation Read only
```
Trả về DOM được liên kết với tài liệu hiện hành.
```
Document.lastStyleSheetSet Read only
```
Trả về the tên của tập hợp “style sheet” được kích hoạt lần cuối. Có giá trị null cho đến khi “style sheet” được thay đổi bằng cách thiết lập giá trị của selectedStyleSheetSet.
```
Document.links Read only
```
Trả về một danh sách tất cả các liên kết trong tài liệu.
```
Document.mozSyntheticDocument
```
Trả về một giá trị Boolean và mang gí trị true nếu tài liệu này là tổng hợp, chẳng hạn như một hình ảnh độc lập, video, tệp âm thanh hoặc tương tự.
```
Document.mozFullScreenElement Read only
```
Phần tử hiện đang ở chế độ toàn màn hình cho tài liệu này.
```
Document.mozFullScreenEnabled Read only
```
true nếu việc gọi Element.mozRequestFullscreen() thành công trong tài liệu hiện hành.
```
Document.plugins Read only
```
Trả về một danh sách các plugin có sẵn.
```
Document.preferredStyleSheetSet Read only
```
Trả về tập họp style sheet ưu tiên được chỉ định.
```
Document.scripts Read only
```
Trả về tất cả phần tử <script> trong tài liệu.
```
Document.scrollingElement Read only
```
Trả về một tham chiếu đến Element cuộn trong tài liệu.
```
Document.selectedStyleSheetSet
```
Trả về tập họp style sheet đang hiện hành.
```
Document.styleSheetSets Read only
```
Trả về một danh sách của tập họp style sheet có hiệu lực trên tài liệu.
```
Document.timeline Read only
```
…
```
Document.undoManager Read only
```
…
```
Document.visibilityState Read only
```
Trả về một chuỗi biểu thị trạng thái hiển thị của tài liệu. Các giá trị có thể hiển thị, ẩn, hiển thị trước và không được tải.

Giao diện Document được mở rộng với giao diện ParentNode:

```
ParentNode.childElementCount Read only
```
Trả về số lượng phần tử con của ParentNode này.
```
ParentNode.children Read only
```
Trả về một HTMLCollection hiện hành có chứa tất cả đối tượng Element con ParentNode này, bỏ qua tất cả các nút không phải phần tử con của nó.
```
ParentNode.firstElementChild Read only
```
Trả về nút đầu tiên thỏa điều kiện vừa là con của ParentNode và vừa là một Element, hoặc trả về null khi không có phần tử nào thỏa điều kiện.
```
ParentNode.lastElementChild Read only
```
Trả về nút cuối thỏa điều kiện vừa là con của ParentNode và vừa là một Element, hoặc trả về null khi không có phần tử nào thỏa điều kiện.

Phương thức

Giao diện này cũng được thừa kế từ giao diện Node và EventTarget.

Document.adoptNode()

Áp dụng nút từ một tài liệu bên ngoài.

Document.createAttribute()

Tạo mới một đối tượng Attr và trả về giá trị vừa tạo.

Document.createElement()

Tạo mới một phần tử với tag-name được chỉ định.

Document.createEvent()

Tạo một đối tượng event.

Document.getElementsByClassName()

Trả về danh sách các phần tử phần tử với thuộc tính class được chỉ định.

Document.getElementsByTagName()

Trả về danh sách các phần tử với tag-name được chỉ định.

document.getElementById(String id)

Trả về một đối tượng tham chiếu đến phần tử được định danh bởi id.

document.querySelector(String selector)

Trả về phần tử đầu tiên là phần tử con của phần tử mà nó được gọi ra khớp với nhóm bộ chọn được chỉ định.

document.querySelectorAll(String selector)

Returns a list of all the Element nodes within the document that match the specified selectors.

Phần mở rộng cho tài liệu HTML

Giao diện document cho tài liệu HTML kế thừa từ giao diện HTMLDocument hoặc, kể từ HTML5:

document.close()

Closes a document stream for writing.

document.getElementsByName(String name)

Returns a list of elements with the given name.

document.hasFocus()

Returns true if the focus is currently located anywhere inside the specified document.

document.open()

Mở luồng tài liệu cho việc ghi.

document.write(String text)

Ghi văn bản vào trong tài liệu.

document.writeln(String text)

Ghi một dòng văn bản vào trong một tài liệu.

Tham khảo:

Web APIs: Đối tượng Node

Hàm tạo

Các thuộc tính

Phương thức

Phần mở rộng cho tài liệu HTML

Tham khảo:

Dịch vụ web

Kết nối

Từ khóa

Mẫu web mới

DP Care Service: Mẫu trang web dịch vụ

DP Vegan Restaurant: giao diện nhà hàng thuần chay

Organic Farm: mẫu trang web nông sản hữu cơ xanh/nhà vườn

Thủ thuật

WordPress: tạo dải số phân trang cho danh mục/taxonomy

Xử lý Vấn đề INP: Chẩn đoán và gỡ lỗi

Xử lý Vấn đề INP của các URL trong Google Search Console