dom model in html code example

Example 1: what is document object

document.anchors			Returns all <a> elements that have a name attribute	1
document.applets			Returns all <applet> elements (Deprecated in HTML5)	1
document.baseURI			Returns the absolute base URI of the document	3
document.body				Returns the <body> element	1
document.cookie				Returns the document's cookie	1
document.doctype			Returns the document's doctype	3
document.documentElement	Returns the <html> element	3
document.documentMode		Returns the mode used by the browser	3
document.documentURI		Returns the URI of the document	3
document.domain				Returns the domain name of the document server	1
document.embeds				Returns all <embed> elements	3
document.forms				Returns all <form> elements	1
document.head				Returns the <head> element	3
document.images				Returns all <img> elements	1
document.implementation		Returns the DOM implementation	3
document.inputEncoding		Returns the document's encoding (character set)	3
document.lastModified		Returns the date and time the document was updated	3
document.links				Returns all <area> and <a> elements that have a href attribute	1
document.readyState			Returns the (loading) status of the document	3
document.referrer			Returns the URI of the referrer (the linking document)	1
document.scripts			Returns all <script> elements	3
document.strictErrorChecking	Returns if error checking is enforced	3
document.title				Returns the <title> element	1
document.URL				Returns the complete URL of the document	1

Example 2: HTML DOM

// This is a DOM interface with JAVASCRIPT by using JSON data
// Creating Table with DOM objects


var myData = [{user: "James", address: "123 Keele St. Toronto, ON.", email:"[email protected]"},
              {user: "Mary", address: "92 Appleby Ave. Hamilton, ON.", email:"[email protected]"},
              {user: "Paul", address: "70 The Pond Rd. North Youk, ON.", email:"[email protected]"},
              {user: "Catherine", address: "1121 New St. Burlington, ON.", email:"[email protected]"}];

window.onload = function() {		 
   document.querySelector("#button1").onclick = generateTable;
}

function generateTable(){
   // get the reference for the body
   var tbl = document.querySelector("#outputTable");
 
   // revove existing Body element
   var tblExistingBody = tbl.querySelector("tbody");
   if (tblExistingBody) tbl.removeChild(tblExistingBody);
   
   // creates a <tbody> element
   var tblBody = document.createElement("tbody");
 
   // creating all table rows
   for (var i = 0; i < myData.length; i++) {
      // creates a table row
      var row = document.createElement("tr");
 
      // Create a <td> element and put them at the end of the table row
      row.appendChild(getTdElement(myData[i].user));
      row.appendChild(getTdElement(myData[i].address));
      row.appendChild(getTdLinkElement(myData[i].email, myData[i].email));
 
      // add the row to the end of the table body
      tblBody.appendChild(row);
   }
 
   // put the <tbody> in the <table>
   tbl.appendChild(tblBody);
}

// Create a <td> element and a text
function getTdElement(text) {
   var cell = document.createElement("td");
   var cellText = document.createTextNode(text);
   cell.appendChild(cellText);
   return cell;
}

// Create a <td> element with a hyperlink
function getTdLinkElement(text, href) {
   var anchor = document.createElement("a");
   anchor.setAttribute("href", "mailto:"+href);
   var anchorText = document.createTextNode(text);
   anchor.appendChild(anchorText);
   
   var cell = document.createElement("td");
   cell.appendChild(anchor);
   return cell;
}

Tags:

Html Example

Recent Posts