Introducing the DOM


Your Web browser sees an HTML document as a tree of nodes that support properties and methods you can use to navigate or edit that page in real time. Those properties and methods are specified in the HTML Document Object Model, or DOM.

Note 

The DOM is the creation of the World Wide Web Consortium (W3C). For the rigorous DOM details, take a look at http://www.w3.org/DOM/.

For example, here’s the code for an innocent-looking Web page:

 <html>   <head>     <title>       Hello from HTML     </title>   </head>    <body>     <h1>        Hello from HTML!     </h1>   </body> <html>

Here, everything is a node-from the elements you see to the text (which is stored in text nodes). Following is the tree of nodes corresponding to this Web page that your browser sees:

                             <html>                                 |                 ---------------------------------                |                                |                |                                |             <head>                            <body>                |                                |                |                                |             <title>                            <h1>                |                                |                |                                |       Hello from HTML                   Hello from HTML!

JavaScript has built-in properties you can use to work with the nodes in Web documents like this one. They are

  • attributes: Attributes by this node

  • childNodes: Array of child nodes

  • documentElement: The document element

  • firstChild: First child node

  • lastChild: Last child node

  • localName: Local name of the node

  • name: Name of the node, with namespace

  • nextSibling: Next sibling node

  • nodeName: Name of the node

  • nodeType: Node type

  • nodeValue: Value of the node

  • previousSibling: Previous sibling node

You’ll see how to use these properties in JavaScript later in this chapter and in Chapter 9. Note in particular that the nodeType property holds the type of a node, which is given by number in HTML documents:

  • 1 Element

  • 2 Attribute

  • 3 Text node

Here are the various node types in the HTML document you saw earlier:

                     <html> [Element node]                       |            -----------------------------------           |                                  |           |                                  |        <head> [Element node]               <body> [Element node]          |                                  |          |                                  |        <title> [Element node]             <h1> [Element node]          |                                  |          |                                  |    Hello from HTML [Text node]       Hello from HTML! [Text node]

Besides these properties, nodes support the following methods:

  • replaceNode(a, b): Replaces node b with node a

  • insertBefore(a, b): Inserts node a before node b

  • appendChild(a): Appends a child, a, to the node that you call this method on.

How do you get a node to work with JavaScript? You can use the documentElement property, which returns the node corresponding to the <html> element, and use properties such as nextSibling, lastChild, firstChild, and so on to navigate to the node you want. Or you can use a method such as document.getElementById to create a node object by accessing elements by ID value.

Now, how about putting this discussion to work in an Ajax example?



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

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