HTML DOM compareDocumentPosition() 메서드는 주어진 노드 위치를 문서의 다른 노드와 비교하는 데 사용됩니다. 이 메서드의 반환 형식은 문서에서 해당 위치를 설명하는 정수 형식입니다. 정수 반환 값은 지정된 대로 −
1: No relationship, the two nodes do not belong to the same document. 2: The first node (para1) is positioned after the second node (para2). 4: The first node (para1) is positioned before the second node (para2). 8: The first node (para1) is positioned inside the second node (para2). 16: The second node (para2) is positioned inside the first node (para1). 32: No relationship, or the two nodes are two attributes on the same element.
구문
다음은 HTML DOM compareDocumentPosition() 메서드의 구문입니다. -
node.compareDocumentPosition(node)
여기서 노드는 노드 객체 유형이며 현재 노드와 비교할 노드를 지정합니다.
예시
compareDocumentPosition() 메서드의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<body>
<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>
<p>Click the button to compare the position of the two paragraphs.</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 버튼 클릭 시 -
위의 예에서 -
먼저 두 개를 만들었습니다.
ID가 "para1" 및 "para2"인 요소.
<p id="para1">This is a paragraph</p> <p id="para2">This is another paragraph</p>
그런 다음 사용자가 클릭하면 docPosition() 메서드를 실행할 버튼 POSTION을 만들었습니다.
<button onclick="docPosition()">POSITION</button>
docPosition() 메서드는 문서 객체의 getElementById() 메서드를 사용하여
요소를 모두 가져옵니다. 그런 다음 두 단락의 lastchild 속성 값을 각각 변수 p1과 p2에 할당합니다.
그런 다음 p1을 매개변수로 사용하여 p2에서 compareDocumentPosition() 메서드를 호출합니다. 이것은 우리가 p1에 대한 p2의 위치를 비교하기를 원한다는 것을 의미합니다. 여기서 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;
}