CD-202 Part VI ✦ Appendixes Example Use The Evaluator to experiment with the normalize() method in NN6. The follow- ing sequence adds a text node adjacent to one in the myP element. A subsequent invocation of the normalize() method removes the division between the adjacent text nodes. Begin by confirming the number of child nodes of the myP element: document.getElementById(“myP”).childNodes.length Three nodes initially inhabit the element. Next, create a text node and append it as the last child of the myP element: a = document.createTextNode(“This means you!”) document.getElementById(“myP”).appendChild(a) With the new text now rendered on the page, the number of child nodes increases to four: document.getElementById(“myP”).childNodes.length You can see that the last child node of myP is the text node you just created: document.getElementById(“myP”).lastChild.nodeValue But by invoking normalize() on myP, all adjacent text nodes are accumulated into single nodes: document.getElementById(“myP”).normalize() You can now see that the myP element is back to three child nodes, and the last child is a combination of the two previously distinct, but adjacent, text nodes: document.getElementById(“myP”).childNodes.length document.getElementById(“myP”).lastChild.nodeValue releaseCapture() setCapture(containerBoolean) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ elementObject.releaseCapture() CD-203 Appendix F ✦ Examples from Parts III and IV Example Listing 15-30 demonstrates the usage of setCapture() and releaseCapture() in a “quick-and-dirty” context menu for IE5+/Windows. The job of the context menu is to present a list of numbering styles for the ordered list of items on the page. Whenever the user brings up the context menu atop the OL element, the custom context menu appears. Event capture is turned on in the process to prevent mouse actions elsewhere on the page from interrupting the context menu choice. Even a click on the link set up as the title of the list is inhibited while the context menu is visible. A click anywhere outside of the context menu hides the menu. Clicking a choice in the menu changes the listStyleType property of the OL object and hides the menu. Whenever the context menu is hidden, event capture is turned off so that clicking on the page (such as the link) works as normal. For this design, onClick, onMouseOver, and onMouseOut event handlers are assigned to the DIV element that contains the context menu. To trigger the display of the context menu, the OL element has an onContextMenu event handler. This handler invokes the showContextMenu() function. In this function, event capture is assigned to the context menu DIV object. The DIV is also positioned at the location of the click before it is set to be visible. To prevent the system’s regular context menu from also appearing, the event object’s returnValue property is set to false. Now that all mouse events on the page go through the contextMenu DIV object, let’s examine what happens with different kinds of events triggered by user action. As the user rolls the mouse, a flood of mouseover and mouseout events fire. The event handlers assigned to the DIV manage these events. But notice that the two event handlers, highlight() and unhighlight(), perform action only when the srcElement property of the event is one of the menu items in the DIV. Because the page has no other onMouseOver or onMouseOut event handlers defined for ele- ments up the containment hierarchy, you do not have to cancel event bubbling for these events. When a user clicks the mouse button, different things happen depending on whether event capture is enabled. Without event capture, the click event bubbles up from wherever it occurred to the onClick event handler in the BODY element. (An alert dialog box displays to let you know when the event reaches the BODY.) But with event capture turned on (the context menu is showing), the handleClick() event handler takes over to apply the desired choice whenever the click is atop one of the context menu items. For all click events handled by this function, the context menu is hidden and the click event is canceled from bub- bling up any higher (no alert dialog box appears). This takes place whether the user makes a choice in the context menu or clicks anywhere else on the page. In the latter case, all you need is for the context menu to go away like the real context menu does. For added insurance, the onLoseCapture event handler hides the con- text menu when a user performs any of the actions just listed that cancel capture. elementObject.releaseCapture() CD-204 Part VI ✦ Appendixes Listing 15-30: Using setCapture() and releaseCapture() <HTML> <STYLE TYPE=”text/css”> #contextMenu {position:absolute; background-color:#cfcfcf; border-style:solid; border-width:1px; border-color:#EFEFEF #505050 #505050 #EFEFEF; padding:3px 10px; font-size:8pt; font-family:Arial, Helvetica; line-height:150%; visibility:hidden} .menuItem {color:black} .menuItemOn {color:white} OL {list-style-position:inside; font-weight:bold; cursor:nw-resize} LI {font-weight:normal} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> function showContextMenu() { contextMenu.setCapture() contextMenu.style.pixelTop = event.clientY + document.body.scrollTop contextMenu.style.pixelLeft = event.clientX + document.body.scrollLeft contextMenu.style.visibility = “visible” event.returnValue = false } function revert() { document.releaseCapture() hideMenu() } function hideMenu() { contextMenu.style.visibility = “hidden” } function handleClick() { var elem = window.event.srcElement if (elem.id.indexOf(“menuItem”) == 0) { shapesList.style.listStyleType = elem.LISTTYPE } revert() event.cancelBubble = true } function highlight() { var elem = event.srcElement if (elem.className == “menuItem”) { elem.className = “menuItemOn” } } elementObject.releaseCapture() CD-205 Appendix F ✦ Examples from Parts III and IV function unhighlight() { var elem = event.srcElement if (elem.className == “menuItemOn”) { elem.className = “menuItem” } } </SCRIPT> <BODY onClick=”alert(‘You reached the document object.’)” > <OL ID=”shapesList” onContextMenu=”showContextMenu()”> <A HREF=”javascript:alert(‘A sample link.’)”>Three-Dimensional Shapes</A> <LI>Circular Cylinder</LI> <LI>Cube</LI> <LI>Rectangular Prism</LI> <LI>Regular Right Pyramid</LI> <LI>Right Circular Cone</LI> <LI>Sphere</LI> </OL> <DIV ID=”contextMenu” onLoseCapture=”hideMenu()” onClick=”handleClick()” onMouseOver=”highlight()” onMouseOut=”unhighlight()”> <SPAN ID=”menuItem1” CLASS=”menuItem” LISTTYPE=”upper- alpha”>A,B,C, </SPAN><BR> <SPAN ID=”menuItem2” CLASS=”menuItem” LISTTYPE=”lower- alpha”>a,b,c, </SPAN><BR> <SPAN ID=”menuItem3” CLASS=”menuItem” LISTTYPE=”upper- roman”>I,II,III, </SPAN><BR> <SPAN ID=”menuItem4” CLASS=”menuItem” LISTTYPE=”lower- roman”>i,ii,iii, </SPAN><BR> <SPAN ID=”menuItem5” CLASS=”menuItem” LISTTYPE=”decimal”>1,2,3, </SPAN><BR> </DIV> </BODY> </HTML> removeAttribute(“attributeName”[, caseSensitivity]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to experiment with the removeAttribute() method for the elements in the page. See the examples for the setAttribute() elementObject.removeAttribute() CD-206 Part VI ✦ Appendixes method later in this chapter, and enter the corresponding removeAttribute() statements in the top text box. Interlace statements using getAttribute() to ver- ify the presence or absence of each attribute. removeAttributeNode(attributeNode) setAttributeNode(attributeNode) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) to experiment with the setAttributeNode() and removeAttributeNode() methods for the P element in the page. The task is to cre- ate and add a STYLE attribute to the P element. Begin by creating a new attribute and storing it temporarily in the global variable a: a = document.createAttribute(“style”) Assign a value to the attribute object: a.nodeValue = “color:red” Now insert the new attribute into the P element: document.getElementById(“myP”).setAttributeNode(a) The paragraph changes color in response to the newly added attribute. Due to the NN6 bug that won’t allow the method to return a reference to the newly inserted attribute node, you can artificially obtain such a reference: b = document.getElementById(“myP”).getAttributeNode(“style”) Finally, use the reference to the newly added attribute to remove it from the element: document.getElementById(“myP”).removeAttribute(b) Upon removing the attribute, the paragraph resumes its initial color. See the exam- ple for the setAttribute() method later in this chapter to discover how you can perform this same kind of operation with setAttribute(). elementObject.removeAttributeNode() CD-207 Appendix F ✦ Examples from Parts III and IV removeBehavior(ID) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example See Listings 15-19a and 15-19b earlier in this chapter for examples of how to use addBehavior() and removeBehavior(). removeChild(nodeObject) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ Example You can see an example of removeChild() as part of Listing 15-21 earlier in this chapter. removeEventListener() See addEventListener(). removeExpression(“propertyName”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example You can experiment with all three expression methods in The Evaluator (Chapter 13). The following sequence adds an expression to a style sheet property of the myP ele- ment on the page and then removes it. elementObject.removeExpression() CD-208 Part VI ✦ Appendixes To begin, enter the number 24 in the bottom one-line text box in The Evaluator (but don’t press Enter or click the List Properties button). This is the value used in the expression to govern the fontSize property of the myP object. Next, assign an expression to the myP object’s style object by entering the following statement into the topmost text box: myP.style.setExpression(“fontSize”,”document.forms[0].inspector.value”,”JScript”) You can now enter different font sizes into the lower text box and have the values immediately applied to the fontSize property. (Keyboard events in the text box automatically trigger the recalculation.) The default unit is px, but you can also append other units (such as pt) to the value in the text field to see how different measurement units influence the same numeric value. Before proceeding to the next step, enter a value other than 16 (the default fontSize value). Finally, enter the following statement in the topmost text box to disconnect the expression from the property: myP.style.removeExpression(“fontSize”) Notice that although you can no longer adjust the font size from the lower text box, the most recent value assigned to it still sticks to the element. To prove it, enter the following statement in the topmost text box to see the current value: myP.style.fontSize removeNode(removeChildrenFlag) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Examine Listing 15-21 for the appendChild() method to understand the difference between removeChild() and removeNode(). In the restore() function, you can replace this statement mainObj.removeChild(oneChild) in IE5+ with oneChild.removeNode(true) elementObject.removeNode() CD-209 Appendix F ✦ Examples from Parts III and IV The difference is subtle, but it is important to understand. See Listing 15-31 later in this chapter for another example of the removeNode() method. replaceAdjacentText(“location”, “text”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Use The Evaluator (Chapter 13) to experiment with the replaceAdjacentText() method. Enter each of the following statements into the top text box and watch the results in the myP element (and its nested myEM element) below the solid rule: document.all.myEM.replaceAdjacentText(“afterBegin”, “twenty”) Notice that the myEM element’s new text picks up the behavior of the element. In the meantime, the replaced text ( all) is returned by the method and displayed in the Results box. document.all.myEM.replaceAdjacentText(“beforeBegin”, “We need “) All characters of the text fragment, including spaces, are replaced. Therefore, you may need to supply a trailing space, as shown here, if the fragment you replace has a space. document.all.myP.replaceAdjacentText(“beforeEnd”, “ good people.”) This is another way to replace the text fragment following the myEM element, but it is also relative to the surrounding myP element. If you now attempt to replace text after the end of the myP block-level element, document.all.myP.replaceAdjacentText(“afterEnd”, “Hooray!”) the text fragment is inserted after the end of the myP element’s tag set. The frag- ment is just kind of floating in the document object model as an unlabeled text node. elementObject.replaceAdjacentText() CD-210 Part VI ✦ Appendixes replaceChild(newNodeObject, oldNodeObject) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ Example You can see an example of replaceChild() as part of Listing 15-21 earlier in this chapter. replaceNode(“newNodeObject”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Listing 15-31 demonstrates three node-related methods: removeNode(), replaceNode(), and swapNode(). These methods work in IE5+ only. The page rendered from Listing 15-31 begins with a UL type list of four items. Four buttons control various aspects of the node structure of this list element. The first button invokes the replace() function, which changes the UL type to OL. To do this, the function must temporarily tuck away all child nodes of the original UL element so that they can be added back into the new OL element. At the same time, the old UL node is stored in a global variable ( oldNode) for restoration in another function. To replace the UL node with an OL, the replace() function creates a new, empty OL element and assigns the myOL ID to it. Next, the children (LI elements) are stored en masse as an array in the variable innards. The child nodes are then inserted into the empty OL element, using the insertBefore() method. Notice that as each child element from the innards array is inserted into the OL element, the child ele- ment is removed from the innards array. That’s why the loop to insert the child nodes is a while loop that constantly inserts the first item of the innards array to the new element. Finally, the replaceNode() method puts the new node in the old node’s place, while the old node (just the UL element) is stored in oldNode. The restore() function operates in the inverse direction of the replace() func- tion. The same juggling of nested child nodes is required. elementObject.replaceNode() CD-211 Appendix F ✦ Examples from Parts III and IV The third button invokes the swap() function, whose script exchanges the first and last nodes. The swapNode() method, like the others in this discussion, operates from the point of view of the node. Therefore, the method is attached to one of the swapped nodes, while the other node is specified as a parameter. Because of the nature of the OL element, the number sequence remains fixed but the text of the LI node swaps. To demonstrate the removeNode() method, the fourth function removes the last child node of the list. Each call to removeNode() passes the true parameter to guarantee that the text nodes nested inside each LI node are also removed. Experiment with this method by setting the parameter to false (the default). Notice how the parent–child relationship changes when you remove the LI node. Listing 15-31: Using Node-Related Methods <HTML> <HEAD> <TITLE>removeNode(), replaceNode(), and swapNode() Methods</TITLE> <SCRIPT LANGUAGE=”JavaScript”> // store original node between changes var oldNode // replace UL node with OL function replace() { if (document.all.myUL) { var newNode = document.createElement(“OL”) newNode.id = “myOL” var innards = document.all.myUL.children while (innards.length > 0) { newNode.insertBefore(innards[0]) } oldNode = document.all.myUL.replaceNode(newNode) } } // restore OL to UL function restore() { if (document.all.myOL && oldNode) { var innards = document.all.myOL.children while (innards.length > 0) { oldNode.insertBefore(innards[0]) } document.all.myOL.replaceNode(oldNode) } } Continued elementObject.replaceNode() . LANGUAGE= JavaScript > function showContextMenu() { contextMenu.setCapture() contextMenu.style.pixelTop = event.clientY + document.body.scrollTop contextMenu.style.pixelLeft = event.clientX + document.body.scrollLeft contextMenu.style.visibility. Methods</TITLE> <SCRIPT LANGUAGE= JavaScript > // store original node between changes var oldNode // replace UL node with OL function replace() { if (document.all.myUL) { var newNode = document.createElement(“OL”) newNode.id. UL function restore() { if (document.all.myOL && oldNode) { var innards = document.all.myOL.children while (innards.length > 0) { oldNode.insertBefore(innards[0]) } document.all.myOL.replaceNode(oldNode) } } Continued elementObject.replaceNode()