Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    ott
    ott is offline
    New Coder
    Join Date
    Apr 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    For js developers: warning using dot.notation

    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.

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    ott
    ott is offline
    New Coder
    Join Date
    Apr 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    this.getAttribute('foobar')
    But in a general case:
    Code:
    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
    Code:
    if(this.getAttribute('class') && /(whatever)/.test(this.className))
    Last edited by brothercake; 04-28-2006 at 03:21 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    this.getAttribute('class')?this.getAttribute('class'):this.getAttribute('className')
    I don't use getAttribute() or setAttribute(). Dot notation and array syntax work fine.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote 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):
    Code:
    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.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •