Back to my page

Developers

You are here: Home » Universal Widget API » UWA HOWTOs » How to target a single element without getElementById?

How to target a single element without getElementById?

The UWA environment disables the document and window object for security and portability reasons, but retains some of their methods, properties and events in its widget object (see ” JavaScript Framework”).

The getElementById() method from the document object, while very useful for everyday uses, has not been kept in widget because there can be multiple instances of a given widget on a single page, and thus potentially multiple elements with the same id.

However, widget has getElementsByTagName() and getElementsByClassName() methods, which can be both used to achieve the same result as getElementById() would - if they are applied to widget.body, which references the widget's body node.

widget.body.getElementsByTagName() and widget.body.getElementsByClassName() each return an Array of elements, which is not directly usable unless you use a loop. You can use these methods as you would use getElementById by having only one widget tag with a given class, for instance, and targetting it as the first item from the getElementsByClassName array: 

var statusZone = widget.body.getElementsByClassName("statusZone")[0];

It's even cleaner if the targetted element is the only one using that tag name - because you don't have to assign a dummy class to an element just in order to target it: 

var textarea = widget.body.getElementsByTagName("textarea")[0];

These two getElemtentsBy*() methods are not the only ways. If you dynamically generate your XHTML tags using JavaScript, you can directly obtain a reference for the element using the createElement method - reference which can the be used to target said new element: 

var myElement = widget.body.createElement('h2');