从 HTML 结构中的 DIV 树中获取上层元素答案

【问题标题】：Get upper element from DIV tree in HTML Structure从 HTML 结构中的 DIV 树中获取上层元素
【发布时间】：2019-04-03 10:37:21
【问题描述】：

每个小部件都有这样的 HTML 代码：

html code

当我点击 class 时，如何获取 div data-tracker-id (=118DBA90ECB84E7BB9E7C07402F4B4B25CC0CD43818B92F8E0C26CA63C5F543D) 的名称属性，例如，“slick-arrow slick-prev “？使用 CSS-Selector 制作 DOM 元素不起作用。

【问题讨论】：

您的示例代码没有名称属性
以及如何获取这些数据（=118DBA90ECB84E7BB9E7C07402F4B4B25CC0CD43818B92F8E0C26CA63C5F543D）？

标签： javascript html dom google-tag-manager

【解决方案1】：

为此，您需要一个自定义 HTML 标记，您可以在其中编写自己的代码，该代码查找此信息，相对于单击的元素，可以称为 {{Click Element}}，当在内置 -在变量中。

您可以使用 jQuery 来完成，使用 parent() function，它会遍历指定的父元素。例如

var parent = $({{Click Element}}).parent('div[data-tracker-id]');

您还可以使用原生 JavaScript 模拟此功能。一种可能的解决方案：

    //define function
      var gtmGetClosest = function ( elem, selector ) {

        // Element.matches() polyfill
        if (!Element.prototype.matches) {
            Element.prototype.matches =
                Element.prototype.matchesSelector ||
                Element.prototype.mozMatchesSelector ||
                Element.prototype.msMatchesSelector ||
                Element.prototype.oMatchesSelector ||
                Element.prototype.webkitMatchesSelector ||
                function(s) {
                    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                        i = matches.length;
                    while (--i >= 0 && matches.item(i) !== this) {}
                    return i > -1;
                };
        }

        // Get closest match
        for ( ; elem && elem !== document; elem = elem.parentNode ) {
            if ( elem.matches( selector ) ) return elem;
        }

        return null;

      };

    //use it
    var parent = gtmGetClosest({{Click Element}}, 'div[data-tracker-id]');

自定义函数基于this article。

【讨论】：

谢谢！但是如何使用第二个代码（使用 Vanilla JS）？在 GTM 中或如何创建 2 个 JS 变量（gtmGetClosest 和父级）？
有几种解决方案。快速而肮脏的方法是将其包含在同一个自定义 HTML 标记中，但每次标记运行时都会重新初始化该函数。您可以将其放在单独的自定义 HTML 中，并将其用作设置标记，但仅限于每页运行一次。或者您可以定义一个返回函数的变量。更多提示：simoahava.com/analytics/…