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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts

    setAttribute("att", val) or .att = val

    which one is better to use?
    objectreference.setAttribute("attributename", attributevalue);
    or
    objectreference.attributename = attributevalue;

    is it wise/allowed to define a custom attribute for a html-tag if i need to store some information which i need to use later, but has to be invisible to the user?

    f.e. i use tables to display information of several items, the technical id of the item is stored in the id of the tablerow, now i need to store some more data about the item in the row, nivisible to the user, can i add a custom attribute to store that data?

    like <tr id="23434523" extrainfo="here the info i want to store"></tr>
    I am the luckiest man in the world

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I'll try to get through this without confusing either of us.

    - Using objectreference.setAttribute is only for HTML attributes.
    - Using objectreference.attribute is for HTML attributes or object properties.

    The difference?

    When you obtain a reference to an element in JS, it's a variable just like all other variables in JS. With that being established, we know that all JS variables are implemented as objects, meaning they can be given properties.*

    Now, all current browsers automatically expose most HTML attributes as properties, so many of them can be read as object properties. If you use objectreference.setAttribute and name an attribute that is not normal HTML, it will be created. The difference between this and just using a property is that the former will actually be part of the HTML (as retrieved via innerHTML et al).**

    Therefore, the setAttribute method should only be used when it's imperative that the information you're storing actually be part of the HTML***

    So, since you wish to hide this data anyway, I recommend just making properties on your object references.

    Whew.

    * It's important to note that these properties stay attached to the element, and aren't lost with the destruction or loss of scope of the reference that was used to set them. I'm not sure how this is implemented behind-the-scenes, but it's obviously a special case.

    ** This is how it's supposed to be via the rules of the HTML DOM, however, IE will actually set the properties as HTML attributes

    *** Exception: when creating elements using docuemnt.createElement, I recommend always using element.setAttribute -- it's the most compatible across the browser spectrum for this scenario. IE allows a much broader use of element.attribute here than Gecko or KHTML does.

    Here's a testing page I used to illustrate/verify what I've said here
    Code:
    <html>
    <head>
        <title>Test</title>
    
        <script type="text/javascript">
            function setThem()
            {
                var elem = document.getElementById( "tester" );
                elem.test = "test";
                elem.setAttribute( "title", "Hello World" );
            }
    
            function readThem()
            {
                var elem = document.getElementById( "tester" );
                alert( [ elem.test,
                         elem.getAttribute( "test" ),
                         elem.title,
                         elem.getAttribute( "title" ) ].join("\n") );
            }
    
            function htmlIt()
            {
                var elem = document.getElementById( "outer" );
                alert( [elem.innerHTML].join("\n") );
            }
        </script>
    
    <body>
    <div id="outer">
        <div id="tester">
        </div>
    </div>
    
    <input type="button" value="Set" onclick="setThem()" />
    <input type="button" value="Read" onclick="readThem()" />
    <input type="button" value="HTML" onclick="htmlIt()" />
    
    </body>
    </html>
    Last edited by beetle; 10-20-2003 at 09:15 AM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    thanks, i wasn't clear enough about the usage of the two ways to set attributes. I was indeed talking about setting html attributes for dynamically created html elements. so i will use setAttribute from now on.

    the second question was a very separated question, didn't have anything to do with the first one. I dont hold objects in the page (the table created using asp) but with a click on a tablerow i want to send some information to another page. the information is not to be showed to the user, but i have no javascript-objects in this page (dont want to either)

    this is what is happening:
    i have a selection-page to select a person from a database. the persons are listed in a table. in the tablerow i have to store the id of the person, but when the window is closed, i have to set a few formfields in the opener. the values shouldnt come up in the table, but they must be returned to the opener window. currently i store the info in some self-defined attributes of the tr, with an onclick-handler i read the info from the attributes and send it to the opener. but will this lead to problems if browsers become more strict in which attributes are allowed/mandatory/forbidden within a html tag?
    I am the luckiest man in the world

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Just a few notes:
    - Opera 7 doesn't allow setting that very many attributes. Don't ask me why.
    - When setting the element styles, the class attribute, or the for attribute (on script and label elements), always use the DOMElement.style.CSSProperty, DOMElement.className, DOMElement.htmlFor syntaces.
    - Always check that iew and op7 can create the attribute using setAttribute before you decide to use that method. In some cases it's better to use DOMElement.attributeName. Also check the [DOM2HTML] that you're using the right attribute name.
    - Mozilla has a slight error that you probably won't notice, but I'll mention it anyways: Attributes set through the DOM methods still have their specified property set to false. This can affect an attribute reading script that's written to the iew way of creating the attribute collection (ie all possible attributes are in the collection, not only those defined).

    According to the W3C, the same validation rules should affect the document no matter whether nodes are created by the DOM or from the HTML/XML source. This means a validating parser should never allow appending nodes that does not validly belong there.
    Last edited by liorean; 10-20-2003 at 10:52 AM.
    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


  •  

    Posting Permissions

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