Scribd
Upload
257 views13 pages

Document Object Model

Uploaded by

sohail Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
257 views13 pages

Document Object Model

Uploaded by

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

DOCUMENT OBJECT

MODEL
DOM
 JavaScript is the programming language
used to build Ajax applications.
◦ combined with the <DIV> </DIV> and <SPAN>
</SPAN> tags, -> dynamically insert text at pre-
set locations within your applications

 Document Object Model -> complete control


over the layout of your application’s web
pages.
DOM
 The Document Object Model creates a tree representation
of web pages
 To work with different Document Object Model properties
and methods
 To walk the Document Object Model tree and retrieve
element information
 To use the Document Object Model to modify tree layout
and dynamically update the appearance of web pages
DOM Tree
Ajax: Story of the Day
DOM
 With the object model, JavaScript gets all the power it
needs to create dynamic HTML:
 JavaScript can change all the HTML elements in the
page
 JavaScript can change all the HTML attributes in the
page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and
attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the
page
 JavaScript can create new HTML events in the page
 Finding HTML Elements
 Method Description document.getElementById(id) Find an element by element id document.getElementsByTagName(name)
Find elements by tag name document.getElementsByClassName(name) Find elements by class name Changing HTML
Elements
 Property Description element.innerHTML = new html content Change the inner HTML of an element element.attribute =
new value Change the attribute value of an HTML element element.style.property = new style Change the style of an HTML
element Method Description element.setAttribute(attribute, value) Change the attribute value of an HTML element Adding
and Deleting Elements
 Method Description document.createElement(element) Create an HTML element document.removeChild(element) Remove
an HTML element document.appendChild(element) Add an HTML element document.replaceChild(new, old) Replace an HTML
element document.write(text) Write into the HTML output stream
 Adding Events Handlers
 Method Description document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event
Finding HTML Objects
 The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in
HTML5.
 Later, in HTML DOM Level 3, more objects, collections, and properties were added.
 Property Description DOM document.anchors Returns all <a> elements that have a name attribute 1 document.applets
Deprecated 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.domConfig Obsolete. 3 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
WALKING THE DOM TREE
Accessing DOM Elements
by ID
<HTML>
<HEAD>
<TITLE>Demo: Accessing DOM Elements by ID</TITLE>
<SCRIPT language = "javascript" type = "text/javascript">
<!-- Start hiding JavaScript statements
function SetAlarm() {
document.getElementById('DivTrgt').innerHTML = "Charge!"
}
// End hiding JavaScript statements -->
</SCRIPT>
</HEAD>
<BODY onload = " SetAlarm()">
<H1>Knock Knock!</H1>
<DIV id="DivTrgt"> </DIV>
</BODY>
</HTML>
DOM Demo
<HTML>
<HEAD>
<TITLE>Demo: Dissecting the DOM Tree</TITLE>
</HEAD>
<BODY ID = "BodyTag">
<H1 ID = "HeadTag">DOM Demo</H1>
<P ID = "ParaTag">Let's examine this page's DOM
tree!</P>
</BODY>
</HTML>
DYNAMICALLY UPDATING WEB PAGE CONTENT

<HTML>
<HEAD>
<TITLE>Demo: Working with mouse event handlers</TITLE>
<SCRIPT LANGUAGE = "JavaScript" TYPE = "Text/JavaScript">
function ChangePageLayout() {
var newParagraph = document.createElement("p");
var newTextNode = document.createTextNode('The DOM Rocks!');
document.getElementById('trgtDiv').appendChild(newParagraph);
document.getElementById('trgtDiv').appendChild(newTextNode);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>DOM Demonstration</H1>
<FORM>
<INPUT type = "button" value = "Click on Me" id = "formButton"
onclick = "ChangePageLayout()">
</FORM>
<DIV id = "trgtDiv"> </DIV>
</BODY>
</HTML>

You might also like