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

Question

我是javascript和CSS的新手，我正在尝试开发一个chrome扩展程序，当用户单击网页中特定类的元素时，它也会自动单击接下来的5个元素。

我发现该类的所有元素的css选择器在数量上都是相同的，因此我尝试了以下操作：

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

当我手动设置i时，上面的代码工作正常。

问题是我需要从clicked-on元素中提取“ i”，并且为此，我认为我需要获取clicked-on元素的css选择器。 我试图将脚本注入源代码，该脚本向该类的每个元素添加一个eventListener，该事件监听器发送clicked-on元素的ID，并使用该ID我以为我可以提取CSS选择器。 这是代码：

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();

运行此代码时，警报显示“此对象的ID为空”，这意味着我无法使用ID获得CSS选择器，因为似乎元素没有ID。

所以我的问题是：如何单击（使用JS）被单击元素的周围元素？

谢谢！

Answer 1

我认为您应该用以下方式替换脚本操作：

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

详细查看此资源（在Mozilla Developper Network上，官方文档）：

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

---

我认为您不了解HTML上下文中“ id”的目的，因此请发现它（MDN始终是一种很好的资源;））：

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

Answer 2

首先，将代码放入已经提到的@eytienne之类的DOM加载事件中是用来确保在附加事件之前已加载页面。 第二：您不需要附加多个处理程序，只需在文档上单击处理程序即可，然后使用目标获取被单击的实际元素，例如

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

第三：您不需要ID，只需比较所有元素，例如（在您的处理程序中）：

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

我没有测试代码..只是为了给您一个想法。 我希望这能帮到您！