HTML DOM의 compareDocumentPosition() 메서드는 현재 노드와 다른 노드 사이의 위치 관계를 비교할 때 사용됩니다. 이 메서드는 두 노드가 문서 내에서 서로 어떤 상대적 위치에 있는지를 나타내는 정수(integer) 값을 반환하며, 반환되는 값은 다음과 같습니다.
| 반환값 | 의미 |
|---|---|
| 1 | 두 노드 사이에 아무런 관계가 없습니다. 즉, 두 노드가 같은 문서에 속해 있지 않습니다. |
| 2 | 첫 번째 노드(메서드를 호출한 노드)가 두 번째 노드(매개변수로 전달된 노드)보다 뒤에 위치합니다. |
| 4 | 첫 번째 노드가 두 번째 노드보다 앞에 위치합니다. |
| 8 | 첫 번째 노드가 두 번째 노드의 내부에 포함되어 있습니다. |
| 16 | 두 번째 노드가 첫 번째 노드의 내부에 포함되어 있습니다. |
| 32 | 두 노드 사이에 관계가 없거나, 두 노드가 같은 요소의 속성(attribute)인 경우입니다. |
참고로 반환값은 여러 의미가 조합된 비트 마스크(bitmask) 형태일 수 있습니다. 예를 들어 20이 반환되었다면 4(앞에 위치)와 16(내부에 포함)이 동시에 해당한다는 뜻입니다.
구문(Syntax)
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>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> 요소를 생성했습니다.
<p id="para1">This is a paragraph</p> <p id="para2">This is another paragraph</p>
그다음, 사용자가 클릭하면 docPosition() 함수를 실행하는 POSITION 버튼을 만들었습니다.
<button onclick="docPosition()">POSITION</button>
docPosition() 함수는 document 객체의 getElementById() 메서드를 사용해 두 <p> 요소를 가져온 뒤, 각 문단의 lastChild 속성 값을 변수 p1과 p2에 각각 할당합니다.
이후 p2에 대해 compareDocumentPosition() 메서드를 호출하면서 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;
}