如何从一个元素遍历DOM路径（使用Firebug）？

Question

我有例如这个结构：

<div id="items">
  <div class="item">
    <span class="date">5 Feb 2016</span>
    <span class="title">
      <a href="http://example.com">Title 1</a>
    </span>
  </div>
</div>

我需要从#items到a的完整导线路径 - 在我的情况下是：

firstChild.firstChild.nextSibling.firstChild

或

childNodes[0].childNodes[1].childNodes[0]

当我在Firebug的命令行中写道时：

document.getElementById('items');

我可以看到该元素并可以右键单击它并选择 Inspect in DOM Panel 在那里查看它。然后，我可以通过展开属性childNodes或firstChild + nextSibling找到此路径。

当我在 DOM 面板中到达我的元素（我的示例中为a）时，我右键单击它并从菜单中选择复制路径得到上面提到的路径。

我的问题是，有没有简化这些步骤的解决方案？

• JavaScript中的代码
• Firefox或Firebug的插件
• 从 DOM 面板中删除其他属性（childNodes，attributes，nodeValue等除外）
• 其他解决方案（Firefox之外）

Answer 1

Firebug有一个函数getPropertyPath()来获取DOM路径。这个函数的作用是启动DOM树并将每个项添加到一个数组中，该数组最后连接到一个字符串。