jsId, dijit.byId() and dojo.byId()
by Josh Trutwin

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" 
   Hello Everyone!


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.

For example:

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().

dijit.byId("myDivId").setContent("Hello World!");

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!");


jsId saves you one more step in working with widgets by automatically creating a global javascript variable for you (the dojo parser does this). This variable contains the same object as returned by dijit.byId(). Whatever value you give to the jsId attribute becomes the name of the global variable so watch out for reserved words or having two widgets with the same jsId! Since my Content Pane has a jsId attribute value of myJSId I could simplify the above code a little by removing the dijit.byId() and using my jsId attribute as the variable name:

myJSId.domNode.style.height = '300px';
myJSId.setContent("Hello World!");

jsId is not a required attribute, it is there as a convenience.

Additional information:

  • Dojotoolkit.org - dojo.byId and dijit.byId

Tags: , ,

This entry was posted on Tuesday, May 6th, 2008 at 4:47 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “jsId, dijit.byId() and dojo.byId()”

  1. Les Says:

    >> jsId saves you one more step in working with widgets by automatically creating a global javascript variable…

    I just wanted to point out that the jsId variable need not be global.

    Here jsFoobar is namespaced.

    …jsId=”my.jsFoobar” dojoType=”dijit.Dialog”…

  2. Introducing the LightboxNano for Dojo! « CB1, INC. Says:

    [...] If you want to access it for some reason, you’ll need to use its jsId. [...]

Leave a Reply

You must be logged in to post a comment.