如何從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選擇器？

回答

相關問題