HTML 노드_자바스크립트 기술 사이에 관계가 있는지 확인하기 위한 포함 및 비교DocumentPosition 메소드

그 이후로 나는 이러한 방법에 대해 많은 연구를 해왔고 여러 번 사용해 왔습니다. 이는 많은 작업(특히 구조에 관한 추상 DOM 선택기)에서 매우 유용한 것으로 입증되었습니다.
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는
001000 이전의 노드 B에 있습니다. 8 노드 B는 노드 A를 포함합니다.
010000 16 노드 A는 노드 B를 포함합니다.
100000 32 브라우저의 비공개 사용

이제 이는 가능한 결과를 의미합니다.

코드 복사 코드는 다음과 같습니다.

<script> ").compareDocumentPosition(document.getElementById("b")) == 20); <br></script>


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

000100 (4) 010000 (16) = 010100 (20)
이는 의심할 여지없이 가장 혼란스러운 DOM API 방법을 이해하는 데 도움이 됩니다. 물론 그의 가치는 충분히 그럴 만하다.
DOMNode.compareDocumentPosition은 이제 Firefox와 Opera에서 사용할 수 있습니다. 그러나 IE에서 이를 실행하는 데 사용할 수 있는 몇 가지 트릭이 있습니다.

코드 복사 코드는 다음과 같습니다.

// 위치 비교 - MIT Licensed, 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 < b .sourceIndex && 4 )
(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 속성이 없기 때문입니다. 포함(16), 포함(8)만 얻을 수 있으며 다른 모든 결과는 연결 해제를 나타내는 (1)을 반환합니다) ).
PPK는 getElementsByTagNames 메소드를 생성하여 새로운 기능을 제공하는 훌륭한 예를 제공합니다. 새로운 방법에 적용해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

/ / 원본: PPK quirksmode.org
function getElementsByTagNames(list, elem) {
elem = elem || document;
var tagNames = list.split(','), results = []; 🎜 >for ( var i = 0; i < tagNames.length; i ) {
var Tags = elem.getElementsByTagName( tagNames[i] )
for ( var j = 0; j < 태그. length ; j )
results.push( 태그[j] )
}
return results.sort(function(a, b){
return 3 - (comparePosition(a, b) & 6 );
})
}

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