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>

この改善された関数:

• 非要素ノードの処理: 時期尚早な CSS パスの処理非要素ノードに遭遇した場合にループを終了します。
• ID セレクターを優先します: パス効率を向上させるために ID で祖先を識別します。
• n 番目のタイプを使用します: セレクターの読みやすさと一意性が向上します。

これらの変更を組み込むことで、DOM 要素の階層と位置を正確に表す正確な CSS パスを自信を持って生成できます。

以上がDOM 要素から正確な CSS パスを生成する方法: なぜ :nth-child が重要なのか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。