Saturday, November 19, 2005
Blog Entry #22
<form name="A"><input name="B"></form>
They were at one time. Joe doesn't provide any references in his work, but I would bet that his graphic above is derived from Netscape's "Navigator Object Hierarchy", pictured below:
(As Frank Zappa once said in another context:
"A novelist invents a character. If the character is a good one, he takes on a life of his own. Why should he get to go to only one party? He could pop up anytime in a future novel."
- The Real Frank Zappa Book, p 139)
The best discussion of the DOM that I've seen on the Web is by the Web Developer's Virtual Library (WDVL), whose "The Document Object Model Dissected" is very readable and worth reading, even if it is a bit dated and its links are mostly broken. At HTML Goodies, the DOM is briefly mentioned in Script Tip #23, but is otherwise not discussed. Weekend Silicon Warriors without a 'global programming perspective' are likely to find the official W3C DOM Level 1 Specification "a long, hard slog".
The prescriptive hierarchy of objects, and the command statements derived therefrom, originated with Netscape but are now also a part of the DOM. These statements - as we have seen in previous posts, as discussed at the start of this entry, and as noted in Primer #8 - take the form:
in which objectC is smaller than and contained by objectB, and is a property of objectB; and objectB is smaller than and contained by objectA, and is a property of objectA. Been there, done that.
We have already covered much of Primer #8's material:
• We discussed the window object, including its various 'aliases', in Blog Entry #18. In the "Deconstructing the Hierarchy of Objects" section of Primer #8, Joe states that "Windows [sic] is just an Object", but as we have seen, there is indeed a window property of the window object.
• The syntax for Image object command statements was given in Blog Entry #15. We didn't write the Image src (not "SCR") property in that entry, but we'll do so in the future.
• We dealt with the Location object and location.href statements in Blog Entry #19. Joe insinuates that the document and Location objects are related because they are at the same "level" of the object hierarchy, but this is only indirectly true in that both of these objects pertain to and are properties of the same parent window object.
• As far back as Blog Entry #2, we noted that a document is an object; that the document object is a property of the window object is discussed in the "Parts of a Window" section of Blog Entry #18.
• We treated the dual property/object nature of forms in Blog Entry #16.
• The command statements and value properties of form control objects were thrashed out in some detail in Blog Entry #17.
The Value Property
In Primer #8, Joe describes the value property of a form control object "as a reading of what something is or is not at a specific time." This vague statement is fair enough as far as it goes, but Joe makes some other comments about form control values that need to be clarified:
whose coding is:
Enter your zip code, please: <input name="mytext">
<!-- Note that for an input element, the default type is "text". -->
A document.myform.mytext.value.length command would return, and thus check the correctness of, the number of digits entered by the user.
(*An even-more-condensed "Hierarchy of Objects" with a value node does appear in the Primer #8 Assignment.)
(2) "A checkbox can have a value of on or off depending if it's been clicked." Actually, as we saw in Blog Entry #17, the on/off nature of a radio button or checkbox is determined by the Boolean checked property, which is unrelated to the value property of these controls.
(3) "A TEXT field can have a value of hidden if you don't want the user to see it." Joe is referring here to the Hidden object, which corresponds to an <input> element whose type, and not value, is "hidden".
Each of the hierarchy references that we have seen thus far has terminated with a property; none has ended with a method. Let's wrap up this entry with demonstrations of the now-also-part-of-the-DOM focus( ) and select( ) methods, which are methods of the text, textarea, and password controls and which, in Blog Entry #10 in the midst of our introduction to event handlers, I said I would "illustrate...when we discuss the object hierarchy statements of forms in Primer #8."
The code for this is:
<input name="mytext1" value="This is text box #1.">
<input name="mytext2" value="This is text box #2.">
<input type="button" value="Click here to bring focus to text box #1." onclick="document.myform1.mytext1.focus( );"><br>
<input type="button" value="Click here to select the value of text box #2." onclick="document.myform1.mytext2.select( );">
(Perhaps we should have done this back in Blog Entry #17, but better now than never, eh?)