CD-200 Part VI . Appendixes Example Use The Evaluator (Chapter 13) to experiment with the item() method. Type the following statements into the topmost text box and view the results for each: NN6 and IE5 document.getElementById( myP ).childNodes.length document.getElementById( myP ).childNodes.item(0).data document.getElementById( myP ).childNodes.item(1).nodeName NN6, IE4, and IE5 document.forms[1].elements.item(0).type IE4 and IE5 document.all.item( myP ).outerHTML myP.outerHTML In the last two examples, both statements return the same string. The first example is helpful when your script is working with a string version of an object s name. If your script already knows the object reference, then the second approach is more efficient and compact. mergeAttributes( sourceObject ) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example Listing 15-29 demonstrates the usage of mergeAttributes()in the process of replicating the same form input field while assigning a unique ID to each new field. So you can see the results as you go, I display the HTML for each input field in the field. The doMerge() function begins by generating two new elements: a P and an INPUT element. Because these newly created elements have no properties associated with them, a unique ID is assigned to the INPUT element via the uniqueIDproperty. Attributes from the field in the source code (field1) are merged into the new INPUT element. Thus, all attributes except name and idare copied to the new element. The INPUT element is inserted into the P element, and the P element is appended to the document s form element. Finally, the outerHTML of the new element is displayed in its field. Notice that except for the NAME and ID attributes, all elementObject.mergeAttributes()
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision J2ee Web Hosting services.

CD-199Appendix F . Examples from Parts III and IV

insertBefore() Method

---

Enter text or HTML for a new list item:

Before which existing item? None specified 1 2 3

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

item(index| index [,subIndex]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility elementObjectCollection.item()
In case you need affordable webhost to host your website, our recommendation is ecommerce web host services.

CD-198 Part VI . Appendixes Notice that there is no space after the exclamation mark of the inserted HTML. But to prove that the inserted HTML is genuinely part of the document s object model, you can now insert the text of a space after the B element whose ID is myB: myB.insertAdjacentText( afterEnd , ) Each time you evaluate the preceding statement (by repeatedly clicking the Evaluate button or pressing Enter with the cursor in the topmost field), an additional space is added. You 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 topmost 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. insertBefore(newChildNodeObject[, referenceChildNode]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example Listing 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 box enables you to enter your choice of text and/or HTML for insertion at various locations within the OL element. If you don t specify a position, the second parameter of insertBefore()is passed 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 each SELECT list option is an index of one of the first three child nodes of the OL element. Listing 15-28: Using the insertBefore() Method elementObject.insertBefore()
Looking for affordable and reliable webhost to host and run your business application? Then look no more and go to servlet web hosting services.

CD-197Appendix F . Examples from Parts III and IV Now, insert this element before the start of the myPobject: myP.insertAdjacentElement( beforeBegin , a) Notice that you have not assigned an idproperty value to the new element. But because the element was inserted by reference, you can modify the inserted object by changing the object stored in the avariable: a.style.color = red The inserted element is also part of the document hierarchy, so you can access it through hierarchy references such as myP.previousSibling. The parent element of the newly inserted element is the BODY. Thus, you can inspect the current state of the HTML for the rendered page by entering the following statement into the topmost text box: document.body.innerHTML If you scroll down past the first form, you can find the

element that you added along with the STYLEattribute. insertAdjacentHTML( location , HTMLtext ) insertAdjacentText( location , text ) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example Use The Evaluator (Chapter 13) to experiment with these two methods. The example here demonstrates the result of employing both methods in an attempt to add some HTML to the beginning of the myP element. Begin by assigning a string of HTML code to the global variable a: a = Important News! Because this HTML is to go on the same line as the start of the myP paragraph, use the afterBeginparameter for the insert method: myP.insertAdjacentHTML( afterBegin , a) elementObject.insertAdjacentHTML()
If you are looking for cheap and quality webhost to host and run your website check Jboss Web Hosting services.

CD-196 Part VI . Appendixes The response is false because text fragments do not have any nested nodes. But check out the EM element, which is the second child node of the myPelement: document.getElementById( myP ).childNodes[1].hasChildNodes() The answer is true because the EM element has a text fragment node nested within it. Sure enough, the statement document.getElementById( myP ).childNodes[1].childNodes.length yields a node count of 1. You can also go directly to the EM element in your references: document.getElementById( myEM ).hasChildNodes() document.getElementById( myEM ).childNodes.length If you want to see the properties of the text fragment node inside the EM element, enter the following into the lower text box: document.getElementById( myEM ).childNodes[0] You can see that the dataand nodeValue properties for the text fragment return the text all . insertAdjacentElement( location , elementObject) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example Use The Evaluator (Chapter 13) to experiment with the insertAdjacentElement() method. The goal of the experiment is to insert a new H1 element above the myPelement. All actions require you to enter a sequence of statements in the topmost text box. Begin by storing a new element in the global variable a: a = document.createElement( H1 ) Give the new object some text: a.innerText = New Header elementObject.insertAdjacentElement()
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

CD-195Appendix F . Examples from Parts III and IV document.body.getElementsByTagName( DIV ).length document.getElementById( myTable ).getElementsByTagName( TD ).length Because the getElementsByTagName() method returns an array of objects, you can use one of those returned values as a valid element reference: document.getElementsByTagName( FORM )[0].getElementsByTagName( INPUT ).length getExpression( attributeName ) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example See Listing 15-32 for the setExpression()method. This listing demonstrates the kinds of values returned by getExpression(). hasChildNodes() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example Use The Evaluator (Chapter 13) to experiment with the hasChildNodes() method. If you enter the following statement into the topmost text box: document.getElementById( myP ).hasChildNodes() the returned value is true. You can find out how many nodes there are by getting the length of the childNodes array: document.getElementById( myP ).childNodes.length This expression reveals a total of three nodes: the two text nodes and the EM element between them. Check out whether the first text node has any children: document.getElementById( myP ).childNodes[0].hasChildNodes() elementObject.hasChildNodes()
From our experience, we can recommend PHP5 Web Hosting services, if you need affordable webhost to host and run your web application.

CD-194 Part VI . Appendixes Listing 15-27 (continued)

Because the z-indexstyle property of the hiliterelement is set to -1, the element always appears beneath the primary content on the page. If the user selects a line number beyond the current number of lines in the main element, the hiliter element is hidden. getClientRects() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example See Listing 15-27, which demonstrates the differences between getClientRects() and getBoundingClientRect() and shows how you can use the two together. getElementsByTagName( tagName ) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility Example Use The Evaluator (Chapter 13) to experiment with the getElementsByTagName() method. Enter the following statements one at a time into the upper text box and study the results: document.body.getElementsByTagName( DIV ) elementObject.getElementsByTagName()
We recommend you use shared web hosting services, because many users agree that it is cheap, reliable and customer-satisfying webhost.

CD-193Appendix F . Examples from Parts III and IV document.all.hiliter.style.pixelWidth = hRight - hLeft document.all.hiliter.style.visibility = visible } else if (n > 0) { alert( The content does not have that many lines. ) document.all.hiliter.style.visibility = hidden } }

getClientRects() and getBoundClientRect() Methods

---

Choose a line to highlight: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Full Width (bounding rectangle)

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco:

• laboris
• nisi
• aliquip ex ea commodo

Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseruntmollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.

Continued elementObject.getBoundingClientRect()
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

CD-192 Part VI . Appendixes invoked for the main element to capture a snapshot of all TextRectangles for the entire element. This array comes in handy when the script needs to get the coordinates of a rectangle for a single line, as chosen in the SELECT element. Whenever the user chooses a number from the SELECT list and the value is less than the total number of TextRectangleobjects in clientRects, the function begins calculating the size and location of the underlying yellow highlighter. When the Full Width checkbox is checked, the left and right coordinates are obtained from the getBoundingClientRect() method because the entire SPAN element s rectangle is the space you re interested in; otherwise, you pull the leftand right properties from the chosen rectangle in the clientRects array. Next comes the assignment of location and dimension values to the hiliter object s styleproperty. The top and bottom are always pegged to whatever line is selected, so the clientRects array is polled for the chosen entry s topand bottom properties. The previously calculated leftvalue is assigned to the hiliterobject s pixelLeftproperty, while the width is calculated by subtracting the leftfrom the right coordinates. Notice that the topand left coordinates also take into account any vertical or horizontal scrolling of the entire body of the document. If you resize the window to a smaller size, line wrapping throws off the original line count. However, an invocation of hilite()from the onResizeevent handler applies the currently chosen line number to whatever content falls in that line after resizing. Listing 15-27: Using getBoundingClientRect()