Javascript and DOM


Published on

JS.Chi() 12/18/08

Published in: Technology

Javascript and DOM

  1. 1. Javascript & the DOM Luca Matteis
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Any Questions?