html - 如何使用元素的 DOM 层次结构(父元素)访问元素？

Question

我想通过其父节点访问使用 DOM 层次结构节点结构的元素。我试图通过 Firebug 找到 DOM 层次结构；想要类似的东西，<parent_node1>.<child_node1>.<child_node2> (不是 document.getElementByID , getElementbyname )来访问一个元素。

我想自动化一个场景，比如我有列标题和相应的值。想要测试，每个列标题下的值是否正确...

我正在考虑使用 DOM 作为自动化这种情况的方法...但是，我怎样才能找到 DOM 层次结构...？

我通过 Firebug 中的 Inspect Element 看到的是类似事件、元素的列表，看起来不像层次结构节点结构...请问有人可以在这方面提供帮助吗？

Answer 1

如前所述，您可能指的是 DOM 元素属性，例如 element.childNodes、element.firstChild 或类似属性。

看看 DOM Element property reference over at JavaScriptKit ，您将在其中很好地了解如何访问层次结构。

var currentTD = document.getElementsByTagName("td")[0];
var currentTable = document.getElementsByTagName("table")[0];

currentTD.parentNode // contains the TR element the TD resides in.
currentTable.childNodes // contains THEAD TBODY and TFOOT if present.

DOM Tables even have more properties像 rows 集合和 cells 集合。

提醒:请注意，这些集合是实时集合，因此迭代它们并在每次迭代中访问 collection.length 可能会非常慢，因为获取length，每次都要查询DOM。