GWT Element setAttribute vs setPropertyString

Question

I can't determine the difference between Element.setAttribute(String name, String value) and Element.setPropertyString(String name, String value). Is there a difference? Which is preferred when attempting to set, say, a placeholder on a text input? I've been doing getElement().setPropertyString("placeholder", "this is a placeholder"); and it works, but is that the appropriate way to do it?

In the documentation for DOM, setAttribute(Element, String, String) is deprecated, saying to use "the more appropriately named setElementProperty(Element, String, String) instead." Does that imply that one should be using the similarly named methods of Element?

Answer 1

The problem is that in IE6 and IE7 (and IE8 in compatibility modes), setAttribute actually sets the property (IE doesn't really make a difference; IE8 added an optional argument to getAttribute to allow retrieving the attribute as defined in the DOM spec; see http://msdn.microsoft.com/en-us/library/ms536429v=vs.85.aspx).

BTW, your JavaDoc reference should be http://google-web-toolkit.googlecode.com/svn/javadoc/latest/index.html (not the one for GWT 1.5, which is severely outdated), and you should use com.google.gwt.dom.client.Element rather than com.google.gwt.user.client.DOM. Element has a setAttribute that sets the attribute in every browser other than IE6/7 (or similar modes of IE8).

But most of time, you should just work with DOM properties, rather than attributes. For instance, you want to get the tab index as a number, not as a string. And you want the default value/state for a property in the absence of the attribute, not a null that you'd have to handle yourself (e.g. an input element defaults to type=text when there's no type attribute; getAttribute("type") would return null whereas getPropertyString("type") would return "text").

Answer 2

There is a difference between Attributes and Properties. In short the attribute represents the initial state while the property always represents the current state.

See http://jquery-howto.blogspot.com/2011/06/html-difference-between-attribute-and.html for a detail explanation.

In GWT calling setAttribute calls the native javascript function setAttribute on the current element. Calling setProperty... set the property on the current element.

In the past this in most browsers this used to be the same, but with evolving standards this started to change ago.

I don`t really know all the small differences between browser implementations, but to track the difference one could rely on the different DOM Level Specs: http://www.w3.org/TR/DOM-Level-2-HTML/ http://www.w3.org/TR/DOM-Level-3-Core/

Also the Mozilla docs are on setAttribute are quite could and state the difference for firefox: https://developer.mozilla.org/en/DOM/element.setAttribute

So in summary: if you use setAttribute in GWT you rely on the browser setAttribute implementation which is somewhat setting the defualt value (on certain properties, and not updating a value), so normally you want setProperty...