HTML Elements | Inside JavaScript

Since Internet Explorer 4.0, all HTML elements in a web page are regarded as browser objects as well, just like the others we've been discussing in this chapter. For example, we've already seen this code in this and the preceding chapter, where I'm treating a text field named result as an object, and using its value property to assign text to that text field (see Figure 3.15):

 <HTML>      <HEAD>          <TITLE>              Using the eval Function          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function evaluator()   {   document.forms[0].result.value   = eval(document.forms[0].expression.value)   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using the eval Function</H1>          <FORM>  <INPUT TYPE="TEXT" NAME="expression">   <INPUT TYPE="BUTTON" ONCLICK="evaluator()" VALUE="  =  ">   <INPUT TYPE="TEXT" NAME="result">  </FORM>      </BODY>  </HTML>

Treating all HTML elements as objects makes for an immense number of new objects, all with their own properties, methods , and events. You can see all the elements supported in HTML 4.01, and what they do, in Table 4.11.

Table 4.11. The HTML 4.10 Elements

Element	Means
`<!-->`	Comments and server-side includes
`<!DOCTYPE>`	Starting an HTML page
`<A>`	Creating a hyperlink or anchor
`<ABBR>`	Displaying abbreviations
`<ACRONYM>`	Displaying acronyms
`<ADDRESS>`	Displaying an address
`<APPLET>`	Embedding applets in web pages
`<AREA>`	Creating clickable regions in image maps
`<B>`	Creating bold text
`<BASE>`	Setting the base for hyperlinks
`<BASEFONT>`	Setting the base font
`<BDO>`	Overriding the bidirectional character algorithm
`<BGSOUND>`	Adding background sounds
`<BIG>`	Creating big text
`<BLINK>`	Making text blink
`<BLOCKQUOTE>`	Indenting quotations
`<BODY>`	Creating a web page's body
`<BR>`	Inserting line breaks
`<BUTTON>`	Creating a customizable button
`<CAPTION>`	Creating a table caption
`<CENTER>`	Centering text
`<CITE>`	Creating a citation
`<CODE>`	Displaying program code
`<COL>`	Defining a column
`<COLGROUP>`	Grouping and formatting columns
`<DD>`	Creating definition list definitions
`<DEL>`	Displaying text as deleted
`<DFN>`	Defining new terms
`<DIR>`	Deprecated list
`<DIV>`	Formatting block text
`<DL>`	Creating definition lists
`<DT>`	Creating definition list terms
`<EM>`	Emphasizing text
`<EMBED>`	Embedding multimedia and plug-ins in a web page
`<FIELDSET>`	Grouping form elements
`<FONT>`	Specifying a font
`<FORM>`	Creating HTML forms
`<FRAME>`	Creating frames
`<FRAMESET>`	Containing frames
`<H1>` through `<H6>`	Creating web page headings
`<HEAD>`	Creating a web page's head
`<HR>`	Creating horizontal rules
`<HTML>`	Starting an HTML page
`<I>`	Creating italic text
`<IFRAME>`	Creating inline or floating frames
`<ILAYER>`	Creating inline layers
`<IMG>`	Adding an image to a web page
`<INPUT TYPE=BUTTON>`	Creating buttons
`<INPUT TYPE=CHECKBOX>`	Creating check boxes
`<INPUT TYPE=FILE>`	Creating file input for a form
`<INPUT TYPE=HIDDEN>`	Creating hidden data
`<INPUT TYPE=IMAGE>`	Creating image submit buttons
`<INPUT TYPE=PASSWORD>`	Creating password controls
`<INPUT TYPE=RADIO>`	Creating radio buttons
`<INPUT TYPE=RESET>`	Creating reset buttons
`<INPUT TYPE=SUBMIT>`	Creating submit buttons
`<INPUT TYPE=TEXT>`	Creating text fields
`<INS>`	Displaying inserted text
`<ISINDEX>`	Using an index
`<KBD>`	Displaying text the user is to type
`<KEYGEN>`	Processing secure transactions
`<LABEL>`	Labeling form elements
`<LAYER>`	Arranging text in layers
`<LEGEND>`	Creating a legend for form elements
`<LI>`	Creating list items
`<LINK>`	Setting link information
`<MAP>`	Creating client-side image maps
`<MARQUEE>`	Displaying text in a scrolling marquee
`<MENU>`	Deprecated list
`<META>`	Giving more information about your web page
`<MULTICOL>`	Creating columns
`<NOBR>`	Avoiding line breaks
`<NOEMBED>`	Handling browsers that don't handle embedding
`<NOLAYER>`	Handling browsers that don't handle layers
`<NOSCRIPT>`	Handling browsers that don't handle JavaScript
`<OBJECT>`	Placing an object into a web page
`<OL>`	Creating ordered lists
`<OPTGROUP>`	Creating a select control item group
`<OPTION>`	Creating a select control item
`<P>`	Creating paragraphs
`<PARAM>`	Specifying a parameter
`<PRE>`	Displaying preformatted text
`<Q>`	Displaying short quotations
`<RT>`	Creating ruby text
`<RUBY>`	Creating rubies
`<S>` and `<STRIKE>`	Striking text out
`<SAMP>`	Displaying sample program output
`<SCRIPT>`	Creating a script
`<SELECT>`	Creating a select control
`<SERVER>`	Running server-side JavaScript scripts
`<SMALL>`	Creating small text
`<SPACER>`	Controlling horizontal and vertical spacing
`<SPAN>`	Formatting inline text
`<STRONG>`	Strongly emphasizing text
`<STYLE>`	Using embedded style sheets
`<SUB>`	Creating subscripts
`<SUP>`	Creating superscripts
`<TABLE>`	Creating a table
`< TBODY >`	Creating a table body when grouping rows
`<TD>`	Creating table data
`<TEXTAREA>`	Creating text areas
`<TFOOT>`	Creating a table foot when grouping rows
`<TH>`	Creating table headings
`<THEAD>`	Creating a table head when grouping rows
`<TITLE>`	Giving a web page a title
`<TR>`	Creating a table row
`<TT>`	Creating "teletype" text
`<U>`	Underlining text
`<UL>`	Creating unordered lists
`<VAR>`	Displaying program variables and arguments
`<WBR>`	Allowing word breaks
`<XML>`	Accessing XML data with an XML data island

It would be very difficult to list and discuss all the properties, methods, and events for each of the many elements you see in Table 4.11 in this book, because we would be talking about well more than 10,000 different items. However, there's a great deal of overlap among these items, because all these HTML elements support what I'll call JavaScript's core set of HTML properties, methods, and events. You can find those core properties, methods, and events in Table 4.12. We'll be covering them in the next two chapters (in fact, there are some exceptions to the core properties, methods, and events in Table 4.12some HTML elements don't support some of these properties, methods and events, and I'll note them on a case-by-case basis in the next two chapters).

Table 4.12. Core HTML Properties, Methods, and Events

Properties	Methods	Events
`accessKey`	`addBehavior`	`onactivate`
`all`	`addEventListener`	`onbeforeactivate`
`attributes`	`appendChild`	`onbeforecopy`
`begin`	`applyElement`	`onbeforecut`
`behaviorUrns`	`attachEvent`	`onbeforedeactivate`
`canHaveChildren`	`blur`	`onbeforeeditfocus`
`canHaveHTML`	`clearAttributes`	`onbeforepaste`
`childNodes`	`click`	`onblur`
`children`	`cloneNode`	`onclick`
`className`	`componentFromPoint`	`oncontextmenu`
`clientHeight`	`contains`	`oncontrolselect`
`clientLeft`	`detachEvent`	`oncopy`
`clientTop`	`dispatchEvent`	`oncut`
`clientWidth`	`dragDrop`	`ondblclick`
`contentEditable`	`fireEvent`	`ondeactivate`
`currentStyle`	`focus`	`ondrag`
`dataFld`	`getAdjacentText`	`ondragend`
`dataFormatAs`	`getAttribute`	`ondragenter`
`dataSrc`	`getAttributeNode`	`ondragleave`
`dir`	`getBoundingClientRect`	`ondragover`
`disabled`	`getClientRects`	`ondragstart`
`document`	`getElementsByTagName`	`ondrop`
`end`	`getExpression`	`onfilterchange`
`filters`	`hasChildNodes`	`onfocus`
`firstChild`	`insertAdjacentElement`	`onfocusin`
`hasMedia`	`insertAdjacentHTML`	`onfocusout`
`height`	`insertAdjacentText`	`onhelp`
`hideFocus`	`insertBefore`	`onkeydown`
`id`	`item`	`onkeypress`
`innerHTML`	`mergeAttributes`	`onkeyup`
`innerText`	`normalize`	`onlosecapture`
`isContentEditable`	`releaseCapture`	`onmousedown`
`isDisabled`	`removeAttribute`	`onmouseenter`
`isMultiLine`	`removeAttributeNode`	`onmouseleave`
`isTextEdit`	`removeBehavior`	`onmousemove`
`lang`	`removeChild`	`onmouseout`
`language`	`removeEventListener`	`onmouseover`
`lastChild`	`removeExpression`	`onmouseup`
`length`	`removeNode`	`onmousewheel`
`localName`	`replaceAdjacentText`	`onmove`
`namespaceURI`	`replaceChild`	`onmoveend`
`nextSibling`	`replaceNode`	`onmovestart`
`nodeName`	`scrollIntoView`	`onpaste`
`nodeType`	`setActive`	`onpropertychange`
`nodeValue`	`setAttribute`	`onreadystatechange`
`offsetHeight`	`setAttributeNode`	`onresize`
`offsetLeft`	`setCapture`	`onresizeend`
`offsetParent`	`setExpression`	`onresizestart`
`offsetTop`	`supports`	`onselectstart`
`offsetWidth`	`swapNode`	`ontimeerror`
`onOffBehavior`	`tags`
`outerHTML`	`urns`
`outerText`
`ownerDocument`
`parentElement`
`parentNode`
`parentTextEdit`
`prefix`
`previousSibling`
`readyState`
`recordNumber`
`runtimeStyle`
`scopeName`
`scrollHeight`
`scrollLeft`
`scrollTop`
`scrollWidth`
`sourceIndex`
`style`
`syncMaster`
`tabIndex`
`tagName`