遍历 DOM 从被点击的元素中获取节点答案

【问题标题】：Traversing up the DOM getting the node from a clicked element遍历 DOM 从被点击的元素中获取节点
【发布时间】：2014-05-24 19:04:07
【问题描述】：

好的，当我点击页面上的任何元素并且我想建立一个元素所在的 DOM 树时，我正在尝试执行以下操作。

html 示例

<html>
  <head>
  </head>
  <body>
    <ul>
     <li><span>Elem 1</span></li>
     <li><span>Elem 2</span></li>
     <li><span>Elem 3</span></li>
    </ul>
  </body>
</html>

这是JS（来自点击事件并通过点击的元素）

function getElementIdentifier(elem, domSelector, firstId) {
    if(elem.tagName === 'HTML') {
        return 'HTML ' + domSelector;
    } else {
        return getElementIdentifier(elem.parentNode, ' > ' +elem.tagName + ' ' + domSelector, firstId);
    }
}

这在一定程度上有效，但当我点击列表中的第三个项目时，它只检索以下内容：

HTML  > BODY  > UL  > LI  > SPAN

但我想检索第三个，因为这是我点击的那个。我有一个要展示的代码笔。

http://codepen.io/tom-maton/pen/FljpL/

我不想使用 jQuery - 只是想使用原始 js。

【问题讨论】：

见stackoverflow.com/questions/11761881/…
我没有看到这里的问题，你的“面包屑”对第三个元素也有效。
正如 veritas 所说的那样，你的意思是你想让它以前的兄弟姐妹和父母一起去吗？
它生成了错误的选择器，因为如果我将选择器传递给jquery，它只会返回第一个li。而我想检索 HTML > BODY > UL > LI + LI > SPAN 为第二个和 HTML > BODY > UL > LI + LI + LI > SPAN 为点击的第三个项目
@TomMaton 你只想要以前的兄弟姐妹对吗？

标签： javascript dom

【解决方案1】：

这是最快的方法（至少对我来说）

function clickHandler(event) {
    var target = event.target,
    breadcrumb = [];

    while (target) {
        breadcrumb.unshift(target.tagName);
        target = target.parentElement;
    }
    console.log(breadcrumb.join(" > "));
}

document.addEventListener('click', clickHandler, false);

在这里提琴：http://jsfiddle.net/NTEv2/

有兄弟姐妹的版本：

function getTagName(element) {
    return element.tagName;
}
function clickHandler(event) {
    var target = event.target,
        breadcrumb = [],
        temp;

    while (target) {
        target = target.parentElement;
        if (target) {
            breadcrumb.unshift(([].slice.call(target.children).map(getTagName).join(" + ")));
        }
    }

    // HTML is always there
    breadcrumb.unshift(document.documentElement.tagName);

    console.log(breadcrumb.join(" > "));
}

document.addEventListener('click', clickHandler, false);

在这里提琴：http://jsfiddle.net/NTEv2/1/

只有以前的兄弟姐妹的版本（根据要求）：

function clickHandler(event) {
    var target = event.target,
        breadcrumb = [],
        part = [],
        prev = target,
        temp;

    while (target) {
        if (prev) {
            part.unshift(prev.tagName);
            prev = prev.previousElementSibling;
        } else {
            target = target.parentElement;
            prev = target;
            breadcrumb.unshift(part.join(" + "));
            part = [];
        }
    }

    console.log(breadcrumb.join(" > "));
}

document.addEventListener('click', clickHandler, false);

在这里提琴：http://jsfiddle.net/NTEv2/11/

【讨论】：

veritas 很接近，但每次我点击一个元素时，它总是返回 HTML > HEAD + BODY > UL > LI + LI + LI > SPAN
@TomMaton 请重新检查我的答案；）
这就是伙伴，正是我所追求的