Christian Heilmann

The missing native DOM methods – according to my course attendees

Thursday, July 31st, 2008 at 3:28 pm

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’){
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?

Tags: , , , , ,

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: