Home > Web Front-end > CSS Tutorial > How to Generate More Accurate CSS Paths from DOM Elements in JavaScript?

How to Generate More Accurate CSS Paths from DOM Elements in JavaScript?

Mary-Kate Olsen
Release: 2024-10-25 15:09:02
Original
948 people have browsed it

How to Generate More Accurate CSS Paths from DOM Elements in JavaScript?

Creating Accurate CSS Paths from DOM Elements

In JavaScript, constructing CSS paths from DOM elements is a common task. To address this, a popular function, cssPath, exists. However, it often produces paths that lack important details, such as nth-child selectors.

The provided code offers a solution:

<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>
Copy after login

Improvements Over the Original Function:

  • Avoids Premature Exits: The original function stopped when encountering non-element nodes, resulting in incorrect paths. The improved version continues the traversal for improved accuracy.
  • Emphasizes Clarity: By using nth-of-type() selectors instead of the generic :nth-child(), the generated paths become more precise and human-readable.
  • Stops at Ancestor Elements with IDs: The improved function stops when it encounters the first ancestor element with an assigned ID, streamlining the path and enhancing its readability.

The above is the detailed content of How to Generate More Accurate CSS Paths from DOM Elements in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template