如何获取点击元素的CSS选择器？

Question

I'm new to javascript and css and I'm trying to develop a chrome extension which when the user clicks on an element of a specific class in the webpage, it automatically clicks also the next 5 elements.

I found that the css selectors of all the elements of that class are identical up to a number, so I tried the following:

for (i = 1; i <= 5; ++i) {
    document.querySelector(
        '#selector_first_part... > div:nth-child('+
        i +
        ') > selector_second_part).click();
}

The code above works fine when I manually set i.

The problem is that I need to extract "i" from the clicked-on element, and in order to do that I thought that I need to get the css selector of the clicked-on element. I tried to inject a script to the source code that adds an eventListener to each element of that class, which sends the ID of the clicked-on element, and using the ID i thought that I could extract the css selector. here is the code:

var actualCode = `

     var elements = document.getElementsByClassName('someClass');

    var onClickFunction = function() {
        var id = this.getAttribute('id');
        alert("This object's ID is " + id);
    };

    for (var i=0; i<elements.length; i++) {
        elements[i].addEventListener('click', onClickFunction, false);
    }   

`;

var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();

When running this code the alert says "This object's ID is null", meaning that I can't get the css selector using the ID, because it seems that the elements have no ID.

So my question is: how could I click (with JS) the surrounding elements of the clicked-on element?

Thanks!

Answer 1

I think you should replace your script manipulation with that:

window.addEventListener('DOMContentLoaded', function(){
    // put your actualCode here
});

Look at this ressource in detail (on Mozilla Developper Network, the official documentation):

https://developer.mozilla.org/fr/docs/Web/Events/DOMContentLoaded

---

I think you did not understand the purpose of an 'id' in the HTML context so discover it (MDN is always a good resource ;) ):

https://www.google.com/search?q=id+mdn

Answer 2

1st of all, placing your code into a DOM load event like @eytienne already mentioned is used to make sure the page is loaded before attaching your event. 2nd: you should not need to attach several handler, just one click handler on document- then use the target to get the actual element that was clicked, eg

const handler = function(e) {
  const elem = e.target;
}
document.addEventListener('click', handler, false);

3rd: you don't need an id, just compare all elements, eg (in your handler):

const target = e.target;
for (let i=0,elems=document.querySelectorAll(..);i<elems.length;i++) {
if(elems[i] === target) {
 ... do something ...
}

I did not test the code.. just to give you an idea. I hope this will help you!