compareDocumentPosition 메서드

발생일: 2011.11.07

문제:
라이브러리 없이 각 노드의 관계를 비교하려고 하다보니 compareDocumentPosition() 이라는 메서드가 있더라.
비슷하게 contains()가 있다는 건 알고 있었는데, compareDocumentPosition()은 첨 들어본다.

자세히 알아보자.

해결책:
compareDocumentPosition() 메서드는 W3C DOM Level 3 Core 스펙에 정의되어 있다.
현재 노드와 파라미터로 전달되는 노드와의 관계를 비교해, 비트마스크 연산을 통한 정수값을 리턴한다.

node.compareDocumentPosition(otherNode) 와 같이 호출할 수 있으며,
각 노드의 관계에 따라 아래 값을 리턴한다.


비트         값       관계
000000     0        동일한 노드이다.
000001     1        서로 다른 도큐먼트에 존재하는 노드이다.
000010     2        node가 otherNode 보다 앞에 존재한다.
000100     4        node가 otherNode 보다 뒤에 존재한다.
001000     8        node가 otherNode의 부모이다. (포함한다)
010000    16        node가 otherNode의 자식이다. (포함된다)

두 노드의 관계에 따라 더해진(mask on 연산) 값을 리턴한다.


예를 들어, 아래와 같은 노드가 있다고 가정하고,
   <div id="a"><div id="b"></div></div>

아래 메서드를 호출하면,
  nodeA.compareDocumentPosition(nodeB); // 10을 리턴한다.

각 노드의 관계로 10을 리턴한다.

(nodeA는 nodeB의 부모이므로 8,
nodeA는 nodeB보다 앞에 존재하는 노드이므로 2가 더해져 10을 리턴한다.)

node.compareDocumentPosition()는 현재 IE9~, Chrome, FF, Safari, Opera에 구현되어 있다.
(http://www.quirksmode.org/dom/w3c_core.html#t120)



참고로,
compareDocumentPosition()의 값이 10을 리턴하는 경우는 node.contains() 메서드와 동일하다고 볼 수 있다.


#. 참고
  compareDocumentPosition API by MDN
  Comparing Document Position by John Resig 
  FF에서 contains() 구현하기 by quirksmode
  W3C DOM Level 3 Spec : compareDocumentPosition