Relation between HTML and DOM

This section describes how HTML is related to DOM, which is an API that represents elements in an HTML document as programming objects used by HTML embedded scripts.

DOM (Document Object Model) is an API (Application Programming Interface) standard that can be used to represent elements in an HTML document as programming objects to be interacted by scripts embedded in the HTML documents.

Here is a good example of an HTML document with a JavaScript using the DOM API adopted from "JavaScript Forms" Website at https://www.w3schools.com/js/js_validation.asp. The DOM API is used to assess and validate input values received by the browser.

<!DOCTYPE html>
<!-- DOM_Example.html
 - Copyright (c) 2009 HerongYang.com. All Rights Reserved.
-->
<html>
<head>
<title>DOM Example</title>
<script>
function validateForm() {
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}
</script>
</head>

<body>
<form name="myForm" action="processForm.html"
   onsubmit="return validateForm();" method="post">
   Email: <input type="text" name="email">
   <input type="submit" value="Submit">
</form>
</body>

</html>

When the above HTML document is displayed in a browser, a user can enter an email address and click the submit button. to trigger the JavaScript to use DOM to access and validate the email address. If the validation fails to pass, an error message will be displayed as shown below:

HTML with JavaScript using DOM
HTML with JavaScript using DOM

Table of Contents

 About This Book

Introduction of HTML

 What Is HTML

 History of HTML

 Differences between HTML and XHTML

 Relation between HTML and CSS

 Relation between HTML and JavaScript

Relation between HTML and DOM

 Relation between HTML and DHTML

 Relation between HTML and SVG

 Relation between HTML and MathML

 Introduction of HTML5 Features

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 Displayed and Printed HTML Documents

 Responsive Design of Web Pages

 MathML Integration in HTML Documents

 References

 Full Version in PDF/EPUB