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 セレクターが保証されます。
Nth-of-Type セレクター: nth-of-type セレクターを利用することで、関数は兄弟間の要素の位置を識別し、より適切な CSS セレクターを提供します。特異性と可読性。
すべての要素ノードに適しています: この関数はすべての要素ノード (テキストノードを除く) を正しく処理し、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 中国語 Web サイトの他の関連記事を参照してください。