如何獲取具有更改ID的元素

Question

我正在嘗試制作腳本，並且需要獲取網頁上的元素。 我檢查頁面並在chrome的幫助下選擇元素，然后復制該元素的CSS代碼，結果是：

<a id="4edd60cf-0462-4b8b-9b60-1d41911f3309" href="javascript:void(0);">Join now.</a>

問題是當我清除所有緩存和cookie時，元素的id會更改。

還有其他方法可以解決嗎？

我嘗試使用Chrome的“復制選擇器”功能，但無法正常工作

Answer 1

如果沒有要使用的屬性，則可以使用元素的文本。

 const link = [...document.querySelectorAll('a')].find(e => e.text === 'Join now.') if(link) link.style.color = 'green' // do something with the found link. 

 <a id="4edd60cf-0462-4b8b-9b60-1d41911f3309" href="javascript:void(0);">Join now.</a> 

Answer 2

如果您很高興可以使用文本內容來獲取元素，則可以使用xPath。 這是一個基本的JavaScript示例，帶有一個按鈕來演示...

  // xPath of element you want to find var xpath = "//a[contains(text(),'Join now')]"; var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; // Button code for demonstration purposes document.getElementById("test").onclick = function () { alert(matchingElement.id); }; 

  <a id="not-this" href="javascript:void(0);">Don't join.</a> <a id="4edd60cf-0462-4b8b-9b60-1d41911f3309" href="javascript:void(0);">Join now.</a> <a id="not-this" href="javascript:void(0);">Now join.</a> <br><br> <button id="test">Get the ID</button>