Posts

Showing posts from May, 2006

Delete all children nodes

To remove all children nodes (from childNodes list) use:

while(listNode.firstChild) { // delete all nodes       listNode.removeChild(listNode.firstChild); }
Of course innerHTML will work too:

listNode.innerHTML = '';

Traverse/walk DOM tree recursively

Task definition:You have a DOM tree (startNode which can be the whole document), and need to find first specific tag in this tree.

Here is the recursion function to do this:
function findNodeByTag(startNode, tagName) {     if (startNode.nodeName.toLowerCase() == tagName.toLowerCase()) return startNode;     var childList = startNode.childNodes;     for (var i=0; i<childList.length; i++) {         return findNodeByTag(childList[i], tagName);     }     return null; }
And you call it:
findNodeByTag(myDOMobj, "img");

Add, delete and manipulate DOM nodes

Here are examples taken from some of my code just to memorize common use node functions. I hope they are self-explanatory.


// Clone DOM node
var movingUrl = urlLineSPAN.cloneNode(true);
// Get Parent node
var urlList = urlLineSPAN.parentNode;
// Delete DOM Node
urlList.removeChild(urlLineSPAN);
// Add DOM node
urlAreaObj.appendChild(newNode);
// or
urlAreaObj.insertBefore(newNode, existingNode);

Swap DOM nodes

To swap DOM nodes you can use this example:


var oldNodeAtPosition = document.getElementById(existingNode);
var newNodeAtPosition = document.getElementById(retrievedNode);
// swap DOM nodes
// API: replaceChild(child1,child2) -- replace node child2 by node child1
oldNodeAtPosition.parentNode.replaceChild(newNodeAtPosition.cloneNode(true), oldNodeAtPosition);
newNodeAtPosition.parentNode.replaceChild(oldNodeAtPosition.cloneNode(true), newNodeAtPosition);

DHTML: Dynamic Navigation through DOM element with scrollTop

Image
I had a task to implement vertical navigation by the long list of items which does not fit the browser window. It has to be hidden if list of items shorter than height of the window. Note also I has to use frames.




Okey, let's start. First, I disabled standard scrollbars within the window:

<style>
html,body { overflow: hidden; }
body { position: absolute; top: 0; left: 0; }
</style>

Then I disabled scrollbars in DIV area which should be navigated:


#taglist{ width:100%; overflow:hidden; }

Then I created DIV area with up/down buttons bound to right lower corner of the window. I wrote in CSS file:


.sbnav { position: absolute; bottom: 5px; right: 5px; text-align:right; background-color: #fbffba; padding:3px; }
.sbnav-up { margin-bottom: 6px; }
.sbnav-down { margin-top: 6px; }

and in HTML (the simpliest piece):

<div id="taglist"></div>

Couple more tricks in this work:
1. Shift displayed area. For this purpose I have to control scrollTop DOM property. I wrote two funct…

DHTML: Add event dispatcher to HTML form field

Sure you can use this function with any DOM object. Not only a form field.


/* event dispatcher */
function installAC(frm, fld) {
a = document.forms[frm].elements[fld];
if (a.addEventListener) {a.addEventListener("keyup", PerformActions, false)} // firefox
else if (a.attachEvent) {a.attachEvent("onpropertychange", PerformActions)} // ie
}

/* actions to do */
function PerformActions(h) {
// your code here
}

DHTML: Get Height of window and DOM element

offsetHeight property of DOM element will let you get its height.

Following javascript function will return the height of the window:

/* Get window height. To get DOM element height use offsetHeight. */
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}