315Chapter 15Generic HTML Element Objectsto the parent of the uland olobjects: the document.body. Also, you need to change thedocument.allreferences to document.getElementById(). Related Items:removeChild(), removeNode(), replaceChild(), swapNode()methods. scrollIntoView(topAlignFlag) Returns:Nothing. Compatibility:WinIE4+, MacIE4+, NN7+, Moz1+, Safari- The scrollIntoView()method scrolls the page (vertically and/or horizontally as needed) such that the current object is visible within the window or frame that contains it. A singleparameter, a Boolean value, controls the location of the element within the viewable space. Avalue of true(the default) causes the element to be displayed so that its top is aligned withthe top of the window or frame (provided the document beneath it is long enough to allowthis amount of scrolling). But a value of falsecauses the bottom of the element to align withthe bottom of the viewable area. In most cases, you want the former so that the beginning ofa page section is at the top of the viewable area. But if you don t want a user to see contentbelow a certain element when you jump to the new view, use the falseparameter. For form elements, you must use the typical form element reference (document.formName. elementName.scrollIntoView()) unless you also specify an ID attribute for the element(document.getElementById( elementID ).scrollIntoView()). ExampleUse The Evaluator (Chapter 13) to experiment with the scrollIntoView()method. Resizethe browser window height so that you can see only the topmost text box and the Resultstext area. Enter each of the following statements into the top text box and see where the myPelement comes into view: myP.scrollIntoView() myP.scrollIntoView(false) Expand the height of the browser window until you can see part of the table lower on thepage. If you entermyTable.scrollIntoView(false) into the top text box, the page scrolls to bring the bottom of the table to the bottom of thewindow. But if you use the default parameter (trueor empty), myTable.scrollIntoView() the page scrolls as far as it can in an effort to align the top of the element as closely as possi- ble to the top of the window. The page cannot scroll beyond its normal scrolling maximum(although if the element is a positioned element, you can use dynamic positioning to place itwherever you want including off the page ). Also, if you shrink the window and try toscroll the top of the table to the top of the window, be aware that the tableelement containsa captionelement so the caption is flush with the top of the window. Related Items:window.scroll(), window.scrollBy(), window.scrollTo()methods. setActive() Returns:Nothing. Compatibility:WinIE5.5+, MacIE-, NN-, Moz-, Safari- The setActive()method lets a script designate an element object as the active element. However, unlike the focus()method, the window does not scroll the active element intoelementObject.setActive()

314Part IIIDocument Objects ReferenceListing 15-31(continued) if (document.getElementById( myOL ) && oldNode) { var innards = document.getElementById( myOL ).children; while (innards.length > 0) { oldNode.insertBefore(innards[0]); } document.getElementById( myOL ).replaceNode(oldNode); } } // swap first and last nodesfunction swap() { if (document.getElementById( myUL )) { document.getElementById( myUL ).firstChild.swapNode( document.getElementById( myUL ).lastChild); } if (document.getElementById( myOL )) { document.getElementById( myOL ).firstChild.swapNode( document.getElementById( myOL ).lastChild); } } // remove last nodefunction remove() { if (document.getElementById( myUL )) { document.getElementById( myUL ).lastChild.removeNode(true); } if (document.getElementById( myOL )) { document.getElementById( myOL ).lastChild.removeNode(true); } }

Node Methods

• First Item
• Second Item
• Third Item
• Fourth Item

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

1. Three-DimensionalShapes
1. Circular Cylinder
2. Cube
3. Rectangular Prism
4. Regular Right Pyramid
5. Right Circular Cone
6. Sphere

Related Items:addEventListener(), dispatchEvent(), fireEvent(), removeEventListener()methods; onlosecaptureevent; Eventobject (Chapter 25). removeAttribute( attributeName [, caseSensitivity]) Returns:Boolean (IE); Nothing (NN/DOM). Compatibility:WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ elementObject.releaseCapture()