向上遍历 dom 从带有 id 和类的单击元素中获取

Question

我找到了有关向上遍历 dom 从单击的元素获取节点的重要信息......

向上遍历 DOM 从单击的元素获取节点

谁可以帮助我在面包屑中包含 id= 和 class= 属性，就像您在大多数窃听器中看到的那样？

所以代替：

HTML  > BODY  > UL  > LI  > SPAN

我想要：

HTML  > BODY  > UL.menu  > LI  > SPAN#whatever

。或类似的东西。

Answer 1

添加到链接代码中，下面的代码将在元素上附加所有 id 和类。

单击元素<div id="id1" class="class1 class2">Test</div>...

将输出HTML>正文> DIV#id1.class1.class2

function clickHandler(event) {
var target = event.target,
breadcrumb = [];
while (target) {
var id = target.id;
var classes = target.className;
var crumb = target.tagName;
if (id) { 
crumb += "#" + id; 
}
if (classes) {
var classList = classes.split(' ');
for (var c = 0; c < classList.length; c++) {
crumb += "." + classList[c];
}
}
breadcrumb.unshift(crumb);
target = target.parentElement;
}
console.log(breadcrumb.join(" > "));
}
document.addEventListener('click', clickHandler, false);