A related file with these DOM utilities is The Complete DOM Manager Class: A Document Object Model Class To Create Nodes, Empty, Delete, Remove, Replace, Move, Swap Nodes, And To Emulate innerHTML, innerText.
This class I feature here, however, has two different characteristics:

• It performs widely common actions on the grabbed nodes, but these tasks are nearly all geared towards DHTML effects (center, reposition, etc) and to retrieve a whole set of data about the Dom Nodes (or just call it plainly "layers" if you prefer or you are more familiar with this naming convention).
• Unlike the other file, this class appends the methods to each node passed as an argument upon initialization: that is, if you have a variable, say named foo that holds a Dom object, upon such variable you can invoke the available methods, instance:
  foo.coordinates();
  • Remember that in order to grab Dom nodes you have, basically, two ways: one is of using getElementById:
    document.getElementById("aLayerID_here")
  • The other is of using getElementsByTagName:
    document.getElementsByTagName("BODY")[0]
    whereas in this latter case keep in mind that to obtain a Dom node by a tag name these rules apply:
    1. The tag name must be passed all uppercase.
    2. It is returned an array of nodes, thus if you are positive the tag exists, you could also retrieve immediately any item of the array by appending to the call the square bracket with the index (of course, indexes start with zero).
    3. If no such tag exists, keyword null is returned, thus you cannot index it as an array any longer. If thus you use the immediate array indexing, be sure you are absolutely certain the tag exists with at least one tag pair instance in your html source.

The name of the class is domUtilities (and it is case sensitive).
However, although it is a class, it is not necessary, actually, to initialize it with the javascript new keyword as javascript classes usually require.
However, in the example codes, I will use such keyword and assign the class instance to a variable whatever (I shall call it aname). In this fashion the initialized variable will hold also the result that this class returns, which is an array whose each entry is one of the arguments passed upon initialization (you shall see promptly how) but now all turned into Dom objects (in fact, upon initialization you could also pass mere layer id Strings rather than objects).

The class accepts only one argument. This argument can be:

• A string, representing an existing layer ID.
• An already grabbed Dom object via document.getElementById or via document.getElementsByTagName, as previously explained.
• An array. In this last case, you can pass multiple layers and DOM objects alternating string IDs or already grabbed Dom nodes as you prefer.
• If when invoking a method upon a Dom object you get an error namely that the invoked method does not exist, it means that you have forgotten to add such layer as argument to domUtilities.
• You can perform multiple calls to domUtilities in your code or during the lifetime of the document in the browser's memory - thus, for instance, adding more Dom objects on the fly or on events if you need it: that's fine and will cause no troubles (not even if by mistake you add twice the same Dom object).
• Since the class uses javascript keywords such as offsetTop, offsetLeft, offsetHeight, offsetWidth, which a browser rendering engine will calculate only when the whole document has been loaded in its memory, be warned that you should in initialize this class only after the onload event or soon before the body tag is closed (also after it is closed is acceptable).

So, an instance initialization may look as follows (note that I am passing the only argument as an array, whose boundaries are defined via the square brackets notation of arrays, and note that I also use the keyword var at the beginning): var aname = new domUtilities([
"aLayerID",
document.getElementById("aLayerID2"), /*passed as dom object, is fine*/
"aLayerID3",
document.getElementsByTagName("DIV")[8]/*it presumes you know the 8th DIV is to be added*/
]); From now on, on each of those objects you can invoke directly any of the class methods (which are to be reported in the next chapter), say: document.getElementsByTagName("DIV")[8].coordinates(); To add on the fly say one more layer at a second moment, also a mere call such as the following would suffice (of course you could just repeat the same initialization with the keyword new that we have just seen, changing the passed arguments - no problem would ensue): domUtilities("another_layerID"); If you pass the second argument, another_layerID will be also a window scoped variable name holding its node object.

Analogously, also to add on the fly multiple layers at once and at a second moment or upon some event, the mere call such as the following would suffice as well but only as long as (beingpassed multiple layers) you remember to pass them encapsulated within an array (that is, using for instance the square brackets notation for arrays): domUtilities( [ "another_layerID", document.getElementsByTagName("SPAN")[2] ] ); If you pass the second argument, another_layerID and SPAN2 will be also window scoped variable names holding its node object.

Here are the methods you can use. To each of them is prepended a placeholder , for illustrative purposes merely named foo, which in your codes should then be either a Dom node grabbed via the built in javascript Dom methods document.getElementById, document.getElementsByTagName, or a javascript variable with whatever name (for what matters, even exactly foo) that holds a Dom object retrieved via the previous assignment to it of a call to document.getElementById, document.getElementsByTagName, say: var foo = document.getElementById("anID");

domUtilities(foo); //add it! Being one argument only, passing it within an array is not mandatory

var storeReturnedCoordinatesSomewhere = foo.coordinates(); Alternatively: domUtilities( document.getElementById("anID") ); //add it!

var storeSomewhere = document.getElementById("anID").coordinates(); Most method names (although not all) will start with the prefix its to avoid an anyway unlikely name conflicts with built in Dom objects already assigned properties or method names (I am not aware of any which, at any rate, start with its). Some methods have also aliases: I will not report all the aliases (mostly added to accommodate most common typos or wrong font cases), however to stay safer use the methods with the reported names considering them case sensitive.

METHODS OVERVIEW
foo. its( String ); A Carlo Crivelli painting	This method has been derived by the codes for the script Locate prevailing style sheet rule for a layer, and can spot the value assigned to the css property passed as a string argument: it will search in order of prevalence, namely first in the style tag declaration of the foo Dom object, then in the Css rules scanned in the proper way, style sheet by style sheet, rule by rule, correctly detecting the prevailing one as long as your css selectors are all in the sahpe of either the #id notation or in the .classname notation or in the tagname notation, without fancy combinations of those (actually, all css could be achieved by merely using the .classname notation). The only other case it may fail is if the style sheet is imported via the css keyword import or if multiple css classes are assigned inside the tag class property (this latter case would be legitimate, though I nearly never saw it implemented). You can pass the string argument. which must be a valid css property, as you would write the very same css property in a css declaration, and please lowercase. foo.its("border-width"); Browsers may differ, depending on the property sought for, in the way the result is reported. Being the css properties so many, I leave to your own testing determining this. However, whether for instance a border is set via a border: css declaration or a border-width: declaration it seems that browsers report the results for the width in both cases as disaggregated. The function returns an array whose first entry [0] is the value found, the second entry [1] is the browser reported full css string for that rule, the third entry [2] is the rule object itself where the rule which applies was located. a layer <div style="border:#fddc71 4px double;padding:10px;" id="t1">a layer</div> domUtilities('t1'); document.getElementById('t1').its('border-width'); a layer <style>#t2{border:#fddc71 3px double; border-width:100px; border-width:5px;}</style> <div id="t2">a layer</div> domUtilities('t2'); document.getElementById('t2').its('border-width'); The last test will not work on Opera, at least until version 8.5x, because Opera does not seem to recognize the styleSheets keyword.
foo. its2( string );	It is the same as the method previously defined, but returns a mere string. Yet, the previous method could not spot correctly the property value in case of complex css selectors are present in your document, as said there. Unfortunately, to date no built in method can do it in case of complex selectors: there exist the Internet Explorer only method (better: collection) named currentStyle that does it magnificently, but the Mozilla and Opera equivalent method named defaultView. getComputedStyle(NODEHERE,null). getPropertyValue fails miserably to date (2006) at detecting even common properties like border-width. However, this method its2 uses the above mentioned ways, in case you may like using them in the rare cases when also the Mozilla method works correctly.
foo. center( domObject, Number ); Emanuela Folliero	To have safe results, your layers should be, in order to use this method, positioned in an absolute manner. However, that they have a position declared at least as relative is mandatory. The best way is to position them as absolute, and then to wrap them inside a foo foo containing layer if you want them to act as if they were placed relatively (I argue here you know already that an absolutely positioned layer within a non positioned container will be positioned absolutely in regard of the container, not of the whole page). The layer passed as argument will be centered upon the foo layer. To center on the page, grab the body tag via: document.getElementsByTagName("BODY")[0] add it to the domUtilities and call on it center with another grabbed layer (the one to be centered on the page) as its argument. The function by default adds the document page offsets, to position it within the screen level where the user has currently scrolled. To avoid this (a decision up to you depending on how your page is arranged, pass the second argument as number 1). t3 t4 <div> <!-- container --> <div style="border:#000000 1px solid; position:absolute; width:300px; height:300px; z-index:2;" id="t3">t3</div> <div style="border:#000000 1px solid; position:absolute; width:30px; height:30px; z-index:3;" id="t4">t4</div> </div> domUtilities(['t3', 't4']);//pass both, safer document.getElementById( 't3' ).center(document.getElementById( 't4' ));
foo. onTop( domObject, Number, Number, Number ); onBottom( domObject, Number, Number, Number ); onLeft( domObject, Number, Number, Number ); onRight( domObject, Number, Number, Number );	As far as the position is concerned, the same things said for the method named center apply here too. These methods move the layer passed as first argument to the top, bottom, left or right of the layer upon which they are invoked. The second argument is a number: if passed it also centers the layer (try with the test form below to see what it means). They accept two more arguments, both numbers (also negative is fine), which will be added respectively to the top and left coordinates as calculated by the methods when deriving the position coordinates. t19 t20 <div> <!-- container --> <div style="border:#000000 1px solid; position:absolute; width:100px; height:100px; z-index:2;" id="t19">t19</div> <div style="border:#000000 1px solid; position:absolute; width:30px; height:30px; z-index:3;" id="t20">t20</div> </div> domUtilities(['t19', 't20']);//pass both, safer document.getElementById( 't19' ).onTop( document.getElementById( 't20' )   ); Run as centered (2nd argument set to 1)? »
foo. opacity( Number);	Pass to it a number, it will set the opacity of the layer to the given value. It is cross browser. The number should range from zero to 1, with all the floating point shades in between allowed. Note: beware, opacity on some browsers seem never to work if the layer upon which opacity has been invoked has not been css positioned in an absolute way, or if it isn't floating. Stacked Text <div style='position:relative; width:250px; height:250px; border:#ff0000 2px solid; background-color:#ffff00'> <div id='opaque' style='position:absolute; top:50px; left:50px; width:250px; height:250px; border:#00ffff 5px solid; background-color:#000000; z-index:2;'> <br> <br> <span style='z-index:3; background-color:#ffffff; color:#000000;padding:10px;'>Stacked Text</span> </div> </div> domUtilities('opaque'); document.getElementById( 'opaque' ).opacity( Choose Value 0 0.10 0.20 0.25 0.30 0.50 0.60 0.75 0.85 0.90 1 2 ); Add a background to the layer to see the effect:
foo. coordinates( Number, Number ); A Filippino Lippi painting: Madonna of San Martino of Tours, the Madonna with the sexiest face I ever saw!	Returns an array of 4 entries: Entry [0]: an array on its own, of two entries: entry[0][0] is the top coordinate of the top left corner, entry[0][1] is the left coordinate of the top left corner Entry [1]: an array on its own, of two entries: entry[1][0] is the top coordinate of the top right corner, entry[1][1] is the left coordinate of the top right corner Entry [2]: an array on its own, of two entries: entry[2][0] is the top coordinate of the bottom right corner, entry[2][1] is the the left coordinate of the bottom right corner Entry [3]: an array on its own, of two entries: entry[3][0] is the the top coordinate of the bottom left corner, entry[3][1] is the the left coordinate of the bottom left corner The function has two argument, the first if passed as 1 instructs the method to use scrollWidth, scrollHeight to report some of the returned coordinates pairs (for which ones, see the code). This feature can be of some interest in case you use this function upon the BODY tag as its Dom Object: Internet Explorer (at least up to version 6, version 7 has not been released yet while I am writing this) does not consider as page offsets the whole width and height of the document (thus the height of the document would actually coincide, in the reported values, with the available screen height). Passing this argument would force it to do so. The second argument is a number (from 0 to 3 included) and if passed rather than omitted, it pinpoints one of the four entries of the returned array and then returns it only. domUtilities( document.getElementsByTagName('BODY')[0] ); document.getElementsByTagName( 'BODY' )[0].coordinates( 0: 1: ); Unless the object is absolutely positioned, in all browsers the returned position coordinates will be calculated as relative to the first pair of html tag that encapsulate the layer whose coordinates are inspected (in the example below, the coordinates are reported with regard to the cell table -TD html tag- within which the layer is included): t5 <div id='t5' style='width:35px; height:45px; border:#330033 1px solid;'>t5</div> domUtilities( document.getElementById('t5') ); document.getElementById('t5').coordinates(); Feel free to make your own tests, after all they will also be instructive to learn about browser quirks, whereas at the same time these methods will offer to you interesting and useful shortcut to common Dhtml tasks.
foo. itsWidth( Number ); Monica Bellucci	It returns an array of 5 entries: [0] is the width of the object (as reported with offsetWidth). It's the most (cross browser) reliable value. [1] is the scroll width of the object if it is scrollable. [2] is the width of the object (as reported with clientWidth). [3] is the left position of the rightmost margin. [4] is the top position of the rightmost margin. Browsers may differ insofar as some add or subtract border widths (x2) and paddings. Useful for testing. The number argument (in the range 0-4) allows to return one entry only of the returned array. t6 <div id="t6" style='width:100px; height:100px;border:#330033 1px solid;'>t6</div> domUtilities('t6'); document.getElementById('t6').itsWidth(); t7 makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll <div id="t7" style='width:100px; height:100px;border:#330033 1px solid; overflow:scroll;'>t7</div> domUtilities('t6'); document.getElementById('t6').itsWidth(); domUtilities( document.getElementsByTagName('BODY')[0] ); document.getElementsByTagName( 'BODY' )[0].itsWidth();
foo. itsHeight( Number ); Manueal Arcuri	It returns an array of 5 entries: [0] is the height of the object (as reported with offsetHeight). It's the most (cross browser) reliable value. [1] is the scroll height of the object if it is scrollable. [2] is the height of the object (as reported with clientHeight). [3] is the left position of the bottom margin. [4] is the top position of the bottom margin. Browsers may differ insofar as some add or subtract border widths (x2) and paddings. Useful for testing. The number argument (in the range 0-4) allows to return one entry only of the returned array. t7 <div id="t7" style='width:100px; height:100px;border:#330033 1px solid;'>t7</div> domUtilities('t7'); document.getElementById('t7').itsHeight(); t8 makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll <div id="t8" style='width:100px; height:100px;border:#330033 1px solid; overflow:scroll;'>t8</div> domUtilities('t8'); document.getElementById('t8').itsHeight(); domUtilities( document.getElementsByTagName('BODY')[0] ); document.getElementsByTagName( 'BODY' )[0].itsHeight();
foo. itsTop( Number ); Emanuela Folliero	It returns an array of 5 entries: [0] is the top position of the object (as reported with offsetTop). It's the most (cross browser) reliable value. [1] is the top position of the object if declared within the tag style attribute. [2] is the top position of the object (as reported with clientTop, and an empty string on some Mozilla versions which seem not to read it). [3] is the top position of the bottom margin. [4] is the left position of the bottom margin. All positions if the layer is not absolutely positioned, are calculated in respect of the container. Browsers may differ insofar as some add or subtract border widths (x2) and paddings. Useful for testing. The number argument (in the range 0-4) allows to return one entry only of the returned array. t9 <div id="t9" style='width:100px; height:100px;border:#330033 1px solid;'>t9</div> domUtilities('t9'); document.getElementById('t9').itsTop(); t10 makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll <div id="t10" style='width:100px; height:100px;border:#330033 1px solid; overflow:scroll;'>t10</div> domUtilities('t10'); document.getElementById('t10').itsTop(); domUtilities( document.getElementsByTagName('BODY')[0] ); document.getElementsByTagName( 'BODY' )[0].itsTop();
foo. itsLeft( Number ); Emanuela Folliero	It returns an array of 5 entries: [0] is the left position of the object (as reported with offsetLeft). It's the most (cross browser) reliable value. [1] is the left position of the object if declared within the tag style attribute. [2] is the left position of the object (as reported with clientLeft, and an empty string on some Mozilla versions which seem not to read it). [3] is the left position of the rightmost margin. [4] is the top position of the rightmost margin. All positions if the layer is not absolutely positioned, are calculated in respect of the container. Browsers may differ insofar as some add or subtract border widths (x2) and paddings. Useful for testing. The number argument (in the range 0-4) allows to return one entry only of the returned array. t11 <div id="t11" style='width:100px; height:100px;border:#330033 1px solid;'>t11</div> domUtilities('t11'); document.getElementById('t11').itsLeft(); t12 makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll <div id="t12" style='width:100px; height:100px;border:#330033 1px solid; overflow:scroll;'>t12</div> domUtilities('t12'); document.getElementById('t12').itsLeft(); domUtilities( document.getElementsByTagName('BODY')[0] ); document.getElementsByTagName( 'BODY' )[0].itsLeft();
foo. size( Number, Number );	Pass to it two numbers, representing the width and height. It will resize the layer accordingly. It returns an array of 4 entries: the new width, the new height, the old width, the old height; all are numbers.
foo. rationalSize( Number, Number, Number );	First argument is a number, representing a new dimension value. Second argument if passed as 1, applies such new dimension to the height, otherwise if not passed or passed as zero applies such new dimension to the width. The dimension not directly affected by the argument assignment, will be calculated performing a proportion so that the ratio of the matching width (if the height was meant to be set via arguments) will be the same of the original layer, and so that the ratio of the matching height (if the width was meant to be set via arguments) will be the same of the original layer. A third argument, if passed as 1, avoids the actual resizing of the layer, and will instruct the function to just return. The returned value is an array of four entries, being these the new width, the new height, the original width, the original height.
foo. position( Number, Number );	Pass to it two numbers, representing the top and left. It will reposition the layer there. It returns an array of 4 entries: the new top, the new left, the old top, the old left; all are numbers.
foo. rationalPosition( Number, Number, Number );	First argument is a number, representing a new position value. Second argument if passed as 1, applies such new position to the left, otherwise if not passed or passed as zero applies such new position to the top. The position not directly affected by the argument assignment, will be calculated performing a proportion so that the ratio of the matching left (if the top was meant to be set via arguments) will be the same of the original layer, and so that the ratio of the matching top (if the left was meant to be set via arguments) will be the same of the original layer. A third argument, if passed as 1, avoids the actual repositioning of the layer, and will instruct the function to just return. The returned value is an array of four entries, being these the new top, the new left, the original top, the original left.
foo. itsScroll( ); A Jan Vermeer painting	Returns an array of two entries, the first the top scroll, the second the left scroll of a scrollable element. t13 <div id="t11" style='width:100px; height:100px;border:#330033 1px solid;'>t13</div> domUtilities('t13'); document.getElementById('t13').itsScroll(); Below, to appreciate the differences, scroll manually the small layer before clicking the test button. t14 makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll makeitscrollmakeitscroll <div id="t14" style='width:100px; height:100px;border:#330033 1px solid; overflow:scroll;'>t14</div> domUtilities('t14'); document.getElementById('t14').itsScroll();
foo. itsEvents( event ); A Filippino Lippi painting	Its only argument is mandatory and must appear in the invocations as keyword: event (lowercase). It reports the top and left coordinates of an event, both as numbers, in an array of two entries. The way to use it is that if you have a function that is meant to be triggered on an event (and thus has among its arguments the event keyword), then you can invoke from within it such method on any domUtilities initialized dom Object passing to it again the event keyword in order to have returned the event positions as described above. t15 <div id="t15" style='width:100px; height:100px;border:#330033 1px solid;'>t15</div> domUtilities('t15'); var L=document.getElementById('t15'); L.onclick=function(event){alert( L.itsEvents(event) );}
foo. itsSource( event, Number, String ); Elisabetta Canalis	Its first argument is mandatory and must appear in the invocations as keyword: event (lowercase). It reports the Dom object (layer) that triggered (was subject to) an event. If you pass the second argument as number 1, it will happen what follows: in case the layer includes other tags, the event on an included tag bubbles up to the layer that is its container (which is the very same Dom object upon which you have called the method). Passing the second argument all the passages before such eventual container is attained get reported as well. What is returned is thus an array of Dom Objects. It accepts a third argument, a string representing a valid Dom property name for a Dom object node. If this argument is passed, what happens is that in the array will be aligned rather than the Dom nodes, the Dom property specified in this string. Typical values could be (case sensitive): 'nodeName', 'nodeType', 'nodeValue', 'style', 'id'. In the example we will pass this third argument, as 'id'. Note that Internet Explorer exhibits (at least in version 6) a strange thing: if you click on the red strip, as long as you click upon the text too it will report (correctly) two passages, but if you click the red strip where no text is, it will report (wrongly) one passage only (Mozilla doesn't do this). t16 nested 1 nested 2 <div id="t16" style='width:100px; height:100px;border:#330033 1px solid;'>t16 <div style='background:#ff0000' id='divID'>nested 1<div> <strong style='background:#ffff00' id='strongID'>ne<em style='background:#00ffff' id='emID'>sted</em> 2</strong> </div> </div> domUtilities('t16'); var L=document.getElementById('t16'); L.onclick=function(event){alert( L.itsSource(event, 1, 'id') );}
foo. parents( String );	It returns an array whose first [0] element is the dom Object itself, and all the subsequent entries are each a dom Object representing a tag that encapsulated (=parent) the first, climbing this ladder upward from within. It accepts one argument, a string representing a valid Dom property name for a Dom object node. If this argument is passed, what happens is that in the array will be aligned rather than the Dom nodes, the Dom property specified in this string. Typical values could be (case sensitive): 'nodeName', 'nodeType', 'nodeValue', 'style', 'id'. To the TD tag of this cell has been assigned an id='t17', so: domUtilities('t17'); document.getElementById( 't17' ).parents( 'nodeName' );
foo. siblings( String ); Emanuela Folliero	A sibling is a tag that is on the same level of another. That is, if two elements are encapsulated within a container, the former two elements are each sibling of the other because they repose on the same level. The method finds the siblings of the Dom object it is called from, and returns an array whose first entry is a number representing how many siblings are before the Dom object the method was called from, whose second entry is an array on its own turn whose each entry is the siblings aligned in order from the first till the last, including the Dom object the method was called from, and the third entry is again a number representing how many siblings are after the Dom object the method was called from. It accepts one argument, a string representing a valid Dom property name for a Dom object node. If this argument is passed, what happens is that in the array will be aligned rather than the Dom nodes, the Dom property specified in this string. Typical values could be (case sensitive): 'nodeName', 'nodeType', 'nodeValue', 'style', 'id'. To the TD tag of this cell has been assigned an id='t18', being included within a pair of TR tags and having only one sibling TD (but, warning: Mozilla reports carriage returns in the html source as object text nodes, IE doesn't): domUtilities('t18'); document.getElementById( 't18' ).siblings();

Here are, at last, your codes: there are a few additional comments within them, a few of them could be relatively useful, but only Internet Explorer will allow you to see them in the textarea below: