305Chapter 15Generic HTML Element ObjectsWhen a user clicks the mouse button, different things happen depending on whether eventcapture is enabled. Without event capture, the clickevent bubbles up from wherever itoccurred to the onclickevent handler in the bodyelement. (An alert dialog box displays tolet you know when the event reaches the body.) But with event capture turned on (the con- text menu is showing), the handleClick()event handler takes over to apply the desiredchoice whenever the click is atop one of the context menu items. For all clickevents han- dled by this function, the context menu is hidden and the clickevent is cancelled from bub- bling up any higher (no alert dialog box appears). This takes place whether the user makes achoice in the context menu or clicks anywhere else on the page. In the latter case, all youneed is for the context menu to go away like the real context menu does. For added insur- ance, the onlosecaptureevent handler hides the context menu when a user performs any ofthe actions just listed that cancel capture. Listing 15-30: Using setCapture() and releaseCapture()

mergeAttributes() Method

Related Items:clearAttributes(), cloneNode(), removeAttributes()methods. elementObject.mergeAttributes()

300Part IIIDocument Objects Referenceitem(index| index [, subIndex]) Returns:Object. Compatibility:WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ The item()method works with most objects that are themselves collections of otherobjects. In W3C DOM terminology, these kinds of objects are known as named node lists(forobjects such as nodes and attributes) or HTML collections(for objects such as elements of aform). You may call the item()method with a single numeric parameter that is the indexvalue of the desired object within the collection. If you know the index number of the item, you can use JavaScript array syntax instead. The following two statements return the sameobject reference: document.getElementById( myTable ).childNodes.item(2) document.getElementById( myTable ).childNodes[2] The method also supports a string of the ID of an object within the collection. (Integer valuesare required for the attributes, rules, and TextRectangleobjects, however.) Additionally, if the collection has more than one object with the same ID (never a good idea except whennecessary), a second numeric parameter enables you to select which identically namedgroup you want (using zero-based index values within that subgroup). This obviously doesnot apply to collections, such as attributes and rules, which have no ID associated with them. The method returns a reference to the object specified by the parameters. ExampleUse The Evaluator (Chapter 13) to experiment with the item()method. Type the followingstatements into the topmost text box and view the results for each. W3C and IE5: document.getElementById( myP ).childNodes.lengthdocument.getElementById( myP ).childNodes.item(0).datadocument.getElementById( myP ).childNodes.item(1).nodeNameW3C, IE4, and IE5: document.forms[1].elements.item(0).typeIE4 and IE5: document.all.item( myP ).outerHTMLmyP.outerHTMLIn the last two examples, both statements return the same string. The first example is helpfulwhen your script is working with a string version of an object s name. If your script alreadyknows the object reference, the second approach is more efficient and compact. Related Items:All object element properties that return collections (arrays) of other objects. mergeAttributes( sourceObject ) Returns:Nothing. Compatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The mergeAttributes()method is a convenient way to propagate attributes in newly cre- ated elements without painstakingly adding attributes one at a time. Once you have an objectwhose attributes can function as a prototype for other elements, those attributes (except forthe idattribute) can be applied to a newly created element instantaneously. elementObjectCollection.item()

299Chapter 15Generic HTML Element Objectsvar insertPoint = (isNaN(choice)) ? null : document.getElementById( myUL ).childNodes[choice]; document.getElementById( myUL ).insertBefore(newChild, insertPoint); } }

insertBefore() Method

1. Originally the First Item
2. Originally the Second Item
3. Originally the Third Item

Related Items:appendChild(), replaceChild(), removeChild(), insertAdjacentElement()methods. isSupported( feature , version ) Returns:Boolean. Compatibility:WinIE-, MacIE-, NN6+, Moz1+, Safari1+ The isSupported()method returns trueif the current node supports required portions of the specified W3C DOM module and version; it returns falseotherwise. The first parameteraccepts any of the following case-sensitive DOM module name strings: Core, XML, HTML, Views, StyleSheets, CSS, CSS2, Events, UIEvents, MouseEvents, MutationEvents, HTMLEvents, Range, Traversal. The second parameter accepts a string representation of the major andminor DOM module version, such as 2.0 for DOM Level 2. ExampleUse The Evaluator (Chapter 13) to experiment with the isSupported()method. If you havemultiple versions of NN6 or later and Mozilla, try the following (and others) to see how thesupport for various modules has evolved: document.body.isSupported( CSS , 2.0 ) document.body.isSupported( CSS2 , 2.0 ) document.body.isSupported( Traversal , 2.0 ) If you have access to Safari, try the same methods there to see the differences in modulessupported compared to Mozilla-based browsers. elementObject.isSupported()

298Part IIIDocument Objects ReferenceYou should also see what happens when the string to be inserted with insertAdjacentText() contains HTML tags. Reload The Evaluator and enter the following two statements into the top- most field, evaluating each one in turn: a = Important News! myP.insertAdjacentText( afterBegin , a) The HTML is not interpreted but is displayed as plain text. There is no object named myBafter executing this latest insert method. Related Items:innerText, innerHTML, outerText, outerHTMLproperties; insertAdjacentElement(), replaceAdjacentText()methods. insertBefore(newChildNodeObject, referenceChildNode) Returns:Nodeobject. Compatibility:WinIE5+, MacIE5+, NN6+, Moz1+, Safari1+ The insertBefore()method is the W3C DOM syntax for inserting a new child node into anexisting element. Node references for both parameters must be valid Nodeobjects (includingthose that document.createElement()generates). The behavior of this method might seem counterintuitive at times. If you include the secondparameter (a reference to an existing child node of the current element optional in IE), thenew child node is inserted before that existing one. But if you omit the second parameter (or itsvalue is null), the new child node is inserted as the last child of the current element inwhich case, the method acts the same as the appendChild()method. The true power of thismethod is summoned when you specify that second parameter; from the point of view of a par- ent element, you can drop a new child into any spot among its existing children. If an insertednode already exists in the document tree, it will be removed from its previous position. Bear in mind that the insertBefore()method works from a parent element. InternetExplorer provides additional methods, such as insertAdjacentElement(), to operate fromthe perspective of what will become a child element. ExampleListing 15-28 demonstrates how the insertBefore()method can insert child elements (li) inside a parent (ol) at different locations, depending on the second parameter. A text boxenables you to enter your choice of text and/or HTML for insertion at various locations withinthe olelement. If you don t specify a position, the second parameter of insertBefore()ispassed as null meaning that the new child node is added to the end of the existing children. But choose a spot from the select list where you want to insert the new item. The value of eachselectlist option is an index of one of the first three child nodes of the olelement. Listing 15-28: Using the insertBefore() Method