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

Question

我有一个问题要解决。我必须从 Google 标签管理器发送事件到我的雇员的应用程序，我的脚本工作正常，但我在向我的元素描述 'path' 时遇到问题。例如，它是我的脚本：

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 class 的名称复制粘贴到我的脚本的 '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 class 或 li/ul class，不能 'direct' 我的脚本到此元素（MyAccount URL href在这种情况下）。所以我的问题是，如何确定 html 的任何元素的正确路径？我正在尝试以下方法：

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

并且没有依赖性，因为一个元素适用于一种方法，而对于另一种方法则不行。是否有任何 'universal' 方法来描述 html 运行我的脚本中的位置？我不是程序员，这是一种额外的任务，所以谢谢你的理解。

Answer 1

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

打开 Chrome 中的开发者工具。从工具栏 select "Elements"。开发人员工具栏的左上角是一个带有小箭头的图标。单击它，然后 select 页面中您需要 select 或 for 的元素。这现在将在显示源代码的开发人员面板中突出显示。右键单击，从上下文菜单中单击 select "copy"，然后从子菜单中单击 "selector"。

与其自定义 javascript，不如转到您的 GTM 安装，创建一个 DOM 类型的新变量，将其设置为接受 selector 并复制您拥有的值刚刚检索到的字段为 css select 或者。例如

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

How to determine correct path to any element of html, to activate script

html

javascript

google-tag-manager