Christian Heilmann

You are currently browsing the archives for the libraries category.

Archive for the ‘libraries’ Category

The missing native DOM methods – according to my course attendees

Thursday, July 31st, 2008

During the course I am currently giving in Sunnyvale on basics of the DOM and progressive enhancement I asked the attendees which methods seem to be missing in the native DOM implementation and this is what we came up with:

  • createLink(url,text) – a shortcut method to create a link with a text node inside – something you constantly have to do when creating interfaces
  • insertAfter(newNode,oldNode) – there is an insertBefore, but no insertAfter
  • removeNode(node) – the native removeChild is convoluted
  • textElement(elementName,text) – it seems not necessary to create an Element, then create a text node and apply it, this could be one step
  • addScript(url) – to lazy-load JavaScripts
  • normalizeNode(node) – to remove those pesky line-breaks that interfere with nextSibling or previousSibling
  • getText(node) – retrieving the text content of a node that is either a text or an element node
  • setText(node,text) – setting the text regardless of node type

I asked the attendees to come up with a method each and to present them, here’s what we got:

jukuhelpers = function(){
function createLink(url,text,cssClass){
var link = document.createElement(‘a’);
if (typeof url = 'string'){
link.setAttribute('href', url);

if (typeof text = ‘string’){

if (typeof cssClass = 'string'){
link.className = cssClass;

return link;

function insertAfter(newNode,oldNode){
? oldNode.parentNode.insertBefore(newNode, oldNode.nextSibling)
: oldNode.parentNode.appendChild(newNode);

function removeNode(node){
if (node) {

function textElement(elementName,text){
if (typeof text = ‘string’){
var txtElement = document.createElement(elementName);
var txtNode = document.createTextNode(text);

return txtElement;

function addScript(url){
var s = document.createElement(‘script’);
s.setAttribute(‘type’, ‘text/javascript’);
s.setAttribute(‘src’, url);
var head = document.getElementsByTagName(‘head’)[0];

function getText(node){
var txt;
if (node && node.nodeType = 1) {
if (node.hasChildNodes()) {
txt = node.firstChild.nodeValue;

if (node && node.nodeType = 3) {
txt = node.nodeValue;

return txt;

function setText(node,text){
if (node && node.nodeType = 1) {
if (node.hasChildNodes()) {
node.firstChild.nodeValue = text;

else {

if (node && node.nodeType = 3) {
node.nodeValue = text;

function normalizeNode(node){
var spaceTest = /^s+$/;
var children = node.childNodes;
for(var i=0;children[i];i++){
if(children[i].nodeType === 3){





You can get the jukuhelpers.js file if you want to use it yourself.

Anything else that is missing or any bugs in this?

YUI 2.4.0 is out – CSS Selector engine, JSON support, dynamic CSS/script getter and lots more

Wednesday, December 5th, 2007

It is quite cool to see that your feedback is being implemented in something as big as the YUI. With every release the team excels itself building new components but also fixing and changing the existing ones.

Part of my job is to test the YUI for the European market (as we by default develop in 5 languages and encounter totally different issues) and in Asia (oh well, obvious that there are differences) and I am happy to say that all the problems we found got fixed and several of our suggestions implemented in this release.

While a lot of this is under the hood you can also see some new components in the 2.4.0 release:

  • Probably the most anticipated step is YUI getting a jQuery style CSS selector engine which allows you to quickly access the document without having how to traverse the Dom with native functions.
  • For those who need to work with numerical data a lot, the YUI now has a Flash charts component which allows you to create fancy pies and graphs easy
  • The new get utility is not the same as YAHOO.Dom.Get() but allows you to load scripts and CSS on demand after the page has been rendered by creating new nodes and having control over what has been loaded. This is quite handy in terms of page performances and I waxed lyrical over that in the past.
  • Those who love to take your Script to the garage and give them an intensive test-run will love the new Profiler which profiles JS in a browser environment
  • And last but not least we finally proclaimed our undying love to the JSON format by adding a new JSON component that allows you to stringify and validate JSON you retrieve either with dynamic script nodes or AJAX.

Again, under the hood, there are a lot of changes you cannot see but result in much better performance, especially in the DragDrop and the Rich Text Editor Control.