Dojo jsId dojo.byId dijit.ById

A common question new users of dojo have is what is the difference between jsId, dijit.byId() and dojo.byId().

jsId, dijit.byId() and dojo.byId().这3个用法有哪些区别呢。

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):

看看下面的ContentPane，它包含了ID和JSID的标签属性。

<div id="myDivId" 
     dojoType="dijit.layout.ContentPane"
     jsId="myJSId">
   Hello Everyone!
</div>

dojo.byId()

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() 和document.getElementById() 没什么区别，都是查找标签的id属性值，返回一个DOM对象。

For example:

dojo.byId("myDivId").style.height = '300px';

This would set a style height property.

dijit.byId()

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() 有点不同，它只对有dojoType标签属性或编程式生成的标签有作用。它同样是查找id属性值，不过在查找前，你必须保证DOJO控件生成系统已经将被 查找对象解析好。查找到的对象是一个控件对象，你可以使用dojoType对应的控件的所有方法（这是最重要的功能）。

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.

同时你也可以把此对象当做普通的DOM对象来操作。

myContentPane = dijit.byId("myDivId");
myContentPane.domNode.style.height = '300px';
myContentPane.setContent("Hello World!");

jsId

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:

有了jsId，在DOJO解析时，会生成以此属性值为名的对象。这个对象和用dijit.byId()获取到的对象功能一样。注意不要把2个标签上的jsId设为同样的值了。

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

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

jsId不是必须的属性。