[Javascript] Wrestling with DOM access (artificial attributes, IE vs Firefox vs Safari)

[Charles Albrecht]

An example of what I'm working with below is at:
  http://euonymic.com/~charlesa/test/menu_test.html

I'm trying to find a more browser-neutral way to access artificial
attributes I've attached to blocks in my HTML than...

  var node = document.getElementById("name");
    oldvalue = node.artificialattribute   // IE, Safari
    oldvalue = node.getAttributeNode("artificialattribute").value  //
Firefox, Safari

  var newvalue = oldvalue;
    node.artificialattribute = value;  // IE, Safari
    node.setAttribute("artificialattribute", value);  // Firefox, Safari

In my case, the element I'm looking at is something like:

<tr id="row512" level="2" hidecount="0" expanded="true">  [1]

Now, I'm not particularly attached to leaving these in the HTML.
(hidecount and expanded merely store state and start with default
values anyway. level's more difficult, because I still need it in the
generated source somewhere.) Actually, I'd probably prefer to get them
out of the tag attributes so the page will come closer to validating
against its doctype.

I was trying to think of other ways of doing this. Perhaps trying to
get the values out of the DOM into an object or series of objects (one
for each of mytable.getElementsByTagName("tr")). But of course, it all
needs to tie back to the DOM. As I walk through my table, I'm going to
want to say, "based on the value I have stored for this node in the
DOM, how should I set its state?" - in my case, a simple
style.display="none" vs ="table-row".

Any suggestions for getting this to work in a more javascipt-centric
way without too many behavioral switches along the way (I already need
one for Firefox for a "while (node = node.nextSibling)" loop)? How
have others dealt with these kinds of issues in their code?

Right now, the IE (Safari) version of the code [1] is along the lines of:

var node = leaf;
var level = leaf.level;
while ((node = node.nextSibling) && (node.level > level)) {
  if (leaf.expanded) {
    node.hidecount++; 
  } else {
    node.hidecount--;
  }
  if (node.hidecount > 0) {
    node.style.display = "none"; 
  } else {
    node.style.display = "table-row"; 
  }
}
leaf.expanded = ! leaf.expanded;

The Firefox (Safari) version is much the same right now, but with
"getAttributeNode(...).value" and "setAttribute(..., ...)". (I haven't
even checked how all this behaves on WinIE yet.)

-Charles
 charles.albrecht at gmail.com

[1]  http://euonymic.com/~charlesa/test/menu_test.html