DOM Navigation

Once you have an element, you can navigate to other elements relative to this element. Navigation methods include:

• Getting the elements parent.

• Getting the elements sibling, either the next or the previous sibling in the DOM.

• Getting the elements child or children nodes. NOTE: There is a subtle difference between the two:

  • Child nodes - nodes directly underneath this node including any text nodes.

  • Children nodes - nodes directly underneath this node excluding any text nodes.

Suppose we have some HTML that looks like this:

<div id="div1">
  DIV1 TEXT
       <div id="div2">
         DIV2 TEXT
           <span id="span1" class="style-span-1" lang="en-us">SPAN1 TEXT</span>
               <span id="span2" class="style-span-2">SPAN2 TEXT</span>
               <span id="span3" class="style-span-3">SPAN3 TEXT</span>
       </div>
</div>

Here is how we can navigate around the DOM once we have a starting element:

// Let's start with the span1 element.
Element span1 = Find.ById("span1");
Element span2 = span1.GetNextSibling();
Element span3 = span2.GetNextSibling();

// Let's verify we got the right elements
Assert.IsTrue(span1.IdAttributeValue.Equals("span1"), string.Format("Actual ID: {0}", span1.IdAttributeValue));
Assert.IsTrue(span2.IdAttributeValue.Equals("span2"), string.Format("Actual ID: {0}", span2.IdAttributeValue));
Assert.IsTrue(span3.IdAttributeValue.Equals("span3"), string.Format("Actual ID: {0}", span3.IdAttributeValue));

// Now let's navigate backwards
span2 = span3.GetPreviousSibling();
span1 = span2.GetPreviousSibling();
Assert.IsTrue(span1.IdAttributeValue.Equals("span1"), string.Format("Actual ID: {0}", span1.IdAttributeValue));
Assert.IsTrue(span2.IdAttributeValue.Equals("span2"), string.Format("Actual ID: {0}", span2.IdAttributeValue));
Assert.IsTrue(span3.IdAttributeValue.Equals("span3"), string.Format("Actual ID: {0}", span3.IdAttributeValue));

// Now let's look at parent and children
Element parentDiv = span1.Parent;
// ChildNodes includes all nodes including text and comments. Children is a subset of ChildNodes.
Assert.AreEqual(parentDiv.ChildNodes.Count, 4, string.Format("ChildNodes = {0}", parentDiv.ChildNodes));
// Children are basically only markup children. (Does not include text or comments);
Assert.AreEqual(parentDiv.Children.Count, 3, string.Format("Children = {0}", parentDiv.ChildNodes));

span1 = parentDiv.Children[0];
span2 = parentDiv.Children[1];
span3 = parentDiv.Children[2];
Assert.IsTrue(span1.IdAttributeValue.Equals("span1"), string.Format("Actual ID: {0}", span1.IdAttributeValue));
Assert.IsTrue(span2.IdAttributeValue.Equals("span2"), string.Format("Actual ID: {0}", span2.IdAttributeValue));
Assert.IsTrue(span3.IdAttributeValue.Equals("span3"), string.Format("Actual ID: {0}", span3.IdAttributeValue));

' Let's start with the span1 element.
Dim span1 As Element = Find.ById("span1")
Dim span2 As Element = span1.GetNextSibling()
Dim span3 As Element = span2.GetNextSibling()

' Let's verify we got the right elements
Assert.IsTrue(span1.IdAttributeValue.Equals("span1"), String.Format("Actual ID: {0}", span1.IdAttributeValue))
Assert.IsTrue(span2.IdAttributeValue.Equals("span2"), String.Format("Actual ID: {0}", span2.IdAttributeValue))
Assert.IsTrue(span3.IdAttributeValue.Equals("span3"), String.Format("Actual ID: {0}", span3.IdAttributeValue))

' Now let's navigate backwards
span2 = span3.GetPreviousSibling()
span1 = span2.GetPreviousSibling()
Assert.IsTrue(span1.IdAttributeValue.Equals("span1"), String.Format("Actual ID: {0}", span1.IdAttributeValue))
Assert.IsTrue(span2.IdAttributeValue.Equals("span2"), String.Format("Actual ID: {0}", span2.IdAttributeValue))
Assert.IsTrue(span3.IdAttributeValue.Equals("span3"), String.Format("Actual ID: {0}", span3.IdAttributeValue))

' Now let's look at parent and children
Dim parentDiv As Element = span1.Parent
' ChildNodes includes all nodes including text and comments. Children is a subset of ChildNodes.
Assert.AreEqual(parentDiv.ChildNodes.Count, 4, String.Format("ChildNodes = {0}", parentDiv.ChildNodes))
' Children are basically only markup children. (Does not include text or comments);
Assert.AreEqual(parentDiv.Children.Count, 3, String.Format("Children = {0}", parentDiv.ChildNodes))

span1 = parentDiv.Children(0)
span2 = parentDiv.Children(1)
span3 = parentDiv.Children(2)
Assert.IsTrue(span1.IdAttributeValue.Equals("span1"), String.Format("Actual ID: {0}", span1.IdAttributeValue))
Assert.IsTrue(span2.IdAttributeValue.Equals("span2"), String.Format("Actual ID: {0}", span2.IdAttributeValue))
Assert.IsTrue(span3.IdAttributeValue.Equals("span3"), String.Format("Actual ID: {0}", span3.IdAttributeValue))