The missing native DOM methods – according to my course attendees
Thursday, July 31st, 2008 at 3:28 pmDuring 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 interfacesinsertAfter(newNode,oldNode)– there is aninsertBefore, but noinsertAfterremoveNode(node)– the nativeremoveChildis convolutedtextElement(elementName,text)– it seems not necessary to create an Element, then create a text node and apply it, this could be one stepaddScript(url)– to lazy-load JavaScriptsnormalizeNode(node)– to remove those pesky line-breaks that interfere withnextSiblingorpreviousSiblinggetText(node)– retrieving the text content of a node that is either a text or an element nodesetText(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’){
link.appendChild(document.createTextNode(text));
}
if (typeof cssClass = 'string'){
link.className = cssClass;
}
return link;
}
function insertAfter(newNode,oldNode){
oldNode.nextSibling
? oldNode.parentNode.insertBefore(newNode, oldNode.nextSibling)
: oldNode.parentNode.appendChild(newNode);
}
function removeNode(node){
if (node) {
node.parentNode.removeChild(node);
}
}
function textElement(elementName,text){
if (typeof text = ‘string’){
var txtElement = document.createElement(elementName);
var txtNode = document.createTextNode(text);
txtElement.appendChild(txtNode);
}
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];
head.appendChild(s);
}
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 {
node.appendChild(document.createTextNode(text));
}
}
if (node && node.nodeType = 3) {
node.nodeValue = text;
}
}
function normalizeNode(node){
if(node.hasChildNodes){
var spaceTest = /^s+$/;
var children = node.childNodes;
for(var i=0;children[i];i++){
if(children[i].nodeType === 3){
if(spaceTest.test(children[i].nodeValue)){
children[i].parentNode.removeChild(children[i]);
}
}
}
}
}
return{
createLink:createLink,
insertAfter:insertAfter,
removeNode:removeNode,
textElement:textElement,
addScript:addScript,
getText:getText,
setText:setText,
normalizeNode:normalizeNode
}
}();
You can get the jukuhelpers.js file if you want to use it yourself.
Anything else that is missing or any bugs in this?