Web Design and Development: Course Instructor: Wardah Mahmood Email Id: Wardah - Mahmood@riphah - Edu.pk

Web Design and
development
Lecture 10
Course Instructor: Wardah Mahmood
Email Id: wardah.mahmood@riphah.edu.pk
Document Object Model
(DOM)
Document Object Model (DOM)
• The DOM defines a standard for accessing and manipulating HTML documents.
• A representation of the current web page as a tree of JavaScript objects
• Allows you to view/modify page elements in script code
• The DOM defines the objects and properties of all document elements, and the
methods (interface) to access them.
HTML Nodes
According to the DOM, everything in an HTML document is a node.

The DOM says:
• The entire document is a document node
• Every HTML element is an element node
• The text in the HTML elements are text nodes
• Every HTML attribute is an attribute node
• Comments are comment nodes
DOM Example
Consider Following Code:
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>My header</h1>
<a href="http://fc.riphah.edu.pk">My link</a>
</body>
</html>
DOM Tree Example
Node Parents, Children & Siblings
• The nodes in the node tree have a hierarchical

relationship to each other
• In a node tree, the top node is called the root
• Every node, except the root, has exactly one parent node
• A node can have any number of children
• A leaf is a node with no children
• Siblings are nodes with the same parent
HTML DOM Properties
Some DOM properties:
• x.innerHTML - the text value of x

• x.nodeName - the name of x
• x.nodeValue - the value of x
• x.parentNode - the parent node of x
• x.childNodes - the child nodes of x
• x.attributes - the attributes nodes of x
Note: In the list above, x is a node object (HTML element).

HTML DOM Properties
The nodeName Property (x.nodeName)
• nodeName is read-only
• nodeName of an element node is the same as the tag name
• nodeName of an attribute node is the attribute name
• nodeName of a text node is always #text
• nodeName of the document node is always #document
HTML DOM Properties
The nodeValue Property (x.nodeValue)
• nodeValue for element nodes is undefined

• nodeValue for text nodes is the text itself
• nodeValue for attribute nodes is the attribute value
HTML DOM Methods
Some DOM methods:
• x.getElementById(id) - get the element with a specified id

• x.getElementsByTagName(name) - get all elements with a specified tag name
• x.appendChild(node) - insert a child node to x
• x.removeChild(node) - remove a child node from x
Accessing Nodes
You can access a node in three ways:
• By using the getElementById() method

• By using the getElementsByTagName() method
• By navigating the node tree, using the node relationships
There are two special document properties that allow access to the tags:
• document.documentElement - returns the root node of the document
• document.body - gives direct access to the <body> tag
The getElementById() Method
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
See: Example 01
The getElementsByTagName() Method
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<script>
x=document.getElementsByTagName("p");
document.write("Text of second paragraph: " + x[1].innerHTML);
</script>
See: Example 02
DOM Node List Length
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>length</b> property.</p>
<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
</script>
See: Example 03
Change the Text of an HTML Element
document.getElementById("p1").innerHTML="New text!";
Change Style of an HTML
Element
document.body.style.backgroundColor="#cccccc";
document.getElementById("p1").style.color="#00cc00";
document.getElementById("p1").style.fontFamily="Arial";
See: http://www.w3schools.com/jsref/dom_obj_style.asp
Global DOM Objects
Global DOM Objects
• Every JavaScript program can refer to the following global objects:

• window : the browser window
• navigator : info about the web browser you're using
• screen : info about the screen area occupied by the browser
• history : list of pages the user has visited
• location : URL of the current HTML page
• document : current HTML page object model
The “window” Object
• Represents the entire browser window
• The top-level object in the DOM hierarchy
• Technically, all global variables become part of the window object
• Methods:
• alert, blur, clearInterval, clearTimeout, close, confirm, focus, moveBy, moveTo, open, print, prompt,
resizeBy, resizeTo, scrollBy, scrollTo, setInterval, setTimeout
• Properties:
• document, history, location, name
See: http://www.w3schools.com/jsref/obj_window.asp
function delayedMessage() {
var myTimer = setTimeout("alert('Booyah!');", 5000);
}
<h2 onclick="delayedMessage();">Click me now!</h2>
• setTimeout executes a piece of code once after a given number of milliseconds

• The function returns an object representing the timer
• To cancel the timer, call clearTimeout and pass the timer object
• clearTimeout(myTimer); // cancel self-destruct sequence!
See: Example 04
<input type="text" id="clock" />

<script type="text/javascript">
var myTimer=setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
<button
onclick="window.clearInterval(myTimer)">Stop</button>
See: Example 05
The “navigator” Object
• Information about the web browser application
• Methods:
• javaEnabled()
• Properties:
• appCodeName, appName, appVersion, ,cookieEnabled, geolocation, language, onLine, platform,
product , userAgent
See: http://www.w3schools.com/jsref/obj_navigator.asp
The “navigator” Object
<div id="example"></div>

</script>
See: Example 06
The “navigator.geolocation” Object
<button onclick="getLocation()">Try It</button>

<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser."; }
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
See: Example 10 Example 11
The “screen” Object
• Information about the client's display screen
• Properties:
• availHeight, availWidth, colorDepth, height, pixelDepth, width
See: http://www.w3schools.com/jsref/obj_screen.asp
The “screen” Object
document.write("Total width/height: ");

document.write(screen.width + "*" + screen.height);
document.write("Available width/height: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("Color depth: ");
document.write(screen.colorDepth);
document.write("Color resolution: ");
document.write(screen.pixelDepth);
See: Example 07
The “history” Object
• List of sites the browser has visited in this window
• Properties:
• length
• Methods:
• back, forward, go
See: http://www.w3schools.com/jsref/obj_history.asp
The “history” Object
function goBack()
{
window.history.back()
}
</script>
<input type="button" value="Back" onclick="goBack()" />
See: Example 08
The “location” Object
• Represents the URL of the current web page
• Properties:
• host, hostname, href, pathname, port, protocol, search
• Methods:
• assign, reload, replace
See: http://www.w3schools.com/jsref/obj_location.asp
The “location” Object
function newDoc()
{
window.location.assign("http://www.w3schools.com")
}
</script>
<input type="button" value="Load new document"
onclick="newDoc()" />
See: Example 09
The “document” Object
• Represents current HTML page object model
• Properties:
• anchors, body, cookie, domain, forms, images, links, referrer, title, URL
• Methods:
• getElementById, getElementsByName, getElementsByTagName, write, writeln
See: http://www.w3schools.com/jsref/dom_obj_document.asp

Web Design and Development: Course Instructor: Wardah Mahmood Email Id: Wardah - Mahmood@riphah - Edu.pk

Uploaded by

Web Design and Development: Course Instructor: Wardah Mahmood Email Id: Wardah - Mahmood@riphah - Edu.pk

Uploaded by

Web Design and

According to the DOM, everything in an HTML document is a node.

Consider Following Code:

• The nodes in the node tree have a hierarchical

Some DOM properties:

• x.innerHTML - the text value of x

Note: In the list above, x is a node object (HTML element).

The nodeName Property (x.nodeName)

The nodeValue Property (x.nodeValue)

• nodeValue for element nodes is undefined

Some DOM methods:

• x.getElementById(id) - get the element with a specified id

You can access a node in three ways:

• By using the getElementById() method

• Every JavaScript program can refer to the following global objects:

• The top-level object in the DOM hierarchy

• Technically, all global variables become part of the window object

<h2 onclick="delayedMessage();">Click me now!</h2>

• setTimeout executes a piece of code once after a given number of milliseconds

<input type="text" id="clock" />

<button onclick="getLocation()">Try It</button>

document.write("Total width/height: ");

You might also like