javascript - 如何获取 anchor 标记的 id，无论它在层次结构中的位置如何？

Question

我想要获取 anchor 标记的 id/class/both，无论它位于标记层次结构中的哪个位置。下面的示例很奇怪，但对于我的目的来说很现实，因为我们的网站是通过我无法控制的 CMS 访问的。如果人们在不同时间添加多个级别的格式，CMS 会添加新的跨度...

因此，了解上述事实后，我想通过其 id/class/两者来确定特定的 anchor 标记，但我并不总是知道它们在标记钻取中的位置。

<div id="div_id_A" class="div_class_A">
    <div class="div_class_A">
        <a href="#" id="anchor_id_A" class="anchor_class_A">
            <span class="span_class_A">
                <span id="span_id_B">
                    <span id="span_id_C" class="span_class_C">
                        <p>
                            Click Me
                        </p>
                    </span>
                </span>
            </span>
         </a>
     </div>
</div>

我就是这样开始的，

var dataLayer = dataLayer || [];

document.addEventListener('click', function(event) {
    var telm = event.target.parentNode.className;
    var delm = 'anchor_id_A';
    console.log(telm);
    if (telm == delm) {
        dataLayer.push({
            'youClicked': telm
        });
        console.log(dataLayer);
    };
});

*WHERE: telm = target element; delm = desired element.

澄清一下。我指定 anchor 是有原因的，这不仅仅是为了示例。由于我受到 CMS 的限制，我无法进入并向预定义代码(即模板)添加标记，但我确实需要尽可能准确地知道点击了哪个链接(对于 Google Analytics)，以便我可以追踪用户忽略、没有看到或喜欢的内容。

Answer 1

您可以向上导航层次结构，直到到达 anchor 元素，然后只需读取其 ID。

请参见此处:

var dataLayer = dataLayer || [];

document.addEventListener('click', function(event) {
  var el = event.target;
  while (el.parentElement && el.tagName != 'A') {
    el = el.parentElement;
  }
  dataLayer.push({
      'youClicked': el
  });
  console.log(dataLayer);
  alert(el.id);
});

<div id="div_id_A" class="div_class_A">
  <div class="div_class_A">
    <a href="#" id="anchor_id_A" class="anchor_class_A">
      <span class="span_class_A">
        <span id="span_id_B">
          <span id="span_id_C" class="span_class_C">
            <p>Click Me</p>
          </span>
        </span>
      </span>
    </a>
  </div>
</div>