Posted in Dojo Cookies
jsId, dijit.byId() and dojo.byId()
A common question new users of dojo have is what is the difference between jsId, dijit.byId() and dojo.byId().
Consider the following simple ContentPane widget which has an id property (standard html attribute for any tag) and a jsId attribute (dojo specific id attribute explained below):
<div id="myDivId" dojoType="dijit.layout.ContentPane" jsId="myJSId"> Hello Everyone! </div>
dojo.byId() is no different than the often used document.getElementById() to access the DOM node for the div tag - simply pass in the tag’s id attribute value.
dojo.byId("myDivId").style.height = '300px';
This would set a style height property.
dijit.byId() is a little different - first off it only works on parsed dijits either declared in markup with a dojoType attribute or programatically. The same id attribute is used as a paramater, but what is returned in this case is an object that was created by the dojo widget system when the markup is parsed and transformed into a dijit. This allows you to change dojo-specific attributes for the widget or call methods defined in the class the dijit corresponds to (in this case, we can call methods of the ContentPane class). For Example, we can set the content of the ContentPane via setContent().
You could also change the style like we did with dojo.byId() above using the domNode property of the ContentPane (actually - domNode is defined higher up the inheritance tree so every dijit has a domNode property - very convenient!) This example also saves the results of dijit.byId() into a local variable.
myContentPane = dijit.byId("myDivId"); myContentPane.domNode.style.height = '300px'; myContentPane.setContent("Hello World!");
myJSId.domNode.style.height = '300px'; myJSId.setContent("Hello World!");
jsId is not a required attribute, it is there as a convenience.
- Dojotoolkit.org - dojo.byId and dijit.byId