Slide 14.6: HTML DOM (Document Object Model)

HTML DOM (Document Object Model)

The HTML DOM defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.

 <html>
  <head><title>
    My title
  </title></head>
  <body>
   <a href="a.php">
    My link
   </a>
   <h1>
    My header
   </h1> 
  </body>
 </html>

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents like HTML and XML:

The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

The DOM is separated into 3 different parts / levels:

Core DOM, a standard model for any structured document
XML DOM, a standard model for XML documents
HTML DOM, a standard model for HTML documents

The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

Demonstration
The following demonstration shows how the script of HTML and JavaScript is displayed on the Web.


<html> <head> <script type="text/javascript"> function insCell( ) { var x=document.getElementById('tr2').insertCell(0); x.innerHTML="John"; } </script> </head> <body> <table border="1"> <tr id="tr1"><th>Firstname</th><th>Lastname</th></tr> <tr id="tr2"><td>Peter</td><td>Griffin</td></tr> </table><br /> <input type="button" onclick="insCell( )" value="Insert cell"> </body> </html>