현재 요소가 상위 요소_javascript 기술의 하위 요소를 효율적으로 가져옵니다.

예를 들어, 이벤트를 처리할 때 현재 어떤 자식 노드가 클릭되었는지 알아야 하는 경우가 있는데, HTML DOM 자체에서는 해당 속성을 직접 제공하지 않으므로 직접 계산해야 합니다.

인덱스 번호에서 해당 인덱스에 해당하는 하위 노드나 하위 요소를 가져오는 것은 쉽습니다. parentNode.childNodes[index] 또는 parentNode.children[index]를 직접 사용하면 됩니다.

그러나 반대로 노드나 요소 개체를 아는 것은 해당 인덱스 번호를 아는 것이 그리 간단하지 않습니다.

일부 특수 요소의 경우 HTML DOM에는 인덱스 번호(주로 테이블의 TD 및 TR 요소)를 나타내는 해당 속성이 있습니다.

테이블 셀 TD 요소에는 cellIndex 속성이 있습니다.

테이블 행 TR 요소에는 rowIndex 속성이 있습니다.

처리 대상이 테이블인 경우 먼저 이 두 속성을 사용하세요.

그러나 일반 노드나 요소에는 childNodeIndex나 childElementIndex와 같은 속성이 없습니다.

솔루션은 크게 두 가지 범주로 나뉩니다.

1. 노드의 인덱스 번호를 미리 계산하고 캐시합니다(노드 속성 또는 js 변수에 저장할 수 있음). .

2. 실시간 계산에는 일부 노드를 통과해야 합니다.

적용 시 실제 상황에 따라 위의 두 가지 솔루션 중 하나를 선택할 수 있습니다.

옵션 1이 적용되는 시나리오:

DOM 구조가 변경되지 않고 개별 노드의 인덱스를 자주 가져와야 하는 경우 옵션 1을 사용할 수 있습니다.

이후 읽기가 빠른 것이 장점이지만 초기화에는 오버헤드가 필요하고 DOM 구조 변경 후 다시 초기화해야 한다는 단점이 있습니다.

옵션 2가 적용되는 상황:

DOM 구조가 변경될 수 있고, 개별 노드의 인덱스를 특별히 자주 얻지 못하는 경우 옵션 2를 사용할 수 있습니다.

DOM 구조 변경에 영향을 받지 않고, DOM 구조를 오염시키지 않으며, 초기화 오버헤드가 없다는 장점이 있습니다. 단점은 고주파 통화에는 적합하지 않다는 것입니다.

일반적으로 말하면 옵션 2를 채택하는 것이 더 좋습니다. 일반적으로 DOM 트리의 크기가 상대적으로 제한되어 있고 루프의 한 주기가 전체 성능을 크게 저하시키지 않고 장점이 크기 때문입니다.

IE 브라우저의 경우 좀 더 직접적인 방법이 있습니다.

IE4부터 IE11까지 sourceIndex 속성이 있습니다. 이 속성은 DOM 트리의 요소 순서를 나타냅니다. 요소와 상위 요소의 sourceIndex 차이를 비교하면 어떤 하위 요소인지 쉽게 알 수 있습니다. 요소는 요소입니다.

IE에서는 효율적인 판단을 위해 sourceIndex를 사용하고, IE가 아닌 경우에는 일반 순회를 사용하여 처리를 차별화하는 함수를 작성했습니다.

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

function getChildrenIndex(ele){
//IE가 가장 간단하고 빠릅니다.
if(ele.sourceIndex){
return ele.sourceIndex - ele.parentNode.sourceIndex - 1
}
//다른 브라우저
var i= 0;
while(ele = ele.previousElementSibling){
i ;
}
return i;
}

위 함수는 요소를 계산합니다. nodeType 값이 1인 노드, 텍스트 노드, 주석 노드 등은 계산되지 않습니다. 모든 노드를 계산해야 하는 경우 이 속성은 Element에만 해당되므로 sourceIndex를 사용할 수 없으며, 이에 따라 PreviousElementSibling도 다음 함수로 변경해야 합니다.

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

function getNodeIndex(node){
var i=0
while( ele = ele.previousSibling ){
i; 이 방법의 테스트 성능은 매우 낮습니다. 내부 구현 메커니즘은 리소스 인덱스 번호를 캐시하는 IE와 확실히 다릅니다. 효율성을 높이기 위해 이분법을 사용하지만 아직은 불가능합니다.


최종 요약:

테이블 TD 및 TR 요소의 경우 먼저 cellIndex 및 rowIndex 속성을 사용하세요.

IE의 경우 sourceIndex 속성이 선호됩니다. 다른 경우에는 이전ElementSibling 또는 이전Sibling을 사용하여 순회합니다.

CompareDocumentPosition 메소드의 성능이 매우 낮습니다.