2. What is DOM?
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.
3. Why the DOM?
The DOM (Document Object Model) gives you generic
access to most elements, their styles and attributes in a
document.
4. DOM Architecture
Document object model is a
framework that organizes how
elements are referenced and how
they interact with each other.
6. Different Document Objects
Document Object
Anchor Object
Button Object
Form Object
Image Object
Event Object
7. 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.
8. 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.
10. Button object -Example
<html>
<body bgcolor=“#654c45”>
<button id=“Genius1" name=“Genius1">Click Me!</button>
<p>The name of the button is:
<script type="text/javascript">
document.write(document.getElementById(“Genius1").name);
</script></p>
</body>
</html>
11. 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>
12. JavaScript HTML DOM
JavaScript is used to access and manipulate HTML DOM objects.
Example
<html><head>
<script type="text/javascript">
function disable_button()
{
document.getElementById("myButton").disabled=true;
}
</script> </head>
14. 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.
16. Loading of XML file using JavaScript
<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>
17. 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.
18. Advantages of DOM (Cont…)
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.
19. Disadvantages
Stores the entire document in memory.
DOM was written for any language, method naming conventions
don’t fallow standard java programming conventions.
