Bagaimana untuk Menjana Laluan CSS yang Lebih Tepat daripada Elemen DOM dalam JavaScript?

Mencipta Laluan CSS Tepat daripada Elemen DOM

Dalam JavaScript, membina laluan CSS daripada elemen DOM ialah tugas biasa. Untuk menangani perkara ini, fungsi popular, cssPath, wujud. Walau bagaimanapun, ia sering menghasilkan laluan yang kekurangan butiran penting, seperti pemilih anak ke-n.

Kod yang disediakan menawarkan penyelesaian:

<code class="js">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>

Penambahbaikan Terhadap Fungsi Asal:

• Mengelakkan Keluar Pramatang: Fungsi asal berhenti apabila menemui nod bukan unsur, mengakibatkan laluan yang salah. Versi yang dipertingkatkan meneruskan traversal untuk ketepatan yang dipertingkatkan.
• Menekankan Kejelasan: Dengan menggunakan pemilih nth-of-type() dan bukannya generik :nth-child(), laluan yang dijana menjadi lebih tepat dan boleh dibaca oleh manusia.
• Berhenti di Elemen Ancestor dengan ID: Fungsi yang dipertingkatkan berhenti apabila ia menemui elemen nenek moyang pertama dengan ID yang ditetapkan, memperkemas laluan dan meningkatkan kebolehbacaannya.

Atas ialah kandungan terperinci Bagaimana untuk Menjana Laluan CSS yang Lebih Tepat daripada Elemen DOM dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!