20
Document Object Model
| Date post: | 08-May-2015 |
| Category: |
Technology |
| Upload: | soumya |
| View: | 383 times |
| Download: | 5 times |
Document Object Model
DOM is a platform-and language-neutral interface that will allow
programs and scripts to dynamically access and update the content,
structure and style of documents.
What is DOM?
Why the DOM?
The DOM (Document Object Model) gives you generic
access to most elements, their styles and attributes in a
document.
DOM Architecture
Document object model is a
framework that organizes how
elements are referenced and how
they interact with each other.
Example
How scripts reference elements of a document.
How styles are applied to elements.
How scripts change styles.
Different Document Objects
Document Object
Anchor Object
Button Object
Form Object
Image Object
Event Object
Document Object
Provides access to all HTML elements in a page, from within a script.
Anchor Object
Allows you to create a link to another document.
Button Object
Represents a push button.
Form Object
Used to collect user input, and contain input elements.
Image Object
Represents an embedded image.
Event Object
Performs the action associated with events.
Document object -Example
<html>
<body bgcolor=“#56ce56”>
<script type="text/javascript">
document.write(“GENIUS");
</script>
</body>
</html>
Button object -Example
<html>
<body bgcolor=“#654c45”>
<button id=“Genius1" name=“Genius1">ClickMe!</button>
<p>The name of the button is:
<script type="text/javascript">
document.write(document.getElementById(“Genius1").name);
</script></p>
</body>
</html>
Form object -Example
<html><body bgcolor="#87cb56">
<form id="frm1" action="form_action.asp">
Last name: <input type="text" name="lname" value="Adi" /><br />
<input type="submit" value="Submit" />
</form>
<p>Return the value of each element in the form:</p>
<script type="text/javascript">
var x=document.getElementById("frm1");
for (var i=0;i<x.length;i++)
{
document.write(x.elements[i].value);
document.write("<br />");
} </script></body></html>
JavaScript HTML DOM
<html><head>
<script type="text/javascript">
function disable_button()
{
document.getElementById("myButton").disabled=true;
}
</script></head>
JavaScript is used to access and manipulate HTML DOM objects.
Example
<body>
<button id="myButton" type="button" onclick="disable_button()">
Click to disable me</button>
</body>
</html>
Example Cont…
XML -DOM
XML DOM defines a standard way for accessing and
manipulating XML documents.
OR
The XML DOM is a standard for how to get, change, add, or
delete XML elements.
<?xml version="1.0"?>
<bookstore>
<book category=“web">
<title lang="en">Harry</title>
<author>Aditya</author>
<year>2010</year>
<price>2000</price>
</book>
</bookstore>
XML File
<html><head>
<script type="text/javascript" src="loadxmldoc.js">
</script></head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");
document.write(xmlDoc.documentElement.nodeName);
</script></body>
</html>
Loading of XML file using JavaScript
Advantages of DOM
Language and Implementation-Neutral Interface.
Important feature of the DOM is to provide a standard
programming interface that can be used in a wide variety of
environments and applications.
Interoperability.
Benefit of having a standard API is interoperability which is a
necessity for documents sent over the Internet.
HTML and XML Support.
DOM is designed with both HTML JavaScript and XML in mind.
Style Sheets Support.
DOM specifies a way to manipulate and change CSS and XSL style
sheets.
Advantages of DOM (Cont…)
Disadvantages
Stores the entire document in memory.
DOM was written for any language, method naming conventions
don’t fallow standard java programming conventions.
Thank You
