javascript 비교 문서 위치_javascript 기술

1. DOMElement.contains(DOMNode)

이 메서드는 IE에서 DOM 노드가 다른 DOM 요소에 포함되어 있는지 확인하는 데 처음 사용되었습니다.

이 방법은 CSS 선택기 순회(예: "#id1 #id2")를 최적화하려고 할 때 유용합니다. getElementById를 통해 요소를 가져온 다음 .contains()를 사용하여 #id1에 실제로 #id2가 포함되어 있는지 확인할 수 있습니다.

참고: DOM 노드와 DOM 요소가 일치하는 경우 요소가 자신을 포함할 수 없더라도 .contains()는 true 를 반환합니다.

다음은 Internet Explorer, Firefox, Opera 및 Safari에서 실행할 수 있는 간단한 실행 래퍼입니다.


function contain(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(arg) & 16);
}
2. NodeA.compareDocumentPosition(NodeB)

이 메서드는 DOM 레벨 3 사양의 일부로, 두 DOM 노드 간의 상호 위치를 결정할 수 있습니다. 이 방법은 .contains()보다 더 강력합니다. 이 방법을 적용할 수 있는 한 가지 방법은 DOM 노드를 구체적이고 정확한 순서로 정렬하는 것입니다.

이 방법을 사용하면 요소의 위치에 대한 일련의 정보를 확인할 수 있습니다. 이 모든 정보는 비트 코드(비트, 이진 비트라고도 함)를 반환합니다.

이들에 대해서는 알려진 바가 거의 없습니다. 비트 코드는 여러 데이터를 단순 숫자(역자 주: 0 또는 1)로 저장합니다. 개별 숫자를 열거나 닫으면(번역자 주: 열림/닫기는 0/1에 해당함) 최종 결과를 얻을 수 있습니다.

다음은 얻을 수 있는 정보가 포함된 NodeA.compareDocumentPosition(NodeB)에서 반환된 결과입니다.

비트 번호 의미
000000 0 요소가 일치함
000001 1 노드가 다른 문서에 있음(또는 하나가 문서 외부에 있음)
000010 2 노드 B가 노드 A 앞에 있음
000100 4 노드 A가 노드 B보다 선행합니다.
001000 8 노드 B에 노드 A가 포함됩니다.
010000 16 노드 A에 노드 B가 포함됩니다.
100000 32 브라우저의 개인 사용

이제 가능하다는 뜻입니다. 결과는 다음과 같습니다. 유사:





노드 A가 다른 노드 B를 포함하고 B(16)를 포함하며 B(4) 앞에 오면 최종 결과는 숫자 20이 됩니다. 비트에 무슨 일이 일어나는지 살펴보면 이해가 높아질 것입니다.

000100 (4) 010000 (16) = 010100 (20)

이것은 의심할 여지없이 가장 혼란스러운 단일 DOM API 방법을 이해하는 데 도움이 됩니다. 물론 그의 가치는 충분히 그럴 만하다.

DOMNode.compareDocumentPosition을 이제 Firefox와 Opera에서 사용할 수 있습니다. 그러나 IE에서 이를 구현하는 데 사용할 수 있는 몇 가지 트릭이 있습니다.


// 위치 비교 - MIT 라이선스, John Resig
function ComparePosition(a, b){
return a.compareDocumentPosition ?
a.compareDocumentPosition(b) :
a.contains ?
( a != b && a.contains(b) && 16 )
( a != b && b.contains(a) && 8 )
( a.sourceIndex >= 0 && b.sourceIndex >= 0 ? (a.sourceIndex (a.sourceIndex > b.sourceIndex && 2) :
1) : 🎜> 0; >}
IE는 우리가 사용할 수 있는 몇 가지 메서드와 속성을 제공합니다. 시작하려면 .contains() 메서드(앞서 설명한 대로)를 사용하여 포함(16) 또는 포함됨(8)의 결과를 제공합니다. IE에는 문서의 요소 위치에 해당하는 모든 DOM 요소에 대한 .sourceIndex 속성도 있습니다(예: document.documentElement.sourceIndex == 0). 이 정보가 있으므로 앞(2)과 뒤(4)의 두 가지 CompareDocumentPosition 퍼즐을 완성할 수 있습니다. 또한 요소가 현재 문서에 없으면 .sourceIndex는 -1과 같으며 이는 또 다른 대답(1)을 제공합니다. 마지막으로, 이 프로세스를 추정함으로써 요소가 그 자체와 동일한 경우 빈 비트코드(0)가 반환된다는 것을 확인할 수 있습니다.

해당 기능은 Internet Explorer, Firefox, Opera에서 실행 가능합니다. 하지만 Safari에서는 기능이 불완전합니다(contains() 메서드만 있고 .sourceIndex 속성이 없기 때문입니다. Contains (16), Contained (8)만 얻을 수 있고 다른 모든 결과는 연결 해제를 나타내는 (1)을 반환합니다) .

PPK는 getElementsByTagNames 메소드를 생성하여 새로운 기능을 제공하는 훌륭한 예를 제공합니다.이를 새로운 방법에 적용해 보겠습니다.


//Original by PPK quirksmode.org
function getElementsByTagNames(list, elem) {
elem = elem || document; > var tagNames = list.split(','), results = [];

for ( var i = 0; i       var Tags = elem.getElementsByTagName( tagNames[i] );
for ( var j = 0; j results.push( 태그[j] )                                               > 결과를 ​​반환합니다.정렬(함수(a, b){
return 3 - (comparePosition(a, b) & 6); }
이제 사이트 디렉토리를 순차적으로 구성하는 데 사용할 수 있습니다.


getElementsByTagNames("h1, h2, h3");
Firefox와 Opera는 이 방법을 구현하기 위해 몇 가지 조치를 취했지만. 앞으로 더 많은 브라우저가 등장하여 발전하는 데 도움이 되기를 여전히 기대하고 있습니다.