Dom API In Java Script

JavaScript DOM
API
Rajat Pandit (rajat_pandit@ipcmedia.com)

Thursday, September 24, 2009 1

Document Object Model
W3C thought it was a good idea to keep
the DOM API similar across languages
Vague specifications meant different
implementations across different
browsers
It became important to know the
difference between browsers to make
code work across different browsers
That didn’t turn out as expected


DOM API in
JavaScript


Finding Elements
DOM API provides for the following
methods
document.getElementById(id) - Gets
element by its id
document.getElementsByTagName(tagname)
- Get all the elements matching
tagname
document.getElementsByClassName(class)
- Currently only support by Firefox :(


Modifying Elements
Old School Method (smaller &
faster)
if (my_image.complete) {
my_image.src = support_url;
}

W3C way of changing attributes.
if (my_image.getAttribute('complete')) {
my_image.setAttribute('src',url);
}


Changing style of elements
node.className
node.style.stylename
node.currentStyle.stylename

Only supported by IE so far,
reports back the computed
style, similar to firebug


Style Names (css/js)
css style name javascript
background-color equivalent
backgroundColor
border-radius borderRadius
font-size fontSize
list-style-type listStyleType
word-spacing wordSpacing
z-index zIndex


Making New Elements
DOM allows you to create new elements
document.createElement(nodename) - creates a
new node element
document.createTextNode(text) - creates the
node of type #text
node.cloneNode(boolean) - clones the node
and creates a new instance, when set to
true, clones all its decendents a well.
Important thing to remember is, the new
nodes are not attached to the DOM


Linking Elements to a parent
node.appendChild(new_node) - attaches
new_node to node as a descendent
node.insertBefore(new_node, sibling) - adds
new_node before the sibling node (pretty odd)
node.replaceChild(new, old) - replaces old
node with the new node
better written as
old.parentNode.replaceChild(new, old)
Very odd that all methods require link to the
parent node


Removing Nodes
Removing nodes is even weirder
node.removeChild(old) - how odd!!
better written as
old.parentNode.removeChild(old)
I call it the suicide method


innerHTML
Not part of the original W3C spec
added by IE and now all a-grade
browsers support it
You can do the same by appendChild but
it can be really complex for bigger
structures
Which option is better? readability and
clean code should always take a higher
priority when taking that decision


Event Model
The browser has an event
driven single treaded,
asynchronous programming model
Events are targeted at
particular nodes
Events cause the invocation of
event handlers


Mouse Events
The target is the topmost (z-index) node
containing the cursor
click
dblclick
mousedown
mousemove
mouseout
mouseover
mouseup


Input Events
The target is the node having focus
blur
change
focus
keydown
keypress
keyup
reset
submit


Attaching Event Handlers
Classic Method (still works)
node[“on” + type] = f
W3C Way
node.addEventListener(type, f, false)

MS Way (Why not!!)
node.attachEvent(“on”+type, f)


Event Handlers
The handler takes an optional event parameter
MS doesn’t send an event param to the handler,
use the global event object instead. Screws up
meaning of “this” object

function(e) {
e = e || event;
var target =
e.target || e.srcElement;
// more code.
}


Event Dispatching
Trickling - is an event capturing
pattern which provides compatibility
with NS4. Track event at the top and
work the way down till it finds the
node. Crazy Idea, avoid it!!
Bubbling - Event is given to an element
and passes on to its parent and then
its parent or so until it’s cancelled.


Event Dispatching
Trickling - is an event capturing
pattern which provides compatibility
with NS4. Track event at the top and
work the way down till it finds the
node. Crazy Idea, avoid it!!
Bubbling - Event is given to an element
and passes on to its parent and then
its parent or so until it’s cancelled.
MS got this one right


Why Bubble?
Assume a case of 100
draggable objects
Attach 100 event handlers,one
to each object
or attach 1 Event handler to
the container and find out
the target from there instead


Cancel Bubbling
Cancel bubbling to keep the
parent nodes from seeing the
event
e.cancelBubble = true; // IE
if (e.stopPropogation) {
e.stopPropogation();
}


Prevent Default Action
An event handler can prevent
browser action associated with
the event (such as submitting the
form)
e.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
return false;


Memory Management
Usually gc algo on most browsers is pretty good
Always a good idea to set null to a variable when
no longer is used
IE 6 Memory leak issue (make sure you remove
event handlers before removing an element)
IE6 uses reference counting garbage collector
algo (+1 for reference, -1 when set to null when
zero its garbaged collected)
reference counting is not able to reclaim cyclic
structure
these cycles need to be broken manually


Memory Leaks on IE6
Not an issue for page view driven
applications
but a show stopper for AJAX Applications
Now fixed in IE7
Remove all event handlers from elements due
to be deleted
Must be done for nodes before removeChild /
replaceChild
It must be done on nodes before they are
replaced by innerHTML


Memory Leaks in IE6
You can use YUI’s
purgeElement method or
function purgeEventHandlers(node) {
for(var n in node) {
if (typeof node[n] === ‘function’) {
node[n] = null;
}
}
}


More JavaScript Elements
These are assumed to be part of JavaScript
but actually provided by DOM
alert(text)
confirm(text)
prompt(text, default_value)
Don’t use these for AJAX apps as they break
the async form, use YUI dialogues instead
setTimeout(func, msec)
setInterval(func, msec)


window object
The window object is the
javascript global object
It’s the meeting point between
JS/DOM
Every window, frame, iframe
has its own window object
AKA self


Inter-window communication
frame[] - child frames and iframes
name - text name for the window
opener - reference to the opener of current
window object
parent - reference to the parent
self - reference to this window
top - reference to the outermost window
window - reference to the current window
open() - opens a new window


More on inter-window
communication
A script can access another window if it
can get a reference to it

document.domain = otherwindow.document.domain

Same Origin Policy
Workaround, if a.b.com needs to talk to
c.b.com set

document.domain = c.b.com


Cross Browser Issues
Weak standards result in significant vendor
specific differences between the browsers
There are three ways of resolving it
Browser Detection - worked well when there
were only a few browsers to support
Feature Detection - By far the safest way,
check if the value exists before you use
it
Platform Libraries - Use MS Atlas or
Yahoo! YUI


Coping
Do what works
Do what is common
Do what is standard (sad this
is not #1)


The limiting Factor
Browsers are being pushed to
their limits
Be prepared to back off
Reduce memory requirements
Balance client and server
actions (don’t try and do
everything on client side)


What to watch out for?
Browsers weren’t designed to be a general
purpose application (newer versions are
doing that, chrome is the right direction)
Lacks a compositing model - new elements
can’t be made with current elements,
visually yes but browsers/screen readers
still see them as individual elements
Lacks support for co-operation under mutual
suspicion (mashups need to be written extra
carefully to ensure there is no clobbering)


Resources
DOM Cheat Sheet By Christian
http://www.wait-till-i.com/2007/06/27/dom-
javascript-cheat-sheet/

Mozilla’s take on DOM
https://developer.mozilla.org/en/DOM

Convert Markup to DOM methods
http://muffinresearch.co.uk/code/javascript/
DOMTool/


Dom API In Java Script

Recommended

More Related Content

Viewers also liked (13)

Similar to Dom API In Java Script (20)

Recently uploaded (20)

Dom API In Java Script