document object model in javascript code example

Example 1: 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;
}

Example 2: Html dom

<!-- USING EVENT HANDLER FOR  DOM HTML -->
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>WEB222</title>
   <style> 
      body { margin: 0 18%; }
   </style>
   <script>
	 window.onload = function() { // why use window.onload?
		 var elem = document.querySelector("#myBtn");
		 elem.addEventListener( "click", displayDate );

	 }

     function displayDate() {
        document.querySelector("#demo").innerHTML = (new Date()).toLocaleString();
	 }
   </script>
</head>
<body>
  <h1>WEB222 - HTML DOM Event</h1>
  <p>Click "Show Current Time" to execute the displayDate() function.</p>
  <p id="demo"></p>

  <button id="myBtn">Show Current Time</button>
  
  <br>
  <!-- for downloading source files -->
  <p><a href="" Download>Download</a></p>
</body>
</html>

Example 3: JavaScript and HTML DOM Reference

const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let splitContact = contacts[i].split(':');
    if (splitContact[0].toLowerCase() === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

Tags:

Html Example

Recent Posts