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

时间:2019-04-03 10:37:21

标签: javascript html dom google-tag-manager

每个小部件都有HTML代码,

html code

当我单击 class 时,如何获取 div data-tracker-id 的名称属性(= 118DBA90ECB84E7BB9E7C07402F4B4B25CC0CD43818B92F8E0C26CA63C5F543D),例如“ slick-arrow slick-prev “?用CSS-Selector制作DOM元素无效。

1 个答案:

答案 0 :(得分:0)

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

您可以使用带有parent() function的jQuery来做到这一点,该this article可以遍历指定的父元素。例如

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]');

自定义功能基于safari