Javascript - 捕获层次结构答案

【问题标题】：Javascript - Capturing hierarchyJavascript - 捕获层次结构
【发布时间】：2013-09-08 06:47:19
【问题描述】：

假设我有以下一组代码？

<body>
    <div>
        <div>
            <div><span>Text that I want to capture</span></div>
        </div>
    </div>
</body>

如果用户点击span元素，我想捕获元素中的文本，然后捕获元素的层次结构。目标是稍后返回并将其与捕获的文本进行比较。

是否有图书馆可以帮助我完成这项工作？如果没有，您能否指出一些执行此操作的示例 JS 代码？我一整天都在想办法，但似乎无法解决。

【问题讨论】：

捕获元素的层次结构是什么意思？

标签： javascript jquery parsing hierarchy

【解决方案1】：

您可以使用$([clicked element]).parents() 获取从单击的元素到根(<html>) 的所有父元素的数组。见JQuery documentation

尝试通过 fork 这个jsFiddle来玩它

【讨论】：

这真的很酷。然后我可以获取结果，将其反转并将其保存在数据库中。然后我可以用这样的东西遍历 dom： $(array_db[0] > array_db[1]) 其中 array_db 是我捕获的父母列表吗？
我不确定您所说的 $(array_db[0] > array_db[1]) 是什么意思。您可以使用$.each 遍历数组并作用于其中的所有或某些元素。
假设父母的反面如下 - ["HTML", "BODY", "DIV", "DIV", "DIV"]，我把它保存到一个数组变量 (array_db) .我可以像这样遍历 dom - $(array_db[0] > array_db[1]...)？
嗨@darudude，查看修改后的答案

【解决方案2】：

我认为您不需要图书馆。您可以将单击的元素存储在某个数组中，然后获取它们的 parentNode's - 以具有层次结构：

element.parentNode.tagName

示例

document.write('<body><div><div><div><span>Text that I want to capture</span></div></div></div></body>');
document.querySelector('span').addEventListener('click', function (e) {
    var hierarchy = [];
    var parent = e.currentTarget.parentNode;
    while (parent) {
        parent.tagName && hierarchy.push(parent.tagName);
        parent = parent.parentNode
    }
    console.log(hierarchy.reverse()); // ["HTML", "BODY", "DIV", "DIV", "DIV"]
});

【讨论】：