View Full Version : setAttribute("att", val) or .att = val

10-20-2003, 07:39 AM
which one is better to use?
objectreference.setAttribute("attributename", attributevalue);
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>

10-20-2003, 09:02 AM
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.


* 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 :rolleyes:

*** 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


<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.getAttribute( "title" ) ].join("\n") );

function htmlIt()
var elem = document.getElementById( "outer" );
alert( [elem.innerHTML].join("\n") );

<div id="outer">
<div id="tester">

<input type="button" value="Set" onclick="setThem()" />
<input type="button" value="Read" onclick="readThem()" />
<input type="button" value="HTML" onclick="htmlIt()" />


10-20-2003, 09:27 AM
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?

10-20-2003, 10:47 AM
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] (http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/ecma-script-binding.html) 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.