เมธอด HTML DOM compareDocumentPosition()

เมธอด HTML DOM compareDocumentPosition() ใช้สำหรับเปรียบเทียบตำแหน่งของโหนดที่กำหนดกับโหนดอื่นใดในเอกสารใดๆ ประเภทการคืนค่าของเมธอดนี้เป็น integer เพื่ออธิบายตำแหน่งของพวกเขาในเอกสาร ค่าจำนวนเต็มที่คืนค่ามีดังนี้ -

1: ไม่มีความสัมพันธ์ โหนดทั้งสองไม่ได้อยู่ในเอกสารเดียวกัน
2: โหนดแรก (para1) อยู่หลังโหนดที่สอง (para2)
4: โหนดแรก (para1) อยู่ก่อนโหนดที่สอง (para2)
8: โหนดแรก (para1) อยู่ภายในโหนดที่สอง (para2)
16: โหนดที่สอง (para2) อยู่ภายในโหนดแรก (para1)
32: ไม่มีความสัมพันธ์ หรือโหนดทั้งสองเป็นแอตทริบิวต์สองตัวบนองค์ประกอบเดียวกัน

ไวยากรณ์

ไวยากรณ์สำหรับเมธอด HTML DOM compareDocumentPosition() ดังนี้ -

node.compareDocumentPosition(node)

ที่นี่ node เป็นประเภท node object และระบุโหนดที่เราต้องการเปรียบเทียบกับโหนดปัจจุบัน

ตัวอย่าง

ลองดูตัวอย่างสำหรับเมธอด compareDocumentPosition() -

<!DOCTYPE html> <html> <body> <p id="para1">This is a paragraph</p> <p id="para2">This is another paragraph</p> <p>คลิกปุ่มเพื่อเปรียบเทียบตำแหน่งของสองย่อหน้า</p> <button onclick="docPosition()">POSITION</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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมื่อคลิกปุ่ม POSITION -

ในตัวอย่างข้างต้น -

เราสร้างองค์ประกอบ <p> สองตัวที่มี id "para1" และ "para2" -

<p id="para1">This is a paragraph</p> <p id="para2">This is another paragraph</p>

เราสร้างปุ่ม POSITION ที่จะเรียกใช้เมธอด docPosition() เมื่อถูกคลิกโดยผู้ใช้ -

<button onclick="docPosition()">POSITION</button>

เมธอด docPosition() ดึงทั้งสององค์ประกอบ <p> โดยใช้เมธอด getElementById() บนอ็อบเจกต์เอกสาร จากนั้นกำหนดค่าคุณสมบัติ lastChild ของทั้งสองย่อหน้าให้ตัวแปร p1 และ p2 ตามลำดับ

เราจึงเรียกเมธอด compareDocumentPosition() บน p2 ด้วย p1 เป็นพารามิเตอร์ หมายความว่าเราต้องการเปรียบเทียบตำแหน่งของ p2 เทียบกับ p1 เนื่องจากที่นี่ p2 อยู่หลัง p1 ดังนั้นค่าที่คืนค่าคือ 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; }