How to generate unique css selector for DOM element?

by

This function creates a long, but quite practical unique selector, works quickly.

const getCssSelector = (el) => {
  let path = [], parent;
  while (parent = el.parentNode) {
    path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el)+1})`);
    el = parent;
  }
  return `${path.join(' > ')}`.toLowerCase();
};

Example result:

html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > main:nth-child(3) > div:nth-child(2) > p:nth-child(2)

The following code creates a slightly more beautiful and short selector

const getCssSelectorShort = (el) => {
  let path = [], parent;
  while (parent = el.parentNode) {
    let tag = el.tagName, siblings;
    path.unshift(
      el.id ? `#${el.id}` : (
        siblings = parent.children,
        [].filter.call(siblings, sibling => sibling.tagName === tag).length === 1 ? tag :
        `${tag}:nth-child(${1+[].indexOf.call(siblings, el)})`
      )
    );
    el = parent;
  };
  return `${path.join(' > ')}`.toLowerCase();
};

Example result:

html > body > div > div > main > div:nth-child(2) > p:nth-child(2)

More Related Contents:

  1. Using querySelectorAll to retrieve direct children
  2. Get element’s CSS selector (when it doesn’t have an id)
  3. Get the DOM path of the clicked
  4. Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
  5. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  6. How to pass arguments to addEventListener listener function?
  7. Remove all child elements of a DOM node in JavaScript
  8. Check if element is visible in DOM
  9. Dynamically set value of a file input [duplicate]
  10. Why don’t we just use element IDs as identifiers in JavaScript?
  11. What is the difference between children and childNodes in JavaScript?
  12. How to append text to a “?
  13. Difference between “change” and “input” event for an `input` element
  14. Setting innerHTML vs. setting value with Javascript
  15. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  16. How to get nth-child selector to skip hidden divs [duplicate]
  17. How can I get an object’s absolute position on the page in Javascript? [duplicate]
  18. How do you listen / detect changes to an input value – when the input value is changed via javascript?
  19. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  20. Why does document.body.offsetHeight + document.body.bottomMargin not equal document.documentElement.offsetHeight
  21. javascript to create a button with onclick
  22. Get element node at caret position (in contentEditable)
  23. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  24. Convert String to XML Document in JavaScript
  25. Is there a way to get innerText of only the top element (and ignore the child element’s innerText)?
  26. IE support for DOM importNode
  27. Can I add arbitrary properties to DOM objects?
  28. Is there any way to find an element in a documentFragment?
  29. In JavaScript, how can I replace text in an HTML page without affecting the tags?
  30. How do I manipulate the SVG DOM and create elements?

Leave a Comment