Question

好的，我正在尝试做的是当我点击页面上的任何元素并且我想要构建元素所在的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

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

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

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

Answer 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/

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

1 个答案: