For js developers: warning using dot.notation

[ott]

Tell me i'm not nuts but this:

this.foobar does not work with mozilla

this.getAttribute <bleh> ("foobar") does.

This caused me a big freakin' headache. hope I saved you from one.

Use get and set attribute unfortunately till someone validate my mental condition.


Unless a guru knows why this could be happening, my code does not function otherwise and i'm debugging up the tree its working arrg.

[jkd]

Presumably you're using custom attributes on HTML elements?

Keep in mind that JS property != DOM attribute. DOM0 bindings and DOM2 HTML put a correspondence between the two (in most cases), but that is far different than being the same thing.

Case in point:

label.htmlFor is the property that maps to the "for" attribute of label.
Or, element.className is the property that maps to the "class" attribute of element.
Another one: input.value versus input.getAttribute("value"). The latter should return the actual string specified in the markup of the value attribute, while input.value returns the current value of the input element.

IE may automatically create getters and setters for so-called "expando" attributes, but it is not specified in any standard and should not be relied upon.

[liorean]

This becomes pretty obvious when you're dealing with some things, such as the "boolean" attributes of HTML. You see, in HTML/XHTML all attributes are strings. "Boolean" attributes are attributes that can only have one value, if present. An example of this is the disabled attribute. The only legal value for that attribute, if present, is "disabled".

However, the DOM0/DOM2HTML property disabled is not a string, it's a boolean. So, here the property does not get the same value as the attribute. The HTML attribute either isn't specified, or has the value "disabled". The DOM property always exists, and is a boolean true or false telling you whether the attribute is specified or not.

[ott]

Thankyou gentleman, I'll have to tell my wife I'm still sane. I will reread this as I don't understand it, thank you for detailed answers. Your correct in that it deals with expando's, selectors mainly, most of the time.
Until I understand the diffrence, I gonna use the getAttribute!

[brothercake]

Basic rule of thumb: if you know that an attribute exists and has a value, and it's a standard HTML attribute, you can use a dot property mapping, otherwise use getAttribute. So in your example, always:

this.getAttribute('foobar')

But in a general case:

if(this.getAttribute('title') && this.title == 'whatever')

But I stress, only with HTML attributes should you use these mappings - not with custom attributes, or attributes in other XML vocabularies.

And remember also the point that jkd made - that the names are not necessarily the same. This is just something you get used to

if(this.getAttribute('class') && /(whatever)/.test(this.className))

[Kravvitz]

There's one problem with that. IE/Win (I don't know about IE5/Mac) doesn't support getAttribute('class') -- you have to use getAttribute('className') instead.

this.getAttribute('class')?this.getAttribute('class'):this.getAttribute('className')

I don't use getAttribute() or setAttribute(). Dot notation and array syntax work fine.

[jkd]

Originally Posted by Kravvitz

I don't use getAttribute() or setAttribute(). Dot notation and array syntax work fine.

Only if you are using accessing attributes which are mapped to attributes by DOM2 HTML or DOM0 though.

The original problem has to do with custom attributes not creating "expando" properties on the element reference, so you *must* use getAttribute()/setAttribute() in this case.

Or in the very least, you have to provide the mapping for yourself (Moz-only):

HTMLElement.prototype.__defineGetter__("mycustomattribute", function() {
    return this.getAttribute("mycustomattribute");
});
HTMLElement.prototype.__defineSetter__("mycustomattribute", function(value) {
    return this.setAttribute("mycustomattribute", value);
});

Then IE will automagically create the expando's, and Firefox will have explicit code to map the expando.

[Kor]

Everybody here seems to have forgoten about the full crossbrowser getAttributeNode()

this.getAttributeNode('class').nodeValue
and
this.getAttributeNode('foo').nodeValue

will work succesfuly both in IE and in Moz.

[Kravvitz]

Originally Posted by Kor

will work succesfuly both in IE and in Moz.

but not in IE5.x/Win, unfortunately. It does work in IE6 and IE7b2.

[Kor]

It was only an academical note. Even I guess IE 5 becomes as rare as IE4, I agree that at least for class/className case, DOM 0 crossbrowser syntax is a simple way to solve the problem.