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.
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!
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
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.
Now, how about putting this discussion to work in an Ajax example?