Question

I want to access an element using a DOM hierarchy Node structure, through its parent nodes.I am trying to find the DOM hierarchy through firebug; want something like, <parent_node1>.<child_node1>.<child_node2> (not by document.getElementByID, getElementbyname) to access an element.

I want to automate a scenario like, I have column headers and corresponding values. Want to test, whether the values present under each column header, is correct…

I am thinking of using DOM as a method of automating this case…But, how can I find the DOM hierarchy…?

What I see through Inspect Element in Firebug is something like, list of events, elements and is not looking like a hierarchy node structure…Can somebody help in this regard please?

Answer 1

As discussed, you probably mean the DOM Element properties like element.childNodes, element.firstChild or similar.

Have a look at the DOM Element property reference over at JavaScriptKit, you’ll get a good overview there how to access the hierarchy.

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 like a rows collection and a cells collection.

A reminder of caution: Beware that these collections are live collections, so iterating over them and accessing collection.length in each iteration can be really slow because to get the length, the DOM has to be queried each time.