The Standard DOM

 <  Day Day Up  >  


The W3C standard Document Object Model or DOM should alleviate many of the incompatibilities of the DHTML approach to JavaScript and allow a developer to access the contents of a document in a standard fashion. There will be many levels of the DOM. Level 0 will preserve much of what is considered to be standard JavaScript ¾ that which is supported by Netscape 3 ¾ and Level 1 and Level 2 will allow access to HTML elements and style sheet properties. Today, we can count on support for most of DOM Level 1 and 2 in Internet Explorer browsers and the complete DOM Level 1 and 2 specifications in Mozilla/ Netscape and Opera browsers.

To access an element using the DOM, you use the getElementById method and specify the id attribute value of the object you desire to access. For example, you can access the element using getElementById('para1') . Once the object is returned, you can modify its attributes so getElementById('para1').align would access the align attribute the same way Internet Explorer used para1.align . The following example, which works under Internet Explorer 5 and greater, Netscape 6 and greater, as well as any DOM-compliant browser, is equivalent to the last one and illustrates a standard manipulation of markup using JavaScript:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  The Dynamic Paragraph: DOM Style  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h1 align="center">  The Dynamic Paragraph  </h1>   <hr />   <p id="para1">  I am a dynamic paragraph. Watch me dance!  </p>   <hr />   <form action="#">   <input type="button" value="Right"   onclick="getElementById('para1').align='right';" />   <input type="button" value="Left"   onclick="getElementById('para1').align='left';" />   <input type="button" value="Center"  onclick="getElementById('para1').align='center';" />   </form>   </body>   </html>  

In the previous example, every time the user clicks on the spanned text, the actual value of the align attribute for the <p> tag is manipulated. Of course, if you view the source of the page you won't notice anything, but this is basically what is happening.

The DOM allows not only manipulation of the existing tags within a document, but allows you to change the contents of tags or even add new tags dynamically. For example, the following markup shows how data can be added to a page:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Dynamic Page Demo  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <script type="text/javascript">  <!-- function addText() {  var theString,theElement,insertSpot;   /* create the string */  var theString = document.createTextNode(document.testform.newtext.value);      /* create the br element */  theElement = document.createElement("br");      /* find the div tag and add the string and br */  insertSpot = document.getElementById("div1");  insertSpot.appendChild(theString);  insertSpot.appendChild(theElement); } //-->  </script>   </head>   <body>   <div id="div1">  This is some text.  </div>   <hr />   <form action="#" name="testform" id="testform">  New text:  <input type="text" name="newtext" id="newtext" />   <input type="button" value="Add" onclick="addText()" />   </form>   </body>   </html>  
Note  

In this example, it looks clumsy to create individual elements and text fragments and join them together. The DHTML object model introduced by Internet Explorer relied on innerHTML attributes of an HTML tag such as <div> to perform the same task. While not part of the DOM standard, many browsers support it and developers seem to prefer the simpler syntax.

The previous example shows that with the DOM it is possible to manipulate the very parse tree of an HTML document. Adding elements, deleting elements, and moving elements around the document are all possible using JavaScript and the DOM. Now, if you combine the capability to interact with CSS properties, you can create the interesting effects that many people associate with DHTML.



 <  Day Day Up  >  


HTML & XHTML
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
ISBN: 007222942X
EAN: 2147483647
Year: 2003
Pages: 252
Authors: Thomas Powell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net