DocumentFragment

Constructor

DocumentFragment()

Tạo và trả về một đối tượng DocumentFragment mới.

Thuộc tính thực thể

Giao diện này không có thuộc tính cụ thể nào, nhưng kế thừa những thuộc tính của phần tử cha, Node.

DocumentFragment.childElementCount Read only

Trả về số lượng phần tử con mà DocumentFragment có.

DocumentFragment.children Read only

Trả về một HTMLCollection trực tiếp chứa tất cả các đối tượng kiểu Element là con của đối tượng DocumentFragment.

DocumentFragment.firstElementChild Read only

Trả về Element là phần tử con đầu tiên của đối tượng DocumentFragment, hoặc null nếu không có phần tử nào.

DocumentFragment.lastElementChild Read only

Trả về Element là phần tử con cuối cùng của đối tượng DocumentFragment, hoặc null nếu không có phần tử nào.

Phương thức thực thể

Giao diện này kế thừa các phương thức của phần tử cha, Node.

DocumentFragment.append()

Chèn một tập hợp các đối tượng Node hoặc chuỗi sau phần tử con cuối cùng của phân đoạn tài liệu.

DocumentFragment.prepend()

Chèn một tập hợp các đối tượng Node hoặc chuỗi trước phần tử con đầu tiên của phân đoạn tài liệu.

DocumentFragment.querySelector()

Trả về nút Element đầu tiên trong DocumentFragment, theo thứ tự tài liệu, khớp với các bộ chọn đã chỉ định.

DocumentFragment.querySelectorAll()

Trả về một NodeList của tất cả các nút Element trong DocumentFragment khớp với các bộ chọn đã chỉ định.

DocumentFragment.moveBefore()

Di chuyển một Node đã cho vào trong DocumentFragment gọi phương thức như một phần tử con trực tiếp, trước một nút tham chiếu đã cho, mà không cần xóa rồi chèn lại nút.

DocumentFragment.replaceChildren()

Thay thế các phần tử con hiện có của DocumentFragment bằng một tập hợp phần tử con mới đã chỉ định.

DocumentFragment.getElementById()

Trả về nút Element đầu tiên trong DocumentFragment, theo thứ tự tài liệu, khớp với ID đã chỉ định. Hoạt động tương tự như Document.getElementById().

Ghi chú sử dụng

Cách sử dụng phổ biến cho DocumentFragment là tạo một phân đoạn, lắp ráp một cây con DOM bên trong nó, sau đó nối hoặc chèn phân đoạn vào DOM bằng các phương thức giao diện Node như appendChild(), append(), hoặc insertBefore(). Việc này sẽ di chuyển các nút của phân đoạn vào DOM, để lại một DocumentFragment rỗng.

Giao diện này cũng rất hữu ích với các Web component: các phần tử <template> chứa một DocumentFragment trong thuộc tính HTMLTemplateElement.content của chúng.

Một DocumentFragment rỗng có thể được tạo bằng phương thức document.createDocumentFragment() hoặc constructor.

Hiệu suất

Lợi ích về hiệu suất của DocumentFragment thường bị phóng đại quá mức. Trên thực tế, trong một số công cụ, việc sử dụng DocumentFragment chậm hơn so với việc nối vào tài liệu trong một vòng lặp như đã minh họa trong phép đo hiệu suất này. Tuy nhiên, sự khác biệt giữa các ví dụ này nhỏ đến mức tốt hơn nên tối ưu hóa cho khả năng đọc hơn là hiệu suất.

Ví dụ

HTML

<ul></ul>

JavaScript

const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);

Kết quả

Đặc điểm kỹ thuật

Tương thích trình duyệt