Get element’s CSS selector (when it doesn’t have an id)

by 
function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

console.log(  fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"

This seems to be what you are asking for, but you may realize that this is not guaranteed to uniquely identify only one element. (For the above example, all the sibling inputs would be matched as well.)

Edit: Changed code to use nth-child instead of CSS classes to properly disambiguate for a single child.

More Related Contents:

  1. Using querySelectorAll to retrieve direct children
  2. Get the DOM path of the clicked
  3. Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
  4. How to generate unique css selector for DOM element?
  5. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  6. Remove element by id
  7. Check if an image is loaded (no errors) with jQuery
  8. Is there a spec that the id of elements should be made global variable?
  9. onKeyPress Vs. onKeyUp and onKeyDown
  10. Javascript/DOM: How to remove all event listeners of a DOM object?
  11. Why is the value of my input always empty if I store it in a variable?
  12. How can I loop through ALL DOM elements on a page?
  13. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  14. What is the “hasClass” function with plain JavaScript?
  15. Is there a DOM event that fires when an HTML select element is closed?
  16. How to use getElementsByClassName in javascript-function? [duplicate]
  17. Setting focus to iframe contents
  18. Get DocType of an HTML as string with Javascript
  19. Does the onchange event propagate?
  20. Change ‘s option and trigger events with JavaScript
  21. Can I apply CSS to the elements within an iframe?
  22. Get CSS path from Dom element
  23. Changing the order of elements
  24. Should I use document.createDocumentFragment or document.createElement
  25. createElement vs. createElementNS
  26. Is it possible to get element’s numerical index in its parent node without looping?
  27. getElementsByClassName() with two classes
  28. What is the difference between `firstChild` and `firstElementChild`?
  29. Can I add arbitrary properties to DOM objects?
  30. Is there any way to find an element in a documentFragment?

Leave a Comment