DOM and generated content in IE 6

DOM getAttribute("blah") returns null

[SethCall]

The situation:

I am generating a great deal of content with a server side script, primarily div's within div's, and internet explorer 6 will not properly query a attribute from the generated content.

An example:

Some sample generated content is as follows...

<div class="folderWrapper" id="tingle"> blah blah </div>

This code fails:

divObject = document.getElementById("tingle");

thisIsNull = divObject.getAttribute("class");

thisIsNull is null in IE with this generated content.
As proof that I am not crazy or doing something wrong, Mozilla 1.4 does this perfectly (of course).

Ok so my question is this. Does anyone know ANYTHING that can be done about this? Like call some magical function such as:"refresh dom info based on current source". If not, I am in a very tough situation to create a directory that can collapse and expand.

Btw, thank you WebmasterWorld: I haven't had to post in a looong time :) I still read posts though, and help out if someone hasn't beat me to it ;)

[Reflection]

Hmmm :).

Does just divObject without the getAttribute return null as well?

Does the code work if its not generated content?

[SethCall]

No it doesn't return null. If it did, the javascript runtime would through a error. I mean, the object is initialized as a div (and the appropriate div) but it just can't find any attributes.

I will check that it works with non-generated code ... I'm pretty sure it does though.

[SethCall]

WooHoo! The answer is here!

Ok heres the code that works cross-browser.

function InitializeJsInfo()
{
allDivs = document.getElementsByTagName("div");

for(i = 0; i < allDivs.length; i++)
{
classObject = allDivs[i].getAttributeNode("class");

if(classObject!= null)
{
if(allDivs[i].getAttributeNode("class").value == "folderWrapper")
{
allDivs[i].style.display = "none" ;
}
}
}
}

I'll briefly explain.
getAttribute() does not work in IE 6 for generated code. It returns null when it should not.

getAttributeNode() DOES work in IE6 and Mozilla.
This method returns a node of just the attribute requested.

NOte: difference between browsers:
IE 6 returns *always* returns an object when using getAttributeNode(). But, if the class is not actually declared in the object that getAttributeNode() is used on, then Mozilla will return null to the object.

Hence the line:

if(classObject!= null)

This is necessary to make Mozilla not exit the js routine prematurely, as performing methods on a null object will cause it to fail.

Also, the .value of the attribute node in IE, if its this situation, is == "".

[gph]

This should work in IE5+ but your idea is better Seth because it doesn't require sniffing.

thisIsNull = divObject.getAttribute("className")

AFAIK you need to use className in IE for setAttribute and getAttribute

[SethCall]

ARg! really? Um.. that would be VERY very very non-standard. Oh wait, we are talking about IE. Well, anyway, thank you for the knowledge tidbit :)

[ShawnR]

"...getAttribute() does not work in IE 6 for generated code..."

I'm sure its got nothing to do with server side generated code. The browser doesn't see any difference (unless the cgi script has bugs).

I think gph has it. I bet your original code will work if you replace divObject.getAttribute("class"); with divObject.getAttributeNode("class").value;

Shawn

[SethCall]

but... but... thats *exactly* what I did in my first post.

Ill give it a try tomorrow, and see if I just didn't make a mistake, but what you are writing is basically exactly what I tried.

[SethCall]

Actually, im sure it didn't work in only IE 6, because the exact same code worked perfectly in MOzilla...

[ricfink]

IE just can't win, can it? Even when it's absolutely in compliance with W3C standards.

Sethcall says:
"Um.. that would be VERY very very non-standard. Oh wait, we are talking about IE."

From the W3C spec on HTML element core attributes:

Attributes
className of type DOMString
The class attribute of the element. This attribute has been renamed due to conflicts with the "class" keyword exposed by many languages. See the class attribute definition in HTML 4.01.

If the other browsers aren't doin' it this way, they're doin' it wrong.

[ShawnR]

"...but... but... thats *exactly* what I did in my first post..."

What you had was:

divObject.getAttribute("class");

What I'm suggesting is:

divObject.getAttributeNode("class").value;

In fact, you may find that all you need is:

divObject.getAttribute("class").value;

Sorry this is all conjecture; I haven't actually tried it.

[SethCall]

oh oops ;) good one ricfink.

[gph]

Thanks ricfink. In the past I sniffed IE for this. I will have to reverse that.

[killroy]

I'm sure its got nothing to do with server side generated code. The browser doesn't see any difference (unless the cgi script has bugs).

No, we're talking about client side generated code using the DOM and JS. just FYI

SN

[ShawnR]

"...No, we're talking about client side generated code using the DOM and JS. just FYI ..."

killroy, that explanation was in response to messages #1, #2, #3 and #4, where SethCall suspected the problem had something to do with the fact that his code was generated from server-side script. But well done for joining the discussion and making it clear.

[Xuefer]

"...No, we're talking about client side generated code using the DOM and JS. just FYI ..."

no, it's problem of server site script, and even not cliend site scirpt generating problem
it's IE6 itself

alert(divObject.getAttribute("className"));
this will give u "folderWrapper"
funny yet, it's true

this won't work under mozilla
however, divObject.className works in both browsers