如何从JS中的事件对象构建一个CSS选择器？

我创建一个点击简单的事件监听器：如何从JS中的事件对象构建一个CSS选择器？

window.addEventListener("click", function (event) { 
    console.log(event); 
});

从我看到的，事件对象包含了很多关于点击的元素的父元素，HTML和CSS数据的有用数据。

有没有办法从这些事件对象建立一个CSS选择器（希望是唯一的）？如果是的话，有没有可以考虑的开源解决方案？

来源

2017-10-18 Andriy Stolyar

*“有一种从这些事件对象中构建CSS选择器（希望是唯一的）的方法？“是的，如果以引用元素（比如'event.target'）开始，您可以为任何元素构建一个唯一的CSS选择器。然而，该选择器不可能是*有用的*。不知道你想用它做什么，我们不能合理地回答这个问题。 –

我想使用eventListenters在我的网站上记录用户操作，然后使用Selenium（浏览器自动化）重播这些操作。我打算使用元素的CSS选择器来查找它们并单击（在Selenium中有一个名为find_element_by_css_selector（）的函数）。 –

您可以将DOM放到顶部并创建一个选择器，如'body div：n-child（44）span：nnth-child（3）'。 – 2017-10-18 14:34:24

是的，由于伪类:nth-child，我们完全可以为DOM中的任何元素构建一个唯一的CSS选择器，这使得我们可以区分具有相同父元素中相同特征的两个元素。

下面是一个简单的示例，它使用标记名称及其相对于其父元素中的其他元素的位置来构建选择器。这个例子建立并显示选择，然后使用它的四分之一秒钟后一个“点击”添加类的元素（这表示它以粗体绿色）：

// Find the index of the given element in its parent 
 
function indexOf(element) { 
 
    var parent = element.parentNode; 
 
    var child, index = 1; 
 
    for (child = parent.firstElementChild; 
 
     child; 
 
     child = child.nextElementSibling) { 
 
     if (child === element) { 
 
      return index; 
 
     } 
 
     ++index; 
 
    } 
 
    return -1; 
 
} 
 
document.addEventListener("click", function(e) { 
 
    // Starting from this element, build a tagname:nth-child(x) selector 
 
    // for it, then prepend one for each of its parents up to BODY 
 
    var element = e.target; 
 
    var selector = element.tagName + ":nth-child(" + indexOf(element) + ")"; 
 
    while ((element = element.parentElement) != null) { 
 
     if (element.tagName === "BODY") { 
 
      selector = "BODY > " + selector; 
 
      break; 
 
     } 
 
     selector = element.tagName + ":nth-child(" + indexOf(element) + ") > " + selector; 
 
    } 
 
    show(selector); 
 
}); 
 
function show(selector) { 
 
    console.log(selector); 
 
    setTimeout(function() { 
 
     document.querySelector(selector).classList.add("clicked"); 
 
    }, 250); 
 
}

#container, #container div { 
 
    border: 1px solid #ddd; 
 
} 
 
.clicked { 
 
    color: green; 
 
    font-weight: bold; 
 
}

<div id="container"> 
 
    <div> 
 
    <span>one</span> 
 
    <span>two</span> 
 
    <span>three</span> 
 
    <span>four</span> 
 
    </div> 
 
    <div> 
 
    <span>one</span> 
 
    <span>two</span> 
 
    <span>three</span> 
 
    <span>four</span> 
 
    </div> 
 
</div>

来源

2017-10-18 14:39:59

如何从JS中的事件对象构建一个CSS选择器？

回答

相关问题