A DOM-Based Sliding Puzzle: The DOM Tree

A DOM-Based Sliding Puzzle (3)

The Puzzle's DOM Tree

One of the DOM's advantages is that you can isolate the document's nodes you want to deal with via the DOM tree. You just put the relevant nodes under a single common father and access the subtree rooted at this father node. You don't need to bother with everything else in the document that is outside this subtree. We enclosed our South Park Sliding Puzzle's elements in a DIV element that we assigned the divNode id. Our code deals only with this node and its child nodes. The structure of the subtree is quite simple: one father node and 11 child nodes. As explained in the previous page, nine of these nodes are IMG nodes and the other two are BR nodes. Here is a sketch of the DOM tree: