Java Server Pages, Tomcat, Jsp, J2Ee, Servlets, Struts Blog

85Chapter 14 .Document Object Model Essentials The Object-Oriented W3C DOM If you are familiar with concepts of object-oriented (OO) programming, you will appreciate the OO tendencies in the way the W3C defines the DOM. The Node object includes sets of properties (Table 14-4) and methods (Table 14-6) that are inherited by every object based on the Node. Most of the objects that inherit the Node s behavior have their own properties and/or methods that define their specific behaviors. The following figure shows (in W3C DOM terminology) the inheritance tree from the Node root object. Most items are defined in the Core DOM, while items shown in boldface are from the HTML DOM portion. W3C DOM Node object inheritance tree You can see from the preceding figure that individual HTML elements inherit properties and methods from the generic HTML element, which inherits from the Core Element object, which, in turn, inherits from the basic Node. It isn t important to know the Node object inheritance to script the DOM. But it does help explain the ECMA Script Language Binding appendix of the W3C DOM recommendation, as well as explain how a simple element object winds up with so many properties and methods associated with it. Node +–Document | +–HTMLDocument +–CharacterData | +–Text | | +–CDATASection | +–Comment +–Attr +–Element | +–HTMLElement | +–(Each specific HTML element) +–DocumentType +–DocumentFragment +–Notation +–Entity +–Entity Reference +–ProcessingInstruction The IE5/Windows incomplete implementation of the W3C DOM does not treat the Note document object as a node in the true sense. It has no nodeType property defined for it, nor does the document node appear as the parent node of the HTML node of a page. Even so, the document object remains the root of all references in a page s scripts.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

84 Part III . Document Objects Reference Table 14-5 Properties of Selected Nodes for a Simple HTML Document Properties Nodes document HTML P one and only nodeType 9 1 1 3 nodeName #document HTML P #text nodeValue null null null one and only parentNode null document BODY EM previousSibling null null null null nextSibling null null null null childNodes HTML HEAD This is the (none) BODY EM paragraph on the page. firstChild HTML HEAD This is the null lastChild HTML BODY paragraph on null the page. The nodeType property is an integer that is helpful in scripts that iterate through an unknown collection of nodes. Most content in an HTML document is of type 1 (HTML element) or 3 (text fragment), with the outermost container, the document, of type 9. A node s nodeName property is either the name of the node s tag (for an HTML element) or a constant value (preceded by a # [hash mark] as shown in Table 14-3). And, what may surprise some, the nodeValueproperty is null except for the text fragment node type, in which case the value is the actual string of text of the node. In other words, for HTML elements, the W3C DOM does not expose a container s HTML as a string. It is doubtful that you will use all of the relationship-oriented properties of a node, primarily because there is some overlap in how you can reach a particular node from any other. The parentNode property is important because it is a reference to the current node s immediate container. While the firstChild and lastChild properties point directly to the first and last children inside a container, most scripts generally use the childNodes property with array notation inside a for loop to iterate through child nodes. If there are no child nodes, then the childNodes array has a length of zero.
Please visit Domain Name Hosting services for high quality webhost to host and run your jsp applications.

83Chapter 14 .Document Object Model Essentials Property Value Description IE5/Win IE5/Mac NN6 parentNode Object Reference to next outermost container Yes Yes Yes childNodes Array All child nodes in source order Yes Yes Yes firstChild Object Reference to first child node Yes Yes Yes lastChild Object Reference to last child node Yes Yes Yes previous- Sibling Object Reference to sibling node up in source order Yes Yes Yes nextSibling Object Reference to sibling node next in source order Yes Yes Yes attributes NodeMap Array of attribute nodes No Yes Yes ownerDocument Object Containing document object No Yes Yes namespaceURI String URI to namespace definition (element and attribute nodes only) No No Yes prefix String Namespace prefix (element and attribute nodes only) No No Yes localName String Applicable to namespaceaffected nodes No No Yes You can find all of the properties shown in Table 14-4 that also show themselves Note to be implemented in IE5 or NN6 in Chapter 15 s listing of properties that all HTML element objects have in common. That s because an HTML element, as a type of node, inherits all of the properties of the prototypical node. To help you see the meanings of the key node properties, Table 14-5 shows the property values of several nodes in the simple page shown in Listing 14-1. For each node column, find the node in Figure 14-3 and then follow the list of property values for that node, comparing the values against the actual node structure in Figure 14-3.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

82 Part III . Document Objects Reference Table 14-3 W3C DOM HTML-Related Node Types Type Number nodeName nodeValue Description IE5+ NN6 Element 1 tag name null Any HTML or XML tagged element Yes Yes Attribute 2 attribute name attribute value A name-value attribute pair in an element No Yes Text 3 #text text content A text fragment contained by an element Yes Yes Comment 8 #comment comment text HTML comment No Yes Document 9 #document null Root document object No Yes DocumentType 10 DOCTYPE null DTD specification No Yes Fragment 11 #documentfragment null Series of one or more nodes outside of the document No Yes Applying the node types of Table 14-3 to the node diagram in Figure 14-3, you can see that the simple page consists of one document node, six element nodes, and four text nodes. Node properties A node has many properties, most of which are references to other nodes related to the current node. Table 14-4 lists all properties shared by all node types in DOM Level 2. Table 14-4 Node Object Properties (W3C DOM Level 2) Property Value Description IE5/Win IE5/Mac NN6 nodeName String Varies with node type (see Table 14-3) Yes Yes Yes nodeValue String Varies with node type (see Table 14-3) Yes Yes Yes nodeType Integer Constant representing each type Some Yes Yes
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.

81Chapter 14 .Document Object Model Essentials According to W3C DOM terminology, each container, standalone element (such as a BR element), or text chunk is known as a node a fundamental building block of the W3C DOM. Nodes have parent-child relationships when one container holds another. As in real life, parent-child relationships extend only between adjacent generations, so a node can have zero or more children. However, the number of third-generation nodes further nested within the family tree does not influence the number of children associated with a parent. Therefore, in Listing 14-1, the HTML node has two child nodes, HEAD and BODY, which are siblings that share the same parent. The BODY element has one child (P) even though that child contains three children (two text nodes and an EM element node). If you draw a hierarchical tree diagram of the document in Listing 14-1, it should look like the illustration in Figure 14-3. document +– +– | +–

This is the one and only paragraph on the page.

What you don t see in the listing is a representation of the document object. The document object exists automatically when this page loads into a browser. Importantly, the document object encompasses everything you see in Listing 14-1. Therefore, the document object has a single nested element: the HTML element. The HTML element, in turn, has two nested elements: HEAD and BODY. The HEAD element contains the TITLE element, while the TITLE element contains a chunk of text. Down in the BODY element, the P element contains three pieces: a string chunk, the EM element, and another string chunk.
Looking for affordable and reliable webhost to host and run your business application? Then look no more and go to servlet web hosting services.

79Chapter 14 .Document Object Model Essentials While recent browsers continue to accept the omission of certain end tags (for TD, TR, and LI elements, for instance), it is best to get in the habit of supplying these end tags. If for no other reason, they help you visualize where an element s sphere of influence truly begins and ends. Any element that you intend to script whether to change its content or its style should have an identifier assigned to the element s IDattribute. Form control elements still require NAMEattributes if you submit the form content to a server. But you can freely assign a different identifier to a control s IDattribute. Scripts can use either the IDor the document.formReference.elementName reference to reach a control object. Identifiers are essentially the same as the values you assign to the NAME attributes of form and form input elements. Following the same rules for the NAMEattribute value, an ID identifier must be a single word (no white space), it cannot begin with a numeral (to avoid conflicts in JavaScript), and it should avoid punctuation symbols except for the underscore. While an element can be accessed by numeric index within the context of some surrounding element (such as the BODY), this is a risky practice when content is under construction. Unique identifiers make it much easier for scripts to reference objects and are not affected by changes in content order. New DOM concepts With the W3C DOM come several concepts that may be entirely new to you unless you have worked extensively with the terminology of tree hierarchies. Concepts that have the most impact on your scripting are new ways of referencing elements and nodes. Element referencing Script references to objects in the DOM Level 0 are observed in the W3C DOM for backward compatibility. Therefore, a form input element whose NAME attribute is assigned the value userName is addressed just like it always is: document.forms[0].userName or document.formName.userName But because all elements of a document are exposed to the document object, you can use the new document object method to access any element whose ID is assigned. The method is document.getElementById(), and the sole parameter is a string version of the identifier of the object whose reference you wish to get. To help put this in context with what you may have used with the IE4 object model, consider the following HTML paragraph tag:

…

In IE4+, you can reference this element with var elem = document.all.myParagraph IE4+ also enables you to omit the document.all. portion of the reference although for the sake of script readability (especially by others who want to study the script), I recommend that you use the document.all. prefix.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.

78 Part III . Document Objects Reference The only potential problems you could encounter with your existing code have to do with a handful of properties that used to belong to the documentobject. In the new DOM, four style-related properties of the document object (alinkColor, bgColor, linkColor, and vlinkColor) become properties of the body object (ref erenced as document.body). In addition, the three link color properties pick up new names in the process (aLink, link, vLink). It appears, however, that for now, IE5.x and NN6 maintain backward compatibility with the older document object color properties. Also, note that the DOM specification concerns itself only with the document and its content. Objects such as window, navigator, and screen are not part of the DOM specification through Level 2. Scripters are still at the mercy of browser makers for compatibility in these areas, but the windowobject likely will be added to the W3C DOM in the future. What isn t available As mentioned earlier, the W3C DOM is not simply a restatement of existing browser specifications. Many convenience features of the IE and NN object models do not appear in the W3C DOM. If you develop Dynamic HTML content in IE4+ or NN4, you have to learn how to get along without some of these conveniences. Navigator 4 s experiment with the tag was not successful in the W3C process. As a result, both the tag and the scripting conventions surrounding it do not exist in the W3C DOM. To some scripters relief, the document.layerName ref erencing scenario (even more complex with nested layers) disappears from the object model entirely. A positioned element is treated as just another element that has some special style sheet attributes that enable you to move it anywhere on the page, stack it amid other positioned elements, and hide it from view. Among popular IE4+ features missing from the W3C DOM are the document.all collection of HTML elements and four element properties that facilitate dynamic content: innerHTML, innerText, outerHTML, and outerText. A new W3C way pro vides for acquiring an array of all elements in a document, but generating HTML content to replace existing content or be inserted in a document requires a tedious sequence of statements (see the section New DOM concepts later in this chapter). Netscape, however, has implemented the innerHTMLproperty for HTML element objects in NN6. If you have a lot of legacy IE4 code that uses the other missing prop erties that you want to use for NN6, see the section Simulating IE4 Syntax in NN6 later in this chapter. New HTML practices Exploitation of Dynamic HTML possibilities in both IE4+ and the W3C DOM relies on some HTML practices that may be new to long-time HTML authors. At the core of these practices (espoused by the HTML 4.0 specification) is making sure that all content is within an HTML container of some kind. Therefore, instead of using the

tag as a separator between blocks of running text, surround each paragraph of the running text with a

…

tag set. If you don t do it, the browser treats each

tag as the beginning of a paragraph and ends the paragraph element just before the next

tag or other block-level element.
If you are looking for cheap and quality webhost to host and run your website check Jboss Web Hosting services.

77Chapter 14 .Document Object Model Essentials only to HTML. The HTML portion inherits all the features of the Core DOM, while providing a measure of backward compatibility to object models already implemented in legacy browsers and providing a framework for new features. It is important for veteran scripters to recognize that the W3C DOM does not specify all features from existing browser object models. Many features of the Internet Explorer 4 (and later) object model are not part of the W3C DOM specification. This means that if you are comfortable in the IE environment and wish to shift your focus to writing for the W3C DOM spec, you have to change some practices as highlighted in this chapter. Navigator 4 page authors lose the tag (which is not part of HTML 4.0 and likely will never see the light of day in a standard) as well as the layer object. In many respects, especially with regard to Dynamic HTML applications, the W3C DOM is an entirely new DOM with new concepts that you must grasp before you can successfully script in the environment. By the same token, you should be aware that whereas NN6 goes to great lengths to implement all of DOM Level 1 and most of Level 2, Microsoft (for whatever reason) features only a partial implementation of the W3C DOM through IE5.5. This is true even though Microsoft participated in the W3C DOM working group and had more than ample time to put more of the W3C DOM into IE version 5.5. DOM levels Like most W3C specifications, one version is rarely enough. The job of the DOM working group was too large to be swallowed whole in one sitting. Therefore, the DOM is a continually evolving specification. The timeline of specification releases rarely coincides with browser releases. Therefore, it is very common for any given browser release to include only some of the most recent W3C version. The first formal specification, DOM Level 1, was released well after NN4 and IE4 shipped. The HTML portion of Level 1 includes DOM Level 0. This is essentially the object model as implemented in Navigator 3 (and for the most part in Internet Explorer 3 plug image objects). Perhaps the most significant omission from Level 1 is an event model (it ignores even the simple event model implemented in NN2 and IE3). DOM Level 2 builds on the work of Level 1. In addition to several enhancements of both the Core and HTML portions of Level 1, Level 2 adds significant new sections on the event model, ways of inspecting a document s hierarchy, XML names- paces, text ranges, style sheets, and style properties. What stays the same By adopting DOM Level 0 as the starting point of the HTML portion of the DOM, the W3C provided a way for a lot of existing script code to work even in a W3C DOM-compatible browser. Every object you see in the original object model starting with the documentobject (Figure 14-1) plus the image object are in DOM Level 0. Almost all of the same object properties and methods are also available. More importantly, when you consider the changes to referencing other elements in the W3C DOM (discussed in the next section), we re lucky that the old ways of referencing object such as forms, form elements, and images still work. Had the working group been planning from a clean slate, it is unlikely that the document object would have been given properties consisting of arrays of forms, links, and images.
You need excellent and relaible webhost company to host your web applications? Then pay a visit to Inexpensive Web Hosting services.

76 Part III . Document Objects Reference A DHTML behavior is a chunk of script saved as an external file that defines some action (usually a change of one or more style properties) that you can apply to any kind of element. The goal is to create a reusable component that you can load into any document whose elements require that behavior. The behavior file is known as an HTML component, and the file has an .htc extension. Components are XML documents whose XML tags specify events and event-handling routines for whatever element is assigned that behavior. Script statements in .htc documents are written inside