javascript get element unique selector

Question

I am moving elements using javascript and I need to create a logic for the combinations happening during the drag/drops

I'm trying to get details from the elements, a CSS like selector could be also good, but dunno if it is possible.. (like copy-selector in chrome dev tools)

document.onmouseup = function(e){
    targetDest = e.target;
    //console.log('targetDest: ', targetDest);

    let 
    indexA = Array.from(targetCurr.parentNode.children).indexOf(targetCurr),
    indexB = Array.from(targetDest.parentNode.children).indexOf(targetDest);

    console.log(indexA, indexB);


    if(targetDest != targetCurr){
        if(targetDest == document.documentElement){
            console.log('document');
        }
        else if(targetDest == undefined){
            console.log('undefined');
        }
        else if(!targetDest){
            console.log('!dest');
        }
        else if(targetDest == null){
            console.log('null');
        }
        else if(targetDest == false){
            console.log('false');
        }
        else{
            console.log('else');
            //targetCurr.parentNode.insertBefore(targetDest, targetCurr);

            //console.log('...');
        }
    }else{
        console.log('itself');
    }


}

What do you mean by `selector`? An element may match any number of selectors if you're referring to DOM queries. eg `*`, or `div` or `div.content` or `div#mainDiv` or `html > body > div#mainDiv.content` could all match the same element. — CollinD, Feb 12 '17 at 04:55
@CollinD like the one used for CSS. In chrome dev tools I can copy this, but not sure how to do it in plain JavaScript — neoDev, Feb 12 '17 at 04:56
You'd need to construct some selector that would meet your needs. Elements don't have a unique magic selector. Consider posting some sample markup and your expected output. That would help potential answerers. — CollinD, Feb 12 '17 at 04:57
You can use [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). In your case: `document.querySelector("div#mainDiv")`. — Spencer Wieczorek, Feb 12 '17 at 04:59
What do you need the selector for? If you're talking about splitting it, I suspect that getting the selector isn't actually your problem, but your (not necessarily optimal) approach to the actual problem you're having... — Frxstrem, Feb 12 '17 at 05:03
Check this: https://blog.davidvassallo.me/2019/09/20/a-javascript-reverse-css-selector/ - https://chromium.googlesource.com/chromium/blink/+/master/Source/devtools/front_end/components/DOMPresentationUtils.js — Marian07, Jan 03 '23 at 16:18

CollinD · Accepted Answer · 2017-02-12T05:21:13.773

17

Keep in mind that this will not necessarily uniquely identify elements. But, you can construct that type of selector by traversing upwards from the node and prepending the element you're at. You could potentially do something like this

var generateQuerySelector = function(el) {
      if (el.tagName.toLowerCase() == "html")
          return "HTML";
      var str = el.tagName;
      str += (el.id != "") ? "#" + el.id : "";
      if (el.className) {
          var classes = el.className.split(/\s/);
          for (var i = 0; i < classes.length; i++) {
              str += "." + classes[i]
          }
      }
      return generateQuerySelector(el.parentNode) + " > " + str;
}

var qStr = generateQuerySelector(document.querySelector("div.moo"));
alert(qStr);

body
<div class="outer">
  div.outer
  <div class="inner" id="foo">
    div#foo.inner
    <div class="moo man">
      div.moo.man
    </div>
  </div>
</div>

I wouldn't suggest using this for much besides presenting the information to a user. Splitting it up and reusing parts are bound to cause problems.

edited Feb 12 '17 at 05:21

answered Feb 12 '17 at 05:09

CollinD

7,304
2
22
45

4

As you mentioned, this approach fails for "look-alike siblings", e.g. ```
...
...
...

mikiqex

Nov 12 '19 at 12:47

@mikiqex could you please post an answer with a code example ? – Mouradif Feb 19 '21 at 02:15

@KiJéy https://stackoverflow.com/a/66291608/1053562 There you go. – mikiqex Feb 21 '21 at 13:17

1

It works fine. However I had to add `.map(c=>c.trim()).filter(c=>c)` after `.split(/\s/)` to avoid getting empty class names. – Marinos An Dec 01 '22 at 18:15

mikiqex · Answer 2 · 2021-03-26T11:52:27.360

My solution using :nth-child:

function getSelector(elm)
{
if (elm.tagName === "BODY") return "BODY";
const names = [];
while (elm.parentElement && elm.tagName !== "BODY") {
    if (elm.id) {
        names.unshift("#" + elm.getAttribute("id")); // getAttribute, because `elm.id` could also return a child element with name "id"
        break; // Because ID should be unique, no more is needed. Remove the break, if you always want a full path.
    } else {
        let c = 1, e = elm;
        for (; e.previousElementSibling; e = e.previousElementSibling, c++) ;
        names.unshift(elm.tagName + ":nth-child(" + c + ")");
    }
    elm = elm.parentElement;
}
return names.join(">");
}

var qStr = getSelector(document.querySelector("div.moo"));
alert(qStr);

body
<div class="outer">
  div.outer
  <div class="inner" id="foo">
    div#foo.inner
    <div class="moo man">
      div.moo.man
    </div>
  </div>
</div>

Please note it won't return the whole path if there's an element with ID in it - every ID should be unique on the page, as valid HTML requires.

I use output of this function in document.querySelector later in the code, because I needed to return focus to the same element after replaceChild of its parent element.

I hope CollinD won't mind I borrowed his markup for the code snippet :-)

Kévin Berthommier · Answer 3 · 2021-06-04T15:51:28.327

I mixed the 2 solutions proposed to have a result readable by humans and which gives the right element if there are several similar siblings:

function elemToSelector(elem) {
  const {
    tagName,
    id,
    className,
    parentNode
  } = elem;

  if (tagName === 'HTML') return 'HTML';

  let str = tagName;

  str += (id !== '') ? `#${id}` : '';

  if (className) {
    const classes = className.split(/\s/);
    for (let i = 0; i < classes.length; i++) {
      str += `.${classes[i]}`;
    }
  }

  let childIndex = 1;

  for (let e = elem; e.previousElementSibling; e = e.previousElementSibling) {
    childIndex += 1;
  }

  str += `:nth-child(${childIndex})`;

  return `${elemToSelector(parentNode)} > ${str}`;
}

Test with:

// Select an element in Elements tab of your navigator Devtools, or replace $0

document.querySelector(elemToSelector($0)) === $0 &&
document.querySelectorAll(elemToSelector($0)).length === 1

Which might give you something like, it's a bit longer but it's readable and it always works:

HTML > BODY:nth-child(2) > DIV.container:nth-child(2) > DIV.row:nth-child(2) > DIV.col-md-4:nth-child(2) > DIV.sidebar:nth-child(1) > DIV.sidebar-wrapper:nth-child(2) > DIV.my-4:nth-child(1) > H4:nth-child(3)

Edit: I just found the package unique-selector

Kevin, I used your function on https://stackoverflow.com/questions/29203312/how-can-i-retain-the-scroll-position-of-a-scrollable-area-when-pressing-back-but/70086321#70086321 to restore the focus, after restoring the scroll position of individual items. — Mykola Uspalenko, Nov 25 '21 at 21:06
Added after tesing: **if(typeof classes[i] === 'string' && classes[i].length > 0)** str += `.${classes[i]}`; — Mykola Uspalenko, Nov 25 '21 at 22:27

Jul · Answer 4 · 2021-12-14T14:30:03.287

Small improvement of the @CollinD answer :

1/ Return value when the selector is unique

2/ Trim classes value (classes with end blanks make errors)

3/ Split multiple spaces between classes

var getSelector = function(el) {
      if (el.tagName.toLowerCase() == "html")
          return "html";
      var str = el.tagName.toLowerCase();
      str += (el.id != "") ? "#" + el.id : "";
      if (el.className) {
          var classes = el.className.trim().split(/\s+/);
          for (var i = 0; i < classes.length; i++) {
              str += "." + classes[i]
          }
      }
      
      if(document.querySelectorAll(str).length==1) return str;
      
      return getSelector(el.parentNode) + " > " + str;
}

George · Answer 5 · 2021-11-30T20:22:14.607

Based on previous solutions, I made a typescript solution with a shorter selector and additional checks.

function elemToSelector(elem: HTMLElement): string {
    const {
        tagName,
        id,
        className,
        parentElement
    } = elem;

    let str = '';

    if (id !== '' && id.match(/^[a-z].*/)) {
        str += `#${id}`;
        return str;
    }

    str = tagName;

    if (className) {
        str += '.' + className.replace(/(^\s)/gm, '').replace(/(\s{2,})/gm, ' ')
            .split(/\s/).join('.');
    }

    const needNthPart = (el: HTMLElement): boolean => {
        let sib = el.previousElementSibling;

        if (!el.className) {
            return true;
        }

        while (sib) {
            if (el.className !== sib.className) {
                return false;
            }

            sib = sib.previousElementSibling;
        }

        return false;
    }

    const getNthPart = (el: HTMLElement): string => {
        let childIndex = 1;

        let sib = el.previousElementSibling;
        while (sib) {
            childIndex++;
            sib = sib.previousElementSibling;
        }

        return `:nth-child(${childIndex})`;
    }

    if (needNthPart(elem)) {
        str += getNthPart(elem);
    }


    if (!parentElement) {
        return str;
    }

    return `${elemToSelector(parentElement)} > ${str}`;
}

score 0 · Answer 6 · answered Jun 23 '23 at 18:48

0

 let css_str= (el) => el.tagName+'.'+(Array.from(el.classList)).join('.');

I was looking for something much simpler for my needs

answered Jun 23 '23 at 18:48

Wren Dsilva

1

javascript get element unique selector

6 Answers6

Linked

Related