js_javascript 기술에서 가장 가까운 공통 조상 요소를 찾기 위한 구현 코드

function test() {
var result;
result = find('i', 'g')
result.id !== 'c' && Alert(' 실패(i, g)');
result = find('g' , 'h')
result.id !== 'a' && Alert('fail (g, h)');
result = find('d', 'e');
result.nodeName.toLowerCase() !== 'html' && Alert('fail (d, e)')
result = find('c', 'b');
result.nodeName.toLowerCase () !== 'html' && Alert('fail (c, b)')

function find() {
var length = 인수 .length,
i = 0,
node, //현재 노드
parent, //부모 노드
counter = 0,
uuid, //DOM의 고유 식별자
hash = {}; //최종 결과 맵

//각 요소에 대해 문서로 위쪽으로 이동합니다
//이 이중 레이어 루프는 불가피합니다
(; i < length; i ) {
//노드 가져오기
node = 인수[i]
if (typeof node == 'string') {
node = document.getElementById(node) ;
}
//위로 이동
while (parent = node.parentElement || node.parentNode) {
//문서에 도달하면 중지하세요. 그렇지 않으면 무한 루프가 됩니다
if (parent.nodeType == 9) {
break;
}
//식별자 가져오기 또는 추가
uuid = parent.getAttribute('data-find')
if (!uuid) {
uuid = '_' (카운터); //크롬 재정렬 해시 방지
parent.setAttribute('data-find', uuid)
}
//증가 count
if (hash[uuid]) {
hash[uuid].count ;
}
else {
hash[uuid] = {노드: 상위, 개수: 1}; 🎜>}
node = parent;
}
}
//해시에는 각 노드가 위쪽으로 통과한 상위 노드만 포함되며 크기가 너무 커서는 안 됩니다
//그래서 이 루프는 상대적으로 빠릅니다.
for (i in hash) {
if (hash[i].count == length) {
return hash[i].node
}
}
};


댓글
테스트에는 문제가 없지만 테스트 케이스가 완벽한지 말하기는 어렵습니다. 네티즌들이 문제를 찾는 데 도움을 주셨으면 좋겠습니다. 100% 괜찮다고 말하는 자신감.
부모 요소를 얻으려면 IE와의 호환성을 위해 parentElement || parentNode를 작성하는 것이 일반적입니다. 이는 IE의 BUG 때문입니다. 요소가 방금 생성되었지만 DOM에 들어가지 않은 경우 해당 parentNode가 존재하지 않습니다. . 그러나 이 함수는 노드가 DOM 트리에 있는지 확인합니다. 실제로 parentElement는 필요하지 않습니다. 그러므로 때로는 습관적으로 호환되는 코드가 반드시 좋은 것은 아닙니다. 현재 환경에 가장 적합한 코드는 좋은 코드입니다.
이중 루프가 불가피하다고는 하지만, 특정 상황에서는 여전히 더 적은 작업을 수행할 수 있는 방법이 있다는 막연한 느낌이 듭니다. 예를 들어 위로 이동하면 특정 요소가 의 공통 조상이 될 수 없다는 것을 알게 됩니다. 모든 요소를 ​​삭제한 다음 더 이상 개수 값을 증가시키지 마세요.
마지막 for..in 루프를 생략할 수 있는 방법이 있나요? 위의 이중 루프에서 실시간으로 항상 가장 적절한 노드를 변수를 통해 저장하는 방법이 있나요?