Example: Tree structure and navigation

Try to guess the outcome before clicking on the Load page button, by asking yourself the following questions:

  • Which element is the parent of the list item element with ID "theItem"?
  • Which element is the next element sibling of that list item element?
  • Which element is the first element child of the body element?
  • Which element is the last element child of the body element?
  • What are the properties of the first child of the list item element with ID "theItem"?

Try adding other lines to the script to navigate elsewhere in the tree.

Note:

Hints:

  • undefined
1
2
var bodyNode = document.body;
var itemNode = document.getElementById("theItem");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX