XML DOM compareDocumentPosition() 메서드

Node 객체

정의와 사용법

compareDocumentPosition() DOM 層次구조(문서) 중 두 노드의 위치를 비교하는 방법을 설명합니다.

문법

nodeObject.compareDocumentPosition(node)

매개변수

매개변수 설명
node 필수. Node 객체. 현재 노드와 비교할 노드를 지정합니다.

기술 세부 사항

DOM 버전： Core Level 3 Node Object
반환 값：

수치는 두 노드의 상대적인 위치를 나타내는 것입니다. 가능한 반환 값은 다음과 같습니다：

  • 1 - 관계가 없으며, 두 노드는 같은 문서에 포함되어 있지 않습니다.
  • 2 - 지정된 노드가 현재 노드 앞에 위치하고 있습니다.
  • 4 - 지정된 노드가 현재 노드 뒤에 따라와 있습니다.
  • 8 - 지정된 노드가 현재 노드를 포함하고 있습니다.
  • 16 - 지정된 노드가 현재 노드에 포함되어 있습니다.
  • 32 - 지정된 노드와 현재 노드는 공통된 컨테이너 노드가 없거나, 두 노드가 같은 노드의 다른 속성일 수 있습니다.

주의:반환 값도 값의 조합일 수 있습니다. 예를 들어, 반환 값 20은 지정된 노드가 현재 노드(16)에 포함되어 있으며, 지정된 노드가 현재 노드(4) 뒤에 따라와 있다는 의미입니다.

예제

아래 코드는 "books.xml"을 xmlDoc에 로드하고, DOM 계층 구조 중 두 노드(첫 번째와 세 번째 <book> 요소)의 위치를 비교합니다：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
       myFunction(this);
   }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName('book')[0];
    var y = xmlDoc.getElementsByTagName('book')[2];
    document.getElementById("demo").innerHTML =
    x.compareDocumentPosition(y);
}

자신이 직접 시도해보세요

대부분의 브라우저는 공백이나 새 줄을 텍스트 노드로 간주하지만, IE 9 이전 버전은 그렇지 않습니다. 따라서 위의 예제에서 대부분의 브라우저는 4를 출력하며, IE 9 이전 버전은 2를 출력합니다.

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원

모든 주요 브라우저는 compareDocumentPosition() 메서드를 지원합니다.

주석:Internet Explorer 9 및 이전 버전은 이 메서드를 지원하지 않습니다.

Node 객체