JAVASCRIPT

what is a DOM

The Document Object Model (DOM) is a programming interface for 
web documents.  It represents the page so that programs can 
change the document structure, style, and content. 
The DOM represents the document as nodes and objects; that way, 
programming languages can interact with the page.

A web page is a document that can be either displayed in the 
browser window or as the HTML source. In both cases, it is the 
same document but the Document Object Model (DOM) representation 
allows it to be manipulated. As an object-oriented 
representation of the web page, it can be modified with a 
scripting language such as JavaScript.

dom js

The Document Object Model (DOM) is a programming interface for web documents. 
It represents the page so that programs can change the document structure, 
style, and content. The DOM represents the document as nodes and objects; 
that way, programming languages can interact with the page.

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:"james12@myseneca.ca"},
              {user: "Mary", address: "92 Appleby Ave. Hamilton, ON.", email:"mary356@myseneca.ca"},
              {user: "Paul", address: "70 The Pond Rd. North Youk, ON.", email:"paul345@myseneca.ca"},
              {user: "Catherine", address: "1121 New St. Burlington, ON.", email:"catherine89@myseneca.ca"}];

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;
}

dom js

document.getElementById("board")
document.createElement("div")
document.removeChild("board")
document.appendChild(new)

dom in javascript

Dom => Document object model.
//way to access html and css code through javascript.
//inside document we get all html(head,body=> h1,button,p)
document => 
document.title=> to get title of website
const header= document.getElementsByTagName('h2')
console.log(header) // get HTMLCOLLECTION of all h2 element