Professional Documents
Culture Documents
BOM&DOM (1)
BOM&DOM (1)
Object Categories
Built-in objects
Object
Math
Host Objects
String Author Objects
BOM
Boolean All other objects
DOM
Array
Date
Number
BOM window
Methods:
o javaEnabled()
History object
contains the URLs
History
visited by the user
(within a browser
window).
history
It allows limited access to the previously-visited pages in the same
browser session.
history.length the number of pages visited before this one.
history.forward() navigate forward through the user's session
(Forward Button)
history.back() navigate backward through the user’s session
(Backward Button).
history.go(num) To go to a certain page in the history list. If num is
negative, we go backwards and if positive we go forward.
Location object
Location
contains information
about the current
URL.
location
It is an object that contains information about the URL of the currently loaded
page.
For the following URL : http://search.phpied.com:8080/search?
p=javascript#results
location.href = "http://search.phpied.com:8080/search?p=javascript#results"
location.hash = "#results"
location.host = "search.phpied.com:8080"
location.hostname = "search.phpied.com"
location.pathname = "/search"
location.protocol = "http:“
location.search = "?p=javascript”
location
Methods:
Name Description
Types of Nodes:
Element Nodes
Text Nodes
Attribute Nodes
Comment Nodes
Element object
Elements represents an HTML
element.
Element objects can
have child nodes of
type element, text, or
comment nodes.
Attributes
Attr object
represents an HTML
attribute.
Style object
Style
represents an
individual style
statement.
Events allow
Events JavaScript to
register different
event handlers on
elements in an HTML
document.
HTML Example
• <html>
• <head><title>Sample Document</title></head>
• <body>
• <h1>An HTML Document</h1>
• <p>This is a <i>simple</i>document</p>
• </body>
• </html>
Accessing DOM Nodes
• All nodes have
• nodeType,
• nodeName (mostly are tag names),
• nodeValue (for text nodes; the value is the actual text)
• window.document: access to the current document.
• documentElement: the root node <html>
• childNodes:
• In order to tell if a node has any child Nodes you use hasChildNodes(): true/false
• childNodes[] array to access child nodes of any element, has all array properties.
• a property of Nodes
• children:
• a property of Elements, returns array of all child elements of an element.
• parentNode/parentElement(DOM4):
• Provided to child to access its parent
Accessing DOM Nodes
• window.document (Cont’d):
• nextSibling/nextElementSibling,
previousSibling/previousElementSibling
• firstChild/firstElementChild, lastChild/lastElementChild
• attributes
• In order to tell if a node has any attributes you use hasAttributes()
true/false also hasAttribute(“attr”)
• attributes[] array to access all attribute nodes of any element.
• getAttribute(attrname) to get the value of a certain attribute.
• setAttribute(attrname,value) to set value of a certain attribute.
• Each attribute node has nodeName and nodeValue
Accessing DOM Nodes
Collections:
Collection Description
Event handlers
onmouseout onmouseover onmousemove onclick ondblclick
Example:
<FORM>
Properties [NAME="formName"]
[TARGET="frameName or windowName"]
[onSubmit="handlerText Or Function"] Events
[onReset="handlerText Or Function"]>
</FORM>
Form
• By using the form you have at your disposal information about the
elements in a form and their values.
• A separate instance of the form object is created for each form in a
document.
• Objects within a form can be referred to by a numeric index or be
referred to by name.
• Object Model Reference:
[window.]document.formname
[window.]document.forms[index]
[window.]document.forms[“formNAME”]
[window.]document.forms[“formID”]
Form
Event Handlers :
Event Handler Description
onfocus The field gains focus when the user tabs into or clicks inside the
control.
onblur The field loses focus when the user tabs from or
clicks outside the control.
onchange The field loses focus after the contents of the control have
changed.
HTML:
Drop down list <select id="id“ multiple size="n">
<option value="string" selected >
label
</option>
...
properties: </select
Property Description
length The number of options in the list.
The index number, beginning with 0, of the selected option.
selectedIndex
An array of the options in the list. Used to reference
options[] properties associated with the options; e.g., options[1].value
or options[2].text.
A true or false value indicating whether an option is chosen.
selected
value The value associated with an option.
text The text label associated with an option.
Sets or returns whether or not multiple items can be selected
multiple
Drop down list
Methods :
Method Description
add() Adds an option to a dropdown list
remove() Removes an option from a dropdown list
focus() Assigns focus to the field; places the cursor in the control.
Event Handlers:
Event Handler Description
The control gains focus.
onfocus
The control loses focus.
onblur
onchange A different option from the one currently displayed is chosen.
Radio button
HTML:
<input type="radio“ id="id" name="name" value="string" checked />
Properties:
Properties Description
length The number of radio buttons with the same name.
checked A true or false value indicating whether a button is checked.
value Sets or returns the value of the value attribute of the radio
button
Radio button
Methods:
Method Description
blur() Removes focus from the field.
focus() Assigns focus to the field; places the cursor in the control.
Event Handlers:
Event Handler Description
The control gains focus.
onfocus
The control loses focus.
onblur
The button is clicked.
onclick
Check Box
HTML:
<input type=“checkbox“ id="id" name="name" value="string"
checked />
Properties:
Properties Description
checked A true or false value indicating whether a button is checked.
value Sets or returns the value of the value attribute of the radio
button
Check Box
Methods:
Method Description
blur() Removes focus from the field.
focus() Assigns focus to the field; places the cursor in the control.
Event Handlers:
Event Handler Description
The control gains focus.
onfocus
The control loses focus.
onblur
The button is clicked.
onclick
Button
HTML:
<input type=“button“ value="string" />
Event Handlers:
Event Handler Event
The mouse is clicked and released with the cursor positioned
onclick over the button.
The mouse is double-clicked with the cursor positioned over the
ondblclick button.
The mouse is pressed down with the cursor positioned over
onmousedown the button.
onmouseout The mouse cursor is moved off the button.
The mouse cursor is moved on top of the button.
onmouseover
The mouse button is released with the cursor positioned
onmouseup over the button.
Button
Properties:
Properties Description
disabled Sets or returns whether or not a button should be disabled
value Sets or returns the value of the value attribute of the radio
button
Methods:
Method Description
blur() Removes focus from the field.
focus() Assigns focus to the field; places the cursor in the control.
HTML:
<span id=“sp1”> Hello There! </ span>
<div id=“dv1”> Hello There! </div>
Properties (work with most content elements):
properties Description
innerText [IE Only] Sets or returns the text that the control contains.
textContent [All browsers] Sets or returns the HTML text code that the control
contains, and execute the HTML tags in the text.
innerHTML [All browsers] Sets or returns the HTML text code that the control
contains, and execute the HTML tags in the text.
A Shortcut to DOM elements
Most of the visual element nodes have a style property, which in turn has a
property mapped to each CSS property.
var my = document.getElementById(’mydiv');
CSS properties have dashes but in JavaScript map their names to properties
by skipping the dash and uppercase the next letter.
• padding-top -> paddingTop
Example:
var m=document.getElementById(‘mydiv’);
m.className=“errorclass”;
OR
m.setAttribute(‘class’,’errorclass’);
Creating New Nodes
Create nodes by createElement() and createTextNode().
Once you have the new nodes, you add them to the DOM tree with appendChild(). It
must be called by the parent object to whose
Example
var myp = document.createElement('p');
The method accepts a boolean parameter (true = deep copy with all the
children, false = shallow copy, only this node).
insertBefore(newnode, existingchild)
Example:
OR
<script>
function showmsg()
{
alert(“you have made a click”)
}
</script>
<input type=button value=“click me” onclick=“showmsg()” />
Binding Event Handlers to Elements
2. Event handlers as object property:
<body>
<form>
<input type=“button” name='b1' value="Click ME" />
</form>
</body>
<script>
function showAlert ()
{
alert(“you have clicked me”) Note: there are no
} parentheses
Keyboard events
keydown, keypress, keyup.
Loading/window events
load, unload, beforeunload, abort, error, resize, scroll, contextmenu, blur, focus,
change.
Form events
change, select, reset, submit.
Event Object
The event object is passed implicit to the event handling
function as an argument
Another way that can also make the browser ignore the
action of href is:
any handler may decide that the event has been fully processed and stop the
bubbling.
The method for it is event.stopPropagation().
This object
Use this keyword to refer to the current object.
Self reference to the object is used :
function myFunction(myObject)
{
myObject.value = ”In the function!!“
}
<input type=“text” onClick=“myFunction(this)”/>