DOM 요소에 대한 정확한 CSS 경로를 어떻게 생성할 수 있나요?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-10-25 05:06:29

원래의

603명이 탐색했습니다.

How Can I Generate Precise CSS Paths for DOM Elements?

향상된 정밀도로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!