registry.byId和dom.byId经常混淆,尤其是初次使用者。
registry.byId应当用于: 当你想直接引用某个部件的JavaScript对象以及访问这个部件的方法时。
dom.byId 应当用于:当你想直接访问一个DOM节点。
下面这个ContentPane部件有一个id属性(标准HTML属性)以及一个data-dojo-id属性(dojo 特有id属性):
<div id="myDivId"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-id="myDojoId">
Hello Everyone!
</div>
dom.byId()
dom.byId()和我们经常使用的document.getElementById()在访问DOM节点的div标签时没有区别: 都是通过标签的id属性值。
例如:
dom.byId("myDivId").style.height = '300px';
用来设置高度。
registry.byId()
registry.byId() 有一点不同。首先,用data-dojo-type声明的节点或者dojo编程实现的部件被dojo解析后才能使用registry.byId()。这时,id作为一个参数,返回值是一个对象,这个对象当data-dojo-type被解析转换成dijit部件时由dojo创建。这样,你就可以改变部件的dojo属性,或者调用其中定义的方法(在这个例子里,我们能调用ContentPane的方法)。例如,通过set(“content”,value)方法,设置ContentPane内容。
registry.byId("myDivId").set("content", "Hello World!");
你也可以像上面我们使用dom.byId() 那样改变其样式,通过ContentPane的domNode属性。 (事实上,domNode定义的比继承树高,所以每个dijit部件都有domNode。非常方便!例如
myContentPane = registry.byId("myDivId");
myContentPane.domNode.style.height = '300px';
myContentPane.set("content", "Hello World!");
data-dojo-id (dojo 1.6之前是jsId)
HTML 属性data-dojo-id通过自动创建一个全局JavaScript变量,节省你在使用过程中的很多步骤(这是由dojo parser实现的)。这个变量包含的对象和registry.byId()返回的对象相同。无论你给data-dojo-id这个属性什么值,都会变为全局变量名,所以,要当心保留字,还要当心两个部件使用相同data-dojo-id!既然Content Pane有一个data-dojo-id 属性值“myDojoId”,那么我可以稍微简化一下上面的代码,移除registry.byId(),使用data-dojo-id属性作为变量名:
myDojoId.domNode.style.height = '300px';
myDojoId.set("content", "Hello World!");
属性data-dojo-id不是必须,在这里只是为了使用方便。
注意:如果有两个相同data-dojo-id,那么起作用的是最后那个,而不是返回一个包含这两个部件的数组。所以要避免相同,否则会很难发现错误。