javascript - 如何获取点击元素的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 时，上面的代码工作正常。

问题是我需要从点击的元素中提取“i”，为了做到这一点，我认为我需要获得点击元素的 css 选择器。我试图向源代码中注入(inject)一个脚本，该脚本向该类的每个元素添加一个 eventListener，它发送被单击元素的 ID，并使用我认为我可以提取 css 选择器的 ID。这是代码:

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

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

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 ...
}

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