DOM 요소에 대한 정확한 CSS 경로를 어떻게 생성할 수 있나요?

향상된 정밀도로 DOM 요소에서 CSS 경로 검색

제공된 함수는 지정된 DOM 요소에 대한 CSS 경로를 생성하려고 시도합니다. 그러나 출력의 특이성이 부족하여 형제 내에서 요소의 위치를 ​​캡처하지 못합니다. 이 문제를 해결하려면 보다 정교한 접근 방식이 필요합니다.

향상된 CSS 경로 기능

아래에 제시된 향상된 기능은 원래 제한 사항을 해결합니다.

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(" > ");
}

향상 및 이점:

• ID 기반 최적화: 이 기능은 ID 속성과 일치하는 요소의 우선순위를 지정하고 ID가 발견되면 검색을 중지합니다. . 이는 독특하고 효율적인 CSS 선택기를 보장합니다.
• N번째 유형 선택기: 이 기능은 n번째 유형 선택기를 활용하여 형제 중에서 요소의 위치를 ​​식별하여 더 나은 결과를 제공합니다. 특이성 및 가독성.
• 모든 요소 노드에 적합: 이 함수는 모든 요소 노드(텍스트 노드 제외)를 올바르게 처리하여 DOM 트리 내 위치를 정확하게 캡처합니다.

사용 예:

이 향상된 기능을 활용하면 이제 특정 요소에 대해 보다 정확한 CSS 경로를 얻을 수 있습니다.

console.log(cssPath(document.getElementsByTagName('a')[123]));
// Output: "html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)"

위 내용은 DOM 요소에 대한 정확한 CSS 경로를 어떻게 생성할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!