Phương thức HTML DOM compareDocumentPosition()

Phương thức HTML DOM compareDocumentPosition() được dùng để so sánh vị trí của một nút cho trước với bất kỳ nút nào khác trong bất kỳ tài liệu nào. Kiểu trả về của phương thức này là kiểu integer để mô tả vị trí của chúng trong tài liệu. Các giá trị trả về integer được chỉ định như sau:

1: Không có mối quan hệ, hai nút không thuộc cùng một tài liệu. 2: Nút đầu tiên (para1) được đặt sau nút thứ hai (para2). 4: Nút đầu tiên (para1) được đặt trước nút thứ hai (para2). 8: Nút đầu tiên (para1) được đặt bên trong nút thứ hai (para2). 16: Nút thứ hai (para2) được đặt bên trong nút đầu tiên (para1). 32: Không có mối quan hệ, hoặc hai nút là hai thuộc tính trên cùng một phần tử.

Cú pháp

Cú pháp sau đây dùng cho phương thức HTML DOM compareDocumentPosition():

node.compareDocumentPosition(node)

Ở đây, node thuộc kiểu đối tượng node và chỉ định nút mà chúng ta muốn so sánh với nút hiện tại.

Ví dụ

Hãy xem một ví dụ cho phương thức compareDocumentPosition():

<!DOCTYPE html> <html> <body> <p id="para1">Đây là một đoạn văn</p> <p id="para2">Đây là một đoạn văn khác</p> <p>Nhấn nút để so sánh vị trí của hai đoạn văn.</p> <button onclick="docPosition()">VỊ TRÍ</button> <p id="Sample"></p> <script> function docPosition() { var p1 = document.getElementById("para1").lastChild; var p2 = document.getElementById("para2").lastChild; var x = p2.compareDocumentPosition(p1); document.getElementById("Sample").innerHTML = x; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút VỊ TRÍ:

Trong ví dụ trên:

Chúng ta đã tạo hai phần tử <p> với id "para1" và "para2".

<p id="para1">Đây là một đoạn văn</p> <p id="para2">Đây là một đoạn văn khác</p>

Chúng ta đã tạo nút VỊ TRÍ sẽ thực thi phương thức docPosition() khi được nhấp bởi người dùng:

<button onclick="docPosition()">VỊ TRÍ</button>

Phương thức docPosition() lấy cả hai phần tử <p> bằng phương thức getElementById() trên đối tượng document. Sau đó nó gán giá trị thuộc tính lastchild của cả hai đoạn văn cho biến p1 và p2 tương ứng.

Chúng ta sau đó gọi phương thức compareDocumentPosition() trên p2 với p1 làm tham số. Điều này có nghĩa là chúng ta muốn so sánh vị trí của p2 liên quan đến p1. Vì ở đây p2 được đặt sau p1, nên giá trị trả về là 2:

function docPosition() { var p1 = document.getElementById("para1").lastChild; var p2 = document.getElementById("para2").lastChild; var x = p2.compareDocumentPosition(p1); document.getElementById("Sample").innerHTML = x; }