如何為 DOM 元素產生精確的 CSS 路徑？-css教學-PHP中文網

如何為 DOM 元素產生精確的 CSS 路徑？

Susan Sarandon

發布： 2024-10-25 05:06:29

原創

560 人瀏覽過

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中文網其他相關文章！