如何確定HTML的任何元素的正確路徑，激活腳本

我有一個問題需要解決。我必須將事件從Google跟蹤代碼管理器發送到我的employeer的應用程序，我的腳本運行良好，但我在描述元素的「路徑」時遇到了問題。例如，它的我的腳本：如何確定HTML的任何元素的正確路徑，激活腳本

document.getElementByClassName("name_of_class").setAttribute("onclick", "myapp('event.name_of_event')");

它做工精細，例如像這樣：

<div class="btn btn-primary btn-md outline"> 
         <a href="http://exampleshop.com/shop/"> 
                 </a> 
        </div>

我的div類的只是複製粘貼的名字給我的腳本的「name_of_class」，其將我的'oneclik'屬性添加到標記中，以便事件發送到我的應用程序。

但在另一個例子中，像這樣：

<div clas="quick-access"> 
      <p class="welcome-msg">Default welcome msg! </p> 
     <div class="shop-access"> 
     <ul class="links"> 
        <li class="first"> 
<a href="http://exampleshop.com/customer/account/" title="My Account">My Account</a></li> 
     </ul> 
    </div>

粘貼任何DIV類的，或LI/UL類，不能 '直接' 我的腳本這個元素（在此我的帳戶URL的href案件）。所以我的問題是，如何確定HTML的任何元素的正確路徑？我試圖像這樣的方法：

document.getElementByTagName("a").getAttribute("My Account") 
document.querySelectorAll (a[href=" my_URL "])[0]

並且沒有依賴關係，因爲一個元素工作一個方法，另一個 - 沒有。是否有任何'通用'的方法來描述在html中運行腳本的位置？我不是程序員，它有點額外的任務，所以謝謝你的理解。

來源

2017-03-15 Marta.Paula

您可以使用瀏覽器的開發工具來查找CSS選擇器。我使用Chrome，我期望其他瀏覽器有類似的東西。

在Chrome中打開開發人員工具。從工具欄中選擇「元素」。開發人員工具欄左上角是帶有小箭頭的圖標。點擊它，然後選擇您需要選擇器的頁面中的元素。這將在顯示源代碼的開發人員面板中突出顯示。右鍵單擊，從上下文菜單中選擇「複製」，從子菜單中選擇「選擇器」。

而不是做自定義JavaScript去你的GTM安裝，創建DOM類型的新變量，將其設置爲接受一個選擇和複製你剛纔檢索到外地的CSS選擇器值。例如。

來源

2017-03-15 09:28:32

感謝您的建議，我將與此嘗試，但可能你給我建議，我應該在哪裏，現在把我的 .onclick =函數（）{myshop（「event.myacount」）}屬性激活它？ –

如何確定HTML的任何元素的正確路徑，激活腳本

回答

相關問題