如何從 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 路徑，精確表示 DOM 元素的層次結構和位置。
以上是如何從 DOM 元素產生準確的 CSS 路徑：為什麼 :nth-child 很重要？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
