313Chapter 15Generic HTML Element ObjectsThe page rendered from (Web design company)
313Chapter 15Generic HTML Element ObjectsThe page rendered from Listing 15-31 begins with a ultype list of four items. Four buttons control various aspects of the node structure of this list element. The first button invokes thereplace()function, which changes the ultype to ol. To do this, the function must temporar- ily tuck away all child nodes of the original ulelement so that they can be added back into thenew olelement. At the same time, the old ulnode is stored in a global variable (oldNode) forrestoration in another function. To replace the ulnode with an ol, the replace()function creates a new, empty olelementand assigns the myOLID to it. Next, the children (lielements) are stored en masse as an arrayin the variable innards. The child nodes are then inserted into the empty olelement, using theinsertBefore()method. Notice that as each child element from the innardsarray is insertedinto the olelement, the child element is removed from the innardsarray. That s why the loopto insert the child nodes is a whileloop that constantly inserts the first item of the innardsarray to the new element. Finally, the replaceNode()method puts the new node in the oldnode s place, while the old node (just the ulelement) is stored in oldNode. The restore()function operates in the inverse direction of the replace()function. Thesame juggling of nested child nodes is required. The third button invokes the swap()function, whose script exchanges the first and lastnodes. The swapNode()method, like the others in this discussion, operates from the point ofview of the node. Therefore, the method is attached to one of the swapped nodes, while theother node is specified as a parameter. Because of the nature of the olelement, the numbersequence remains fixed but the text of the linode swaps. To demonstrate the removeNode()method, the fourth function removes the last child nodeof the list. Each call to removeNode()passes the trueparameter to guarantee that the textnodes nested inside each linode are also removed. Experiment with this method by settingthe parameter to false(the default). Notice how the parent child relationship changes whenyou remove the linode. Listing 15-31: Using Node-Related Methods