1

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

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

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

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

4

2 回答 2

1

document.getElementById并且document.getElementByTagname 正在使用 DOM。它们在 DOM 中获取一个对象（特别是文档对象，尽管您也可以在元素上同时调用这两个对象）并返回一个对象，该对象分别是单个元素或零个或多个元素的集合。那是一个 DOM 操作。从那里您可以对结果执行其他 DOM 操作，例如获取孩子、父母或兄弟姐妹、更改值等。

所有 DOM 操作归结为：

  1. 取一个起点。这通常document是因为我们做的第一件事是调用document.getElementById或document.getElementByTagname然后从我们真正认为起点的结果开始工作。
  2. 找到我们感兴趣的一个或多个元素，相对于起点，无论是通过startingPoint.getElementById* 还是startingPoing.getElementByTagname结合一些测试（例如，只对具有特定 的那些classname，如果他们有特定类型的孩子等）。
  3. 读取和/或更改某些值，添加新的子节点和/或删除节点。

在像您这样的情况下，起点将是由 、 或类似文件找到的一个或多个document.getElementById(someID)表document.getElementById(someID).getElementsByTagname('table')[0]。从该表中，myTable.getElementsByTagname('th')将为您提供列标题。根据结构以及您正在使用它执行的操作，您可以从每一行中选择相应的元素myTable.getElementsByTagname('td')或遍历每一行，然后处理curRow.getElementsByTagname('td'). 您也可以只使用firstChild等，childNodes但通常更方便的是通过标记名过滤掉您不关心的元素。

*由于在文档中只能有一个具有给定 id 的元素，因此如果在文档层次结构中更高的任何元素上调用它都会返回相同的值，所以我们通常只调用它 on document。如果我们想要在元素是我们当前元素的后代的情况下做某事，那么在元素上调用它会很有用，否则就不行。

于 2012-08-07T13:23:59.790 回答
1

如前所述，您可能指的是DOM Element propertieslike element.childNodes或element.firstChild类似的。

看看JavaScriptKit 上的 DOM Element 属性参考，你会很好地了解如何访问层次结构。

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 表甚至有更多的属性，比如rows集合和cells集合。

提醒注意：请注意这些集合是实时集合，因此collection.length在每次迭代中对其进行迭代和访问可能非常慢，因为要获得长度，每次都必须查询 DOM。

于 2012-08-07T13:33:54.603 回答