DOM 요소에서 정확한 CSS 경로를 생성하는 방법: nth-child가 중요한 이유는 무엇입니까?

DOM 요소에서 정확한 CSS 경로를 생성하는 방법

DOM 요소에서 CSS 경로를 검색하는 기능을 제공하셨습니다. 요소의 계층 구조를 효과적으로 캡처하지만 고유 식별에 필요한 정밀도가 부족합니다.

문제

함수가 반환하는 123번째 앵커 요소에 대한 CSS 경로는 다음과 같습니다.

html > body > div#div-id > div.site > div.clearfix > ul.choices > li

그러나 요소를 완전히 식별하려면 :nth-child 선택기를 포함해야 합니다:

html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)

해결책

정확한 CSS 경로를 도출하려면 함수에서 다음과 같은 향상된 기능을 구현하세요.

<code class="javascript">var cssPath = function(el) {
    if (!(el instanceof Element)) 
        return;
    var path = [];
    while (el.nodeType === Node.ELEMENT_NODE) {
        var selector = el.nodeName.toLowerCase();
        if (el.id) {
            selector += '#' + el.id;
            path.unshift(selector);
            break;
        } else {
            var sib = el, nth = 1;
            while (sib = sib.previousElementSibling) {
                if (sib.nodeName.toLowerCase() == selector)
                   nth++;
            }
            if (nth != 1)
                selector += ":nth-of-type("+nth+")";
        }
        path.unshift(selector);
        el = el.parentNode;
    }
    return path.join(" > ");
 };</code>

이 향상된 기능:

• 비요소 노드 처리: 조기 방지 요소가 아닌 노드를 만나면 루프 종료.
• ID 선택기 우선순위 지정: 경로 효율성을 높이기 위해 ID로 상위 항목을 식별합니다.
• n번째 유형 활용: 선택기의 가독성과 고유성을 향상시킵니다.

이러한 수정 사항을 통합하면 DOM 요소의 계층 구조와 위치를 정확하게 나타내는 정확한 CSS 경로를 자신있게 생성할 수 있습니다.

위 내용은 DOM 요소에서 정확한 CSS 경로를 생성하는 방법: nth-child가 중요한 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!