JS.Chi() 12/18/08

1. Javascript & the DOM
Luca Matteis

2. What is the DOM?
DOM == Document Object Model
<p title=quot;The test paragraphquot;>This is a sample of some <b>HTML
you might<br>have</b> in your document</p>
The DOM tree:

3. Referencing the element nodes
document.getElementById(quot;id of divquot;)
document.getElementsByTagName(quot;divquot;)[indexOfDiv]
We could even walk the entire DOM tree from the
document object
window.document.childNodes[0].childNodes[1].childNodes[4]

4. Getting/Setting the attribute node
Easy way:
var title = element.getAttribute(quot;titlequot;);
element.setAttribute(quot;titlequot;, quot;This is an elementquot;);
OR:
Access the quot;attributesquot; array in each
element:
for( var x = 0; x < element.attributes.length; x++ ) {
if( element.attributes[x].nodeName.toLowerCase() == 'title' ) {
window.alert( 'The value of the 'title' attribute is: ' +
element.attributes[x].nodeValue );
}
}

5. Creating new nodes
var div= document.createElement(quot;divquot;);
var theTextOfDiv = document.createTextNode('Some content.');
div.appendChild(theTextOfTheDIv);
document.getElementById('someElementId').appendChild(div);
- You should always use this method instead of using innerHTML
when creating new nodes.
- If you're creating lots of DIVs, cloneNode(false) it instead of re-
creating it each time, its faster.
- innerHTML is faster but you should only use it if you're HTML is
safe, maybe when you're Ajax calls return HTML and you wanna
update an element.

6. Events
All this means nothing without Events. They give interactivity
to your page, without them we wouldn't be able to make
Javascript do something.
When the user does something an event takes place. We can
attach an event handler to certain HTML elements.

7. Event handling
<a href=quot;http://link.comquot; onclick=quot;alert('hi');quot;>link</a>
This way of registering event handlers to HTML elements is
bad, they should be set entirely with javascript.
element.onclick = doSomething;
Whenever the user clicks on the HTML element, the function
doSomething() is executed.
A distinct drawback is that the onclick property can contain
only one function. This becomes a problem when you want to
register multiple event handlers for one event.

8. Advanced event registration
element.addEventListener('click',doSomething,false);
Now we can add as many event listeners as we want to the
element.
To remove an event handler, use the removeEventListener()
method.
Microsoft uses attachEvent(), be aware of this, or use a
framework to deal with Event registration.

9. Event order
If you have an element inside another element, and both
have an onclick Event, which one will fire first when you click
on them?
<div onclick=quot;doSomething();quot;>
<div onclick=quot;doSomething();quot;>Hello</div>
</div>
Two Models:
Event capturing: the outer element event takes place first.
This means it starts capturing events from the outer element.
Event bubbling: the inner element event takes place first. It
starts capturing events from the inner element.
You can decide which one to use through the addEventListener(). If
its last argument is true the event handler is set for the capturing

10. Stop Event propagation
You might want to stop event propagation from bubbling up
when you apply an event to the quot;documentquot; for example:
document element.onclick=doSomething;
document.onclick =
element defaultFunction;
You can stop the event propagation here, if you wish. If you
don’t the event bubbles up to defaultFunction(). If the user
clicks anywhere else defaultFunction() is also executed.

11. Turn Event propagation off
function doSomething(e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
This stops all propagation of the event in the bubbling phase.
Stopping event propagation in the capturing phase is
impossible.

12. The quot;thisquot; keyword
In JavaScript this always refers to the “owner” of the function
we're executing, or rather, to the object that a function is a
method of.
function doSomething() {
alert(this);
}
When calling the doSomething() function, the owner of it is
the quot;windowquot;, therefore it will alert the window object.
Event registration takes care of the ownership, making the
HTML element (on which we are applying the Event) the
owner.

13. The quot;thisquot; keyword
Using inline event registration doesnt quot;copyquot; the function, it
just refers to it:
<element onclick=quot;doSomething()quot;>
in this case quot;onclickquot; is not the function doSomething, rather it
just refers to the function and tells it to run it. The quot;thisquot; in
doSomething() will refer to the window object once again.
function onclick() {
doSomething();
}

14. Any Questions?