Document Object
Model (DOM)
DOM
• When a web page is loaded, the browser creates
a Document Object Model of the page.
• The HTML DOM model is constructed as a tree
of Objects:
Document Tree Structure
#doc um ent <h t m l >
<b o d y >
HTML <h 1 >H e a d i n g 1 </h 1 >
<p >Pa r a g r a p h .</p >
H EA D
<h 2 >H e a d i n g 2 </h 2 >
<p >Pa r a g r a p h .</p >
B ODY </b o d y >
</h t m l >
H1
#t ex t
P
#t ex t
H2
#t ex t
P
#t ex t
With the object model, JavaScript gets all the power it needs
Model
to create dynamic HTML
Change JavaScript can change all the HTML elements in the page
Change JavaScript can change all the HTML attributes in the page
Change JavaScript can change all the CSS styles in the page
Remove JavaScript can remove existing HTML elements and attributes
Features
Add JavaScript can add new HTML elements and attributes
React JavaScript can react to all existing HTML events in the page
Create JavaScript can create new HTML events in the page
What is a DOM
• The DOM is a W3C (World Wide Web Consortium) standard.
• The DOM defines a standard for accessing documents:
• "The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and style
of a document."
• The W3C DOM standard is separated into 3 different parts:
• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents
HTML DOM
• The HTML DOM is a standard object model and programming
interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
HTML DOM Methods
• HTML DOM methods are actions you can perform (on HTML Elements).
• HTML DOM properties are values (of HTML Elements) that you can set or
change.
• The DOM Programming Interface
• The HTML DOM can be accessed with JavaScript (and with other programming
languages).
• In the DOM, all HTML elements are defined as objects.
• The programming interface is the properties and methods of each object.
• A property is a value that you can get or set (like changing the content of an
HTML element).
• A method is an action you can do (like add or deleting an HTML element).
<!DOCTYPE html>
<html>
<body>
<h1>My First Page</h1>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML
= "Hello World!";
</script>
</body>
</html>
• The getElementById Method
• The most common way to access an HTML element is to use the
id of the element.
• In the example above the getElementById method used
id="demo" to find the element.
• The innerHTML Property
• The easiest way to get the content of an element is by using
the innerHTML property.
• The innerHTML property is useful for getting or replacing the
content of HTML elements.
• The innerHTML property can be used to get or change any HTML
element, including <html> and <body>.
HTML The document object represents
your web page.
DOM
Document If you want to access any
element in an HTML page, you
always start with accessing the
document object.
Using Events
• The HTML DOM allows you to execute code when an event occurs.
• Events are generated by the browser when "things happen" to HTML elements:
• An element is clicked on
• The page has loaded
• Input fields are changed
• You will learn more about events in the next chapter of this tutorial.
• This example changes the style of the HTML element with id="id1", when the
user clicks a button:
Events and event handlers I
Event Applies to Occurs when Handler
Load Document body User loads the page in a onLoad
browser
Unload Document body User exits the page onUnload
Error Images, window Error on loading an image onError
or a window
22
Events and event handlers II
The onkeypress event works for all the keys except ALT, CTRL, SHIFT, ESC in
all browsers where as onkeydown event works for all keys. Means onkeydown
event captures all the keys.
Event Applies to Occurs when Handler
KeyDown Documents, images, links, User presses a key onKeyDown
text areas
KeyUp Documents, images, links, User releases a key onKeyUp
text areas
KeyPress Documents, images, links, User presses or onKeyPress
text areas holds down a key
Change Text fields, text areas, User changes the onChange
select lists value of an element
23
Events and event handlers III
Event Applies to Occurs when Handler
MouseDown Documents, buttons, User depresses onMouseDown
links a mouse button
MouseUp Documents, buttons, User releases a onMouseUp
links mouse button
Click Buttons, radio User clicks a onClick
buttons, checkboxes, form element
submit buttons, reset or link
buttons, links
24
Events and event handlers IV
Event Applies to Occurs when Handler
MouseOver Links User moves cursor onMouseOver
over a link
MouseOut Areas, links User moves cursor onMouseOut
out of an image
map or link
Select Text fields, text areas User selects form onSelect
element’s input
field
25
Events and event handlers V
Event Applies to Occurs when Handler
Focus Windows and all User gives element onFocus
form elements input focus
Blur Windows and all User moves focus to onBlur
form elements some other element
Reset Forms User clicks a Reset onReset
button
Submit Forms User clicks a Submit onSubmit
button
26
