Explain DOM model in Java Script 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

<!-- 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>

Tags:

Html Example