// ------------------------------------------------
//   document.getElementById()

/* 
DOM browsers use the document.getElementById method to reference the element. You can use a simple if statement to check for the existence of this method.
*/ 

if( document.getElementById ){
	var myReference = document.getElementById('divID');
}


// ------------------------------------------------
//   Changing the position

var noPx = document.childNodes ? 'px' : 0;
if( myReference.style ) { myReference = myReference.style; }
myReference.left = ( parseInt(myReference.left) + 10 ) + noPx;
myReference.top = ( parseInt(myReference.top) + 20 ) + noPx;


// ------------------------------------------------
//   Changing the background color

if( myReference.style ) { myReference = myReference.style; }
if( myReference.background ) {
  //supported by most browsers
  //like Gecko browsers and the IE series
  myReference.background = '#00ff00';
} else if( myReference.backgroundColor ) {
  //supported by most browsers
  myReference.backgroundColor = '#00ff00';
} else if( myReference.bgColor ) {
  //used by layers browsers
  myReference.bgColor = '#00ff00';
} else {
  //FAILURE, there is no way to change the background colour
}


// ------------------------------------------------
//   Changing the z-index

/*
The z-index of positioned elements defines what order they should be stacked above each other. The z-index should be a positive integer. The higher the z-index, the more positioned elements it will be stacked on top of. Two elements must not be given the same z-index. To read the z-index of a positioned element, it must be already defined using the inline style syntax.
*/

if( myReference.style ) { myReference = myReference.style; }
myReference.zIndex = 100;

// ------------------------------------------------
//   Changing the clipping

/*
Clipping can only be used on absolutely positioned elements.

This technique is usually used for message scrollers. In browsers that do not support clipping, it is possible to provide them with an iframe so that the contents of that can be scrolled. Please see my scroller example for a more detailed explaination of what clipping is and how it works.
*/

if( myReference.clip ) {
  myReference.clip.left = 0;
  myReference.clip.top = 0;
  myReference.clip.right = 10;
  myReference.clip.bottom = 10;
} else if( myReference.style ) {
  //top right bottom left
  myReference.style.clip = 'rect(0px, 10px, 10px, 0px)';
} else {
  //FAILURE, nothing works
}

// ------------------------------------------------
//   Changing the size

if( myReference.style ) { myReference = myReference.style; }
if( myReference.resizeTo ) {
  myReference.resizeTo( newWidth, newHeight );
}
var noPx = document.childNodes ? 'px' : 0;
myReference.width = newWidth + noPx;
myReference.pixelWidth = newWidth;
myReference.height = newHeight + noPx;
myReference.pixelHeight = newHeight;


// ------------------------------------------------
//   Rewriting the contents

if( typeof( myReference.innerHTML ) != 'undefined' ) {
  //used by all current browsers
  myReference.innerHTML = 'some <b>new</b> content';
}


// ------------------------------------------------
//   Creating new positioned elements


if( document.layers && window.Layer && document.classes ) {
  //create a layer 350px wide
  document.layers['newName'] = new Layer( 350 );
  //write its content
  document.layers['newName'].document.open();
  document.layers['newName'].document.write('new content');
  document.layers['newName'].document.close();
  //style it
  document.layers['newName'].left = 0;
  document.layers['newName'].top = 0;
  document.layers['newName'].visibility = 'show';
} else if( document.body ) {
  var theString = '<div style="position:absolute;left:0px;top:0px;' +
    'width:350px;">new content</div>';
  if( document.body.insertAdjacentHTML ) {
    document.body.insertAdjacentHTML( 'beforeEnd', theString );
  } else if( typeof( document.body.innerHTML ) != 'undefined' ) {
    document.body.innerHTML += theString;
  } else {
    //FAILURE, nothing works
  }
} else {
  //FAILURE, nothing works
}


// ------------------------------------------------
//   Changing the display style of any element


function changeDisplay( elementId, setTo ) {
   var theElement;
  if( document.getElementById ) {
    //DOM
    theElement = document.getElementById( elementId );
  } else if( document.all ) {
    //Proprietary DOM
    theElement = document.all[ elementId ];
  }
  if( !theElement ) {
    /* The page has not loaded, or the browser claims to
    support document.getElementById or document.all but
    cannot actually use either */
    return;
  }
  //Reference the style ...
  if( theElement.style ) { theElement = theElement.style; }
  if( typeof( theElement.display ) == 'undefined' ) {
    //The browser does not allow us to change the display style
    //Alert something sensible (not what I have here ...)
    window.alert( 'Your browser does not support this' );
    return;
  }
  //Change the display style
  theElement.display = setTo;
}

http://www.howtocreate.co.uk/tutorials/javascript/dombasics

DOM manipulation

DOM

JavaScript