Document: phương thức moveBefore()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Phương thức moveBefore() của giao diện Document di chuyển một Node đã cho bên trong nút DOM Document dưới dạng phần tử con trực tiếp, trước một nút tham chiếu đã cho.

Cú pháp

moveBefore(movedNode, referenceNode)

Tham số

movedNode: Một Node đại diện cho nút cần di chuyển. Lưu ý rằng đây phải là một nút Element hoặc CharacterData.
referenceNode: Một Node mà movedNode sẽ được di chuyển trước, hoặc null. Nếu giá trị là null, movedNode được chèn vào cuối các nút con của Document.

Ngoại lệ

HierarchyRequestError TypeError

Được ném ra trong bất kỳ trường hợp nào sau đây:

movedNode đã chỉ định không phải là một phần của tài liệu này.
movedNode đã chỉ định không phải là nút Element hoặc CharacterData.
Bạn đang cố di chuyển movedNode trước doctype của tài liệu (được đại diện bởi một đối tượng DocumentType).

NotFoundError TypeError

referenceNode đã chỉ định không phải là con của nút mà bạn đang gọi moveBefore(), tức là nút mà bạn đang cố di chuyển movedNode vào trong.

TypeError TypeError

Đối số thứ hai không được cung cấp.

Phương thức moveBefore() di chuyển một nút đã đến đến một vị trí mới trong DOM. Nó cung cấp chức năng tương tự như phương thức Node.insertBefore(), ngoại trừ việc nó không xóa rồi chèn lại nút. Điều này có nghĩa là trạng thái của nút (sẽ bị đặt lại nếu di chuyển nó bằng insertBefore() và các cơ chế tương tự) được bảo tồn sau khi di chuyển. Điều này bao gồm:

Trạng thái Animation và transition.
Trạng thái tải của <iframe>.
Trạng thái tương tác (ví dụ: :focus và :active).
Trạng thái phần tử Fullscreen.
Trạng thái mở/đóng của popovers.
Trạng thái modal của các phần tử <dialog> (hộp thoại modal sẽ không bị đóng).

Trạng thái phát của các phần tử <video> và <audio> không được bao gồm trong danh sách trên, vì các phần tử này giữ nguyên trạng thái khi bị xóa và chèn lại, bất kể cơ chế được sử dụng.

Khi quan sát các thay đổi đối với DOM bằng cách sử dụng MutationObserver, các nút được di chuyển bằng moveBefore() sẽ được ghi lại với một removed node và một added node.

Phương thức moveBefore() không đặc biệt hữu ích khi được gọi trên nút Document. Có một số cách sử dụng không phải phần tử cho nó, ví dụ bạn có thể sử dụng moveBefore() để di chuyển các nút chú thích xung quanh gốc của Document. Tuy nhiên, bạn có nhiều khả năng tìm thấy cách sử dụng khi gọi nó trên một DocumentFragment hoặc Element riêng lẻ — xem DocumentFragment.moveBefore() và Element.moveBefore().

Ràng buộc của `moveBefore()`

Có một số ràng buộc cần lưu ý khi sử dụng moveBefore():

Nó chỉ hoạt động khi di chuyển một nút trong cùng một tài liệu.
Nó sẽ không hoạt động nếu bạn cố di chuyển một nút không được kết nối với DOM đến một cha đã được kết nối, hoặc ngược lại.

Trong những trường hợp như vậy, moveBefore() sẽ thất bại với ngoại lệ HierarchyRequestError. Nếu các ràng buộc trên là yêu cầu cho trường hợp sử dụng cụ thể của bạn, bạn nên sử dụng Node.insertBefore() thay thế, hoặc sử dụng try...catch để xử lý các lỗi phát sinh từ những trường hợp như vậy.

Ví dụ

Di chuyển nút chú thích bằng `moveBefore()`

Trong bản demo này, chúng tôi trình bày cách sử dụng document.moveBefore() để di chuyển một nút chú thích trong DOM.

HTML

HTML là một mẫu tối thiểu có một chú thích bên trong <body>.

html

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title>Ví dụ document.moveBefore()</title>
  </head>
  <body>
    <!-- Đây là chú thích nên ở cuối tài liệu -->
    <p>Some content</p>
  </body>
</html>

JavaScript

Trong tập lệnh của chúng tôi, chúng tôi duyệt qua tất cả childNodes của phần tử <body>. Khi chúng tôi tìm thấy một nút có giá trị nodeType là 8 (cho biết một nút chú thích), chúng tôi lưu trữ tham chiếu đến nó trong một biến gọi là commentNode. Sau đó chúng tôi gọi document.moveBefore(), chỉ định rằng chúng tôi muốn di chuyển nút chú thích và chỉ định đối số thứ hai là null để chèn chú thích vào cuối các nút con của Document.

let commentNode;

for (node of document.querySelector("body").childNodes) {
  if (node.nodeType === 8) {
    commentNode = node;
  }
}

document.moveBefore(commentNode, null);

Kết quả

Ví dụ được hiển thị trông như sau:

Nếu bạn kiểm tra ví dụ bằng công cụ dành cho nhà phát triển của trình duyệt, bạn sẽ nhận thấy rằng chú thích đã được di chuyển đến cuối tài liệu, sau thẻ đóng </html>.