Dom

ME PRESENTATION
ON
DOCUMENT OBJECT MODEL
PREPARED BY :
UPADHYAY RAKSHITA R.
Er No : 140370707018
Roll No : 24

Contents….
2
 Introduction
 How DOM works?
 Document tree
 HTML DOM access nodes
 DOM Properties
 DOM Methods
 References
8/5/2015

Introduction
 The HTML DOM defines a standard way for accessing
and manipulating HTML documents.
 It presents an HTML document as a tree-structure with
elements, attributes, and text.
 With JavaScript you can restructure an entire HTML
document. You can add, remove, change, or reorder items
on a page.
8/5/2015
3

 This access, along with methods and properties to add,
move, change, or remove HTML elements, is given
through DOM.
 The DOM can be used by JavaScript to read and change
HTML, XHTML, and XML documents.
8/5/2015
4

5
How the DOM works?
<head><script>
function toggle()
{ document.img.button1.src=“button_on.gif”; }
</script></head>
<body>
<a href=“test.html” onmouseover=“toggle()”> <img name=“button1” src=“button_off.gif”></a>
</body>
action
reaction
Action Event JavaScript DOM Reactio
nsrc=“button_off.gif” onmouseov
er
toggle() document.img.butto
n1
Src=“button_on.gi
f”
1) User moves mouse over object
2) Event senses that something happened to the object
3) JavaScript tells the object what to do (Even handler)
4) Locates object on the web page
5) Object’s image source is changed
8/5/2015

Document Tree (Node Tree)
<html>
<head>
<title> My title </title>
</head>
<body>
<h1> My header </h1>
<a href=“http://.... > My link </a>
</body>
</html>
8/5/2015
6

Document Tree (Node Tree)
8/5/2015
7

HTML DOM Example
<html>
<head>
<script type="text/javascript">
function ChangeColor() {
document.body.bgColor="yellow" }
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
8/5/2015
8

HTML DOM Access Nodes
 The getElementById() method returns the element with
the specified ID:
document.getElementById("someID");
 The getElementsByTagName() method returns all
elements (as a nodeList) with the specified tag name.
document.getElementsByTagName("p");
8/5/2015
9

DOM Objects
 DOM Anchor DOM Area
DOM Base DOM Body
DOM Button DOM Event
DOM Form DOM Frame
DOM Frameset DOM IFrame
DOM Image DOM Input Button
DOM Input Checkbox DOM Input File
DOM Input Hidden DOM Input Password
DOM Input Radio DOM Input Reset
DOM Input Submit DOM Input Text
DOM Link DOM Meta
DOM Object DOM Option
DOM Select DOM Style
DOM Table DOM TableCell
DOM TableRow DOM Textarea
8/5/2015
10

References
13
 www.w3school.com
 www.tutorialspoint.com/javascript
8/5/2015

Dom

More Related Content

What's hot

Similar to Dom

More from Rakshita Upadhyay

In this document

Dom