如何确定html的任何元素的正确路径，以激活脚本

Question

我有一个问题需要解决。我必须将事件从谷歌标签管理器发送到我的雇员的应用程序，我的脚本工作正常，但我有一个问题，描述我的元素的“路径”。 例如，我的脚本：

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类，不能将我的脚本“引导”到此元素（在本例中为MyAccount URL href）。 所以我的问题是，如何确定html的任何元素的正确路径？我正在尝试这样的方法：

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

并且没有依赖关系，因为一个元素为一个方法工作，而另一个元素则不工作。是否有任何“通用”方法，以描述html运行我的脚本的位置？ 我不是程序员，这是一项额外的任务，所以谢谢你的理解。

Answer 1

您可以使用浏览器的开发工具查找CSS选择器。我使用Chrome，我希望其他浏览器也有类似的东西。

在Chrome中打开开发者工具。从工具栏中选择＆＃34; Elements＆＃34;。在开发人员工具栏的左上角是带有小箭头的图标。点击它，然后在页面中选择您需要选择器的元素。现在将在显示源代码的开发人员面板中突出显示。右键单击，选择＆＃34;复制＆＃34;从上下文菜单和＆＃34;选择器＆＃34;来自子菜单。

而不是自定义javascript转到GTM安装，创建DOM类型的新变量，将其设置为接受选择器并将刚刚检索到的值复制到css选择器的字段。 E.g。