[go: up one dir, main page]
Scribd
Upload
18 views8 pages

Dom (D O M) : Ocument Bject Odel

Uploaded by

Nishita Swamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views8 pages

Dom (D O M) : Ocument Bject Odel

Uploaded by

Nishita Swamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

DOM (DOCUMENT OBJECT MODEL)

The Document Object Model (DOM) is a programming interface for HTML(HyperText Markup
Language) and XML(Extensible markup language) documents. It defines the logical structure of documents and the
way a document is accessed and manipulated.

Note: It is called a Logical structure because DOM doesn’t specify any relationship between objects.

DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for
programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs,
classes, Attributes, or Elements of HTML using commands or methods provided by the Document object. Using DOM,
the JavaScript gets access to HTML as well as CSS of the web page and can also add behavior to the HTML
elements. so basically Document Object Model is an API that represents and interacts with HTML or XML
documents.

Why DOM is required?


HTML is used to structure the web pages and Javascript is used to add behavior to our web pages. When an HTML
file is loaded into the browser, the javascript can not understand the HTML document directly. So, a corresponding
document is created(DOM). DOM is basically the representation of the same HTML document but in a different
format with the use of objects. Javascript interprets DOM easily i.e javascript can not understand the
tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM. Now, Javascript can access each of the
objects (h1, p, etc) by using different functions.

Structure of DOM: DOM can be thought of as a Tree or Forest(more than one tree). The term structure model is
sometimes used to describe the tree-like representation of a document. Each branch of the tree ends in a node, and
each node contains objects Event listeners can be added to nodes and triggered on an occurrence of a given event.
One important property of DOM structure models is structural isomorphism: if any two DOM implementations are
used to create a representation of the same document, they will create the same structure model, with precisely the
same objects and relationships.

Why called an Object Model?

Documents are modeled using objects, and the model includes not only the structure of a document but also the
behavior of a document and the objects of which it is composed like tag elements with attributes in HTML.

Properties of DOM: Let’s see the properties of the document object that can be accessed and modified by the
document object.
Representation of the DOM

 Window Object: Window Object is object of the browser which is always at top of the hierarchy. It is like an API
that is used to set and access all the properties and methods of the browser. It is automatically created by the
browser.
 Document object: When an HTML document is loaded into a window, it becomes a document object. The
‘document’ object has various properties that refer to other objects which allow access to and modification of the
content of the web page. If there is a need to access any element in an HTML page, we always start with
accessing the ‘document’ object. Document object is property of window object.
 Form Object: It is represented by form tags.
 Link Object: It is represented by link tags.
 Anchor Object: It is represented by a href tags.
 Form Control Elements:: Form can have many control elements such as text fields, buttons, radio buttons,
checkboxes, etc.

Methods of Document Object:


 write(“string”): Writes the given string on the document.
 getElementById(): returns the element having the given id value.
 getElementsByName(): returns all the elements having the given name value.
 getElementsByTagName(): returns all the elements having the given tag name.
 getElementsByClassName(): returns all the elements having the given class name.

Example: In this example, We use HTML element id to find the DOM HTML element.

<!DOCTYPE html>
<html>
<body>
<h2>GeeksforGeeks</h2>
<!-- Finding the HTML Elements by their Id in DOM -->
<p id="intro">A Computer Science portal for geeks.</p>
<p>This example illustrates the <b>getElementById</b> method.</p>

<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"GeeksforGeeks introduction is: " + element.innerHTML;
</script>
</body>

</html>
Output:

Getting the HTML element by getElementById() Method

Example: This example describes the representation of the HTML elements in the tree structure.

<table>
<ROWS>
<tr>
<td>Car</td>
<td>Scooter</td>
</tr>
<tr>
<td>MotorBike</td>
<td>Bus</td>
</tr>
</ROWS>
</table>
HTML elements in tree-like structure

What DOM is not?

 The Document Object Model is not a binary description where it does not define any binary source code in its
interfaces.
 The Document Object Model is not used to describe objects in XML or HTML whereas the DOM describes XML
and HTML documents as objects.
 The Document Object Model is not represented by a set of data structures; it is an interface that specifies object
representation.
 The Document Object Model does not show the criticality of objects in documents i.e it doesn’t have information
about which object in the document is appropriate to the context and which is not.

Levels of DOM:

 Level 0: Provides a low-level set of interfaces.

 Level 1: DOM level 1 can be described in two parts: CORE and HTML.
 CORE provides low-level interfaces that can be used to represent any structured document.
 HTML provides high-level interfaces that can be used to represent HTML documents.

 Level 2: consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL, and RANGE.
 CORE2: extends the functionality of CORE specified by DOM level 1.
 VIEWS: views allows programs to dynamically access and manipulate the content of the document.
 EVENTS: Events are scripts that are either executed by the browser when the user reacts to the web
page.
 STYLE: allows programs to dynamically access and manipulate the content of style sheets.
 TRAVERSAL: This allows programs to dynamically traverse the document.
 RANGE: This allows programs to dynamically identify a range of content in the document.
 Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH.
 CORE3: extends the functionality of CORE specified by DOM level 2.
 LOAD and SAVE: This allows the program to dynamically load the content of the XML document into
the DOM document and save the DOM Document into an XML document by serialization.
 VALIDATION: This allows the program to dynamically update the content and structure of the
document while ensuring the document remains valid.
 EVENTS: extends the functionality of Events specified by DOM Level 2.
 XPATH: XPATH is a path language that can be used to access the DOM tree.

Example: This example illustrates the dom-manipulation using getElementById() Method.

<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation</title>
</head>
<body>
<label>Enter Value 1: </label>
<input type="text" id="val1" />
<br />
<br />
<label>Enter Value 2: </label>
<input type=".text" id="val2" />
<br />
<button onclick="getAdd()">Click To Add</button>
<p id="result"></p>

<script type="text/javascript">
function getAdd() {

// Fetch the value of input with id val1

const num1 = Number(document.getElementById("val1").value);

// Fetch the value of input with id val2


const num2 = Number(document.getElementById("val2").value);
const add = num1 + num2;
console.log(add);

// Displays the result in paragraph using dom


document.getElementById("result").innerHTML = "Addition : " +
add;

// Changes the color of paragraph tag with red


document.getElementById("result").style.color = "red";
}
</script>
</body>

</html>
Output:
Manipulating the Document objects using getElementById() Method

JAVASCRIPT - FORM VALIDATION


Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the
Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data
back to the client and request that the form be resubmitted with correct information. This was really a lengthy process
which used to put a lot of burden on the server.
JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form
validation generally performs two functions.

 Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would
require just a loop through each field in the form and check for data.
 Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code
must include appropriate logic to test correctness of data.
Example
We will take an example to understand the process of validation. Here is a simple form in html format.

<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>

<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
<table cellspacing = "2" cellpadding = "2" border = "1">

<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>

<tr>
<td align = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>

<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>

<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[choose yours]</option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>

<tr>
<td align = "right"></td>
<td><input type = "submit" value = "Submit" /></td>
</tr>

</table>
</form>
</body>
</html>
Output
Basic Form Validation
First let us see how to do a basic form validation. In the above form, we are calling validate() to validate data
when onsubmit event is occurring. The following code shows the implementation of this validate() function.

<script type = "text/javascript">


<!--
// Form validation code will come here.
function validate() {

if( document.myForm.Name.value == "" ) {


alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {

alert( "Please provide a zip in the format #####." );


document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>

You might also like