From HTML Attributes to JavaScript Properties

Take a look at this HTML element, a text field:

 <INPUT TYPE="TEXT" NAME="text1" ID="text1" VALUE="Type here!">

Here, the VALUE attribute holds the original text in the text field. To give you access to items such as this text in scripts, HTML attributes became JavaScript properties. The case of these properties were changed to match the Java naming convention, which means the VALUE attribute of this text field is accessible as the value property of the text field's JavaScript object. Here's how I access that text, using the value property, in a web page when the user clicks a button:

 <HTML>      <HEAD>          <TITLE>              Accessing HTML Elements          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function getText()              {  alert("The text is " + document.form1.text1.value)  }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Accessing HTML Elements</H1>          <FORM NAME="form1">              <INPUT TYPE="TEXT" NAME="text1" ID="text1" VALUE="Type here!">              <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="getText()">          </FORM>      </BODY>  </HTML>

You can see the results of this code in Figure 5.1.

Figure 5.1. Using a JavaScript property.

graphics/05fig01.gif

That's how it workedHTML attributes became JavaScript properties you could access in code; the STYLE attribute became the style property, and so on. Hyphenated attributes, such as the LIST-STYLE attribute, use the Java naming convention, so LIST-STYLE becomes the listStyle property in JavaScript. (You can't use hyphens in JavaScript names .)

You can find JavaScript's core HTML properties in Table 5.2. (Not all properties are supported by all browsers, of course.) These properties are shared by nearly all HTML elements, as well as many of the big browser objects, and we're going to cover them in this chapter.

Table 5.2. JavaScript's Core HTML Properties

Properties
`accessKey`	`all`	`attributes`
`begin`	`behaviorUrns`	`canHaveChildren`
`canHaveHTML`	`childNodes`	`children`
`className`	`clientHeight`	`clientLeft`
`clientTop`	`clientWidth`	`contentEditable`
`currentStyle`	`dataFld`	`dataFormatAs`
`dataSrc`	`dir`	`disabled`
`document`	`end`	`filters`
`firstChild`	`hasMedia`	`height`
`hideFocus`	`id`	`innerHTML`
`innerText`	`isContentEditable`	`isDisabled`
`isMultiLine`	`isTextEdit`	`lang`
`language`	`lastChild`	`length`
`localName`	`namespaceURI`	`nextSibling`
`nodeName`	`nodeType`	`nodeValue`
`offsetHeight`	`offsetLeft`	`offsetParent`
`offsetTop`	`offsetWidth`	`onOffBehavior`
`outerHTML`	`outerText`	`ownerDocument`
`parentElement`	`parentNode`	`parentTextEdit`
`prefix`	`previousSibling`	`readyState`
`recordNumber`	`runtimeStyle`	`scopeName`
`scrollHeight`	`scrollLeft`	`scrollTop`
`scrollWidth`	`sourceIndex`	`style`
`syncMaster`	`tabIndex`	`tagName`
`tagUrn`	`timeContainer`	`title`
`uniqueID`

In fact, a number of HTML elements don't have any properties, methods , or events beyond the core set, and you'll find them in Table 5.3.

Table 5.3. Core HTML Elements

Properties
`ACRONYM`	`ADDRESS`	`B`	`BIG`
`CENTER`	`CITE`	`CODE`	`DEL`
`DFN`	`DIV`	`EM`	`HR`
`HTML`	`I`	`INS`	`KBD`
`LISTING`	`NOBR`	`P`	`PLAINTEXT`
`PRE`	`RT`	`RUBY`	`S`
`SAMP`	`SMALL`	`SPAN`	`STRIKE`
`STRONG`	`SUB`	`SUP`	`TT`
`U`	`VAR`	`WBR`	`XMP`

As you can see in Table 5.2, there are many core HTML properties, and their functionality is all over the map, covering many different aspects of programming. Because these properties are so scattered , it's best to just cover them one after the other, instead of trying to collect them into larger programming topicsno larger programming topics would work. So here it goesthe rest of this chapter is all about the core HTML properties you see in Table 5.2, one after the other, and I'll cram in as many examples as I can. Just skip any material you're not interested in now, and come back to it later when you need information on a specific core property.