Get CSS Selector/Path of HTML elements

Question

I filtered the HTML class elements using

elements = document.querySelectorAll("div._3arMG")

Now that I have a list of HTML elements I need, I want the CSS Selector/Path for each HTML element in the elements list.

CSS Selector when I right click on HTML ELement in Console -> Copy -> Copy Selector -> #root > div._3arMG

Please suggest how do I get this CSS Selector using Javascript?

hgb123 · Accepted Answer · 2020-08-29 11:23:19Z

2

You could use either Element.querySelector() or Element.querySelectorAll(), choose which suits your case

const elements = document.querySelectorAll("div._3arMG")

for (const element of elements){
  const subElements = element.querySelectorAll('.someclass')
  // or
  const subElement = element.querySelector('.someclass')
  
  // ... 
}

Reference

Element.querySelector()

Element.querySelectorAll()

answered Aug 29, 2020 at 11:23

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sai Avinash Duddupudi Over a year ago

by .someClass , do you mean unique id/class for each HTML element in elements?

hgb123 Over a year ago

@SaiAvinashDuddupudi it queries all descendant elements which the selectors your defined, .someclass here is just example. If each descendant element has their own id, you could not need to query like this, in that case just use ` document.getElementById()` though. Correct me if I misunderstand what you said

Sai Avinash Duddupudi Over a year ago

Element.queryseelctor() doesnt return seelctor. did not get what you said

Sascha A. · Accepted Answer · 2020-08-29 12:29:40Z

0

You can do it recursivly with parentElement for the next node above. Getting for every node the tagname by nodeName, the classes with classList and the id.

Edited: Because Id's are unique I stop if an id occurs in the path.

let elements = document.querySelectorAll("div._3arMG");

let result = [];
elements.forEach(el => {
    result.push(getPath(el));
})
console.log(result);

function getPath(el) {
    let act = el.nodeName;
    el.classList.forEach(cl => act += '.' + cl);
    if (el.id) act += '#' + el.id;
        
    if (!el.id && el.parentElement) {
        let res = getPath(el.parentElement);
        res.push(act);
        return res;
    } else {
        return [act];
    }
}

<div class='Wrapper'>
  <div class="_3arMG myClass">
    Test
  </div>
  <table id='myTable'>
    <tr>
      <td>
        <div class="_3arMG">My span</div>
      </td>
    </tr>
  </table>
</div>

edited Aug 29, 2020 at 12:29

answered Aug 29, 2020 at 12:09

Sascha A.

4,6463 gold badges17 silver badges34 bronze badges

4 Comments

fdomn-m Over a year ago

As IDs should be unique, you could (possibly) stop when it hits an element with an id.

Sascha A. Over a year ago

@freedomn-m - I suggested this too, but the OP shows us -> Copy -> Copy Selector -> #root > div._3arMG where the id rootis in path so I build it complete.

fdomn-m Over a year ago

"Copy -> Copy Selector" are the actions made in the browser :) (not saying it's wrong to include the entire tree - bit hard to see what OP wants and why)

Sascha A. Over a year ago

@freedomn-m - I changed itnow, after I see that this is really not part of the path ;)

Collectives™ on Stack Overflow

Get CSS Selector/Path of HTML elements

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related