dojo 学习笔记之一 dom.byId dojo.byId registry.byId 的区别
2014-05-22 10:40
316 查看
在dojo中,除了沿用Dom结点, dojo 还自定义了一类结点用“dojoType" 进行标识。
dojo 称这些结点为widget。 当检测到HTMl文档中某个标签定义了dojoType 属性之后,dojo会调用dojo包中相应的 js 及 css 文件对这个结点进行渲染。 从而这个结点元素就会相应地显示出具有dojo特色的样式及功能。
如此说来, dom.byId 跟 dojo.byId 获取到的就是普通的HTMl文档结构树中的某个结点元素,以下简称dom结点, 而 registry.byId 获取到的是一个dojo的widget,以下简称widget结点。
它们的区别之一是 innerHTML, tagName 等方法只对用 dom结点生效。
如果
element =registry.byId("someId"),
则
element.innerHTML = "some message"
这个命令并不会在页面上显示 "some message" 。
而下面这一句是可以在页面上显示出 “hello world" 的。
同样的,有一些命令仅对widget
结点生效,如果用dom结点去用这些命令的话,控制台会提示 “元素为空”类似的错误信息。
有一个很简单的方法可以检查一下是否获取到了想要的结点,如下:
参考:
dojotoolkit - registry http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html href="http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html" target=_blank>点击打开链接
dojotoolkit - dojo.byId http://dojotoolkit.org/reference-guide/1.7/dojo/byId.html href="http://dojotoolkit.org/reference-guide/1.7/dojo/byId.html" target=_blank>点击打开链接
dojotoolkit - dom http://dojotoolkit.org/reference-guide/1.8/dojo/dom.html href="http://dojotoolkit.org/reference-guide/1.8/dojo/dom.html" target=_blank>点击打开链接
补充
昨天写代码遇到一个问题,就是用dom结点还是widget 结点的问题。
代码如下:
目的是用new listitem 新生成一个widget, 在它里面写入文本”msg", 然后把这个listitem 放到id=comments 的div中。
由于newcomment 是一个dojo的widget 对象, 它没有innerHTML方法,所以newcomment.innerHTMl = "msg" 这种写法无法得到想要的效果, 最终页面中展示的是一个空的listitem. 这种情况下firebug没有错误提示,如果一开始没有dom结点与widget结点有区别的概念的话,调试起来会比较困难。
对于widget结点,要想获取它的dom结点,用node.domNode 就可以。所以上面代码的第三行写成
newcomment.domNode.innerHTML = msg;
问题就能够解决。
dojo 称这些结点为widget。 当检测到HTMl文档中某个标签定义了dojoType 属性之后,dojo会调用dojo包中相应的 js 及 css 文件对这个结点进行渲染。 从而这个结点元素就会相应地显示出具有dojo特色的样式及功能。
如此说来, dom.byId 跟 dojo.byId 获取到的就是普通的HTMl文档结构树中的某个结点元素,以下简称dom结点, 而 registry.byId 获取到的是一个dojo的widget,以下简称widget结点。
它们的区别之一是 innerHTML, tagName 等方法只对用 dom结点生效。
如果
element =registry.byId("someId"),
则
element.innerHTML = "some message"
这个命令并不会在页面上显示 "some message" 。
而下面这一句是可以在页面上显示出 “hello world" 的。
dom.byId("someNode").innerHTML = "Hello World";
同样的,有一些命令仅对widget
结点生效,如果用dom结点去用这些命令的话,控制台会提示 “元素为空”类似的错误信息。
有一个很简单的方法可以检查一下是否获取到了想要的结点,如下:
var dijit = registry.byId("testdom"); if(dijit){ alert("yes")} else{ alert("no")};
参考:
dojotoolkit - registry http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html href="http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html" target=_blank>点击打开链接
dojotoolkit - dojo.byId http://dojotoolkit.org/reference-guide/1.7/dojo/byId.html href="http://dojotoolkit.org/reference-guide/1.7/dojo/byId.html" target=_blank>点击打开链接
dojotoolkit - dom http://dojotoolkit.org/reference-guide/1.8/dojo/dom.html href="http://dojotoolkit.org/reference-guide/1.8/dojo/dom.html" target=_blank>点击打开链接
补充
昨天写代码遇到一个问题,就是用dom结点还是widget 结点的问题。
代码如下:
var comment = dom.byId("comments"); var newcomment = new listitem; newcomment.innerHTML = "msg"; newcomment.placeAt(comment,"first");id=comments 是html 文件中的一个空的div 标签。
目的是用new listitem 新生成一个widget, 在它里面写入文本”msg", 然后把这个listitem 放到id=comments 的div中。
由于newcomment 是一个dojo的widget 对象, 它没有innerHTML方法,所以newcomment.innerHTMl = "msg" 这种写法无法得到想要的效果, 最终页面中展示的是一个空的listitem. 这种情况下firebug没有错误提示,如果一开始没有dom结点与widget结点有区别的概念的话,调试起来会比较困难。
对于widget结点,要想获取它的dom结点,用node.domNode 就可以。所以上面代码的第三行写成
newcomment.domNode.innerHTML = msg;
问题就能够解决。
相关文章推荐
- dojo 学习笔记之一 dom.byId dojo.byId registry.byId 的区别
- dojo/dom-style样式操作学习笔记
- jQuery 学习笔记 (jQuery对象 和Dom 区别 )
- 学习笔记-DOM解析和sax解析区别
- data-dojo-id, dijit/registry.byId() and dojo/dom.byId()
- dojo 学习笔记之dojo.query - query(id) 与query(class)的区别
- jQuery 学习笔记 (jQuery对象 和Dom 区别 )
- Dojo学习:dijit.byId与dojo.byId的区别
- Java学习笔记1------c#和Java的区别
- [翻译]javascript学习笔记 (二)-DOM
- 数据库中odbc和jdbc的区别-------java数据库学习笔记之1
- DOM学习笔记
- SVG学习笔记(2)-认识DOM
- 比较详细的javascript DOM 学习笔记第1/2页
- DOM 学习笔记
- Dojo学习笔记--dijit.Menu
- Dojo学习笔记--dijit.Dialog
- Java学习笔记1------用例子来说明面向对象和面向过程的区别
- 推荐dojo学习笔记
- AJAX 学习笔记(6) 使用W3C DOM动态编辑页面