On the third day we went deeper into the oddities of the DOM and how to access and create content in the current document. One thing I realized very fast is that teaching DOM before the days of FireBug was much easier - you can lead the group from property to property and method to method. With FireBug they are much faster in finding out what can be done and also get a lot of goodies that FireFox provides but aren’t the standard.
We went through the basics - setAttribute and the differences when using it in comparison to the shorter property notation (MSIE sees expando properties as attributes and in order to remove them you’d have to null both the attribute and the object property).
We then moved on quickly to createElement and createTextNode and detected the need to apply them to the document somehow to make them appear.
This lead to insertBefore and appendChild and we discovered that there is no insertAfter, which is a logical fault in the DOM.
As a remedy I asked the group to write their own insertAfter, which is a good exercise to re-iterate looping through child nodes as well as using the creation methods. There are of course several methods of writing an insertAfter, but I was pretty much stunned to see one of the attendees to come up with one I hadn’t thought of:
function insertAfter(newElm,elm){
var clone = elm.cloneNode(true);
elm.parentNode.insertBefore(clone,elm);
elm.parentNode.replaceChild(newElm,elm);
}
I am not too sure about its performance, but I really like the logic of it: this way you can be sure the new node will be after the old one regardless of where the old node is (last node, first or somewhere in the middle). This also means you don’t need to fork and use insertBefore or appendChild respectively.
Other examples we went through were removing nodes with a certain class (to show the problem of the changing length when iterating over a nodeList and removing elements) and writing a simple form validation script that changes the labels of mandatory fields when they are empty.
I wrapped up the day using the JSON output of the del.icio.us API to write out a list of bookmarks and tags:
<script type="text/javascript">
function mydelicious(data){
var ul = document.createElement('ul');
for(var i=0,j=data.length;i<j;i++){
var current = data[i];
var item = document.createElement(’li’);
var link = document.createElement(’a');
link.appendChild(document.createTextNode(current.d));
link.setAttribute(’href’,current.u);
item.appendChild(link);
var nested = document.createElement(’ul’);
var tags = current.t.join(’,');
var nesteditem = document.createElement(’li’);
nesteditem.appendChild(document.createTextNode(tags));
nested.appendChild(nesteditem);
item.appendChild(nested);
ul.appendChild(item);
}
document.body.appendChild(ul);
}
</script>
<script type="text/javascript" src="http://feeds.delicious.com/feeds/json/codepo8/?callback=mydelicious"></script>
In an extra step I then asked the team that instead of calling the API in an own script tag to progressively enhance a link and create the script tag dynamically:
<p><a href="http://del.icio.us/codepo8" id="bookmarks">My Delicious Links</a></p>
<script type="text/javascript">
function makemydelicious(){
var source = document.getElementById('bookmarks');
var url = source.getAttribute('href');
var url = url.split('/');
var username = url[url.length-1];
var apiurl = ‘http://feeds.delicious.com/feeds/json/’ +
username + ‘/?callback=mydelicious’;
var s = document.createElement(’script’);
s.setAttribute(’type’,'text/javascript’);
s.setAttribute(’src’,apiurl);
var head = document.getElementsByTagName(’head’)[0];
head.appendChild(s);
}
makemydelicious();
</script>
We then ranted a bit about the non-logic of DOM methods and their parameter order (”why is document.insertBefore(oldNode,newNode) not possible but instead we need oldNode.parentNode.insertBefore(newNode,oldNode)??”) and came up with a wishlist of DOM methods that should be native:
createLink(url,text)insertAfter(newNode,oldNode) - consistent with the native DOM inconsistencyremoveNode(node)textElement(elementName,text)addScript(url)normalizeNode(node) - removing whitespacegetText(node)setText(node,text)
This list is also the courses homework, and we’ll take a look at the results on Monday.
