JavaScript

[DOM_Element] JS - compareDocumentPosition() 메서드 - 노드간 위치비교 (IE9 이상)

compareDocumentPosition() 예제

 

<p id="p1">홈짱닷컴</p>

<p id="p2">Homzzang.com</p>


<button onclick="homzzang()">클릭</button>

<p id="demo"></p>


<script>

function homzzang() {

  var p1 = document.getElementById("p1").lastChild;

  var p2 = document.getElementById("p2").lastChild;

  var x = p1.compareDocumentPosition(p2);

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기

결과값: 4 (※ P1이 P2 앞 위치 의미)

 

compareDocumentPosition() 정의

 

두 노드의 문서 상 위치 비교 후, 위치 표시 정수 반환

 


 

1.

IE9 이상 주요 최신 브라우저 지원

 

2.

DOM 버전: Core Level 1 Node Object

 

 

compareDocumentPosition() 구문

 

node1.compareDocumentPosition(node2)

 


 

[매개변수]

 

node2

필수. 현재 노드(node1)와 비교할 노드 객체.

 


 

[반환값]

 

 1 : 무관함. 두 노드가 같은 문서에 안 속함.

 2 : 제 1노드 (p1)는 제 2노드 (p2) 뒤에 위치.

 4 : 제 1노드 (p1)는 제 2노드 (p2) 앞에 위치.

 8 : 제 1노드 (p1)는 제 2노드 (p2) 안에 위치.

16 : 제 2노드 (p2)는 제 1노드 (p1) 안에 위치.

32 : 관계가 없거나 두 노드가 동일한 요소의 두 속성임.


참고 : 

반환값은 값의 조합일 수도 있음. 

20 : p2가 p1안에 있고 (16), p1이 p2 앞에 위치 (4).

 

 


분류 제목
Conversion JS - [ ] 타입변환 - (숫자: 0 , 문자열: "" , 참거짓: true)
Conversion JS - [20] 타입변환 - (숫자: 20 , 문자열: "20" , 참거짓: true)
Conversion JS - [10,20] 타입변환 - (숫자: NaN , 문자열: "10,20" , 참거짓: true)
Conversion JS - ["twenty"] 타입변환 - (숫자: NaN , 문자열: "twenty" , 참거짓: true)
Conversion JS - ["ten","twenty"] 타입변환 - (숫자: NaN , 문자열: "ten,twenty" , …
Conversion JS - function(){} 타입변환 - (숫자: NaN , 문자열: "function(){}" , 참…
Conversion JS - { } 타입변환 - (숫자: NaN , 문자열: "[object Object]" , 참거짓: tru…
Conversion JS - null 타입변환 - (숫자: 0 , 문자열: "null" , 참거짓: false)
Conversion JS - undefined 타입변환 - (숫자: NaN , 문자열: "undefined" , 참거짓: fal…
DOM_Attribute JS - Attribute Object -
DOM_Attribute JS - attribute.isId 속성 - 속성이 아이디유형인지 반환. (모든 브라우저 지원X)
DOM_Attribute JS - attr.name -
DOM_Attribute JS - attr.value - 요소 속성값 반환/설정 (= value속성 = 밸류속성)
DOM_Attribute JS - attr.specified -
DOM_Attribute JS - nodemap.getNamedItem() 메서드 -
26/89
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인