开始上手
从基于浏览器的JavaScript受到关注时起,Document Object Model (DOM) 就是我们绘制所要内容的的地方,也是用户所看到的界面。如果我们想要增强、替换或是向浏览器加载好的HTML添加点什么东西,JavaScript和DOM便是我们所需要的。Dojo旨在使DOM操作变得更加简单、高效,为此Dojo提供了一些方便的函数来解决不同浏览器间恼人的的兼容性问题,并让常用操作更加简洁。
为了了解这些函数,我们将操作一个简单的页面,该页面中有一个含有五个元素的无序列表:
- <!DOCTYPEhtml>
- <html>
- <head>
- <Metacharset="utf-8">
- <title>Demo:DOMFunctions</title>
- <mce:scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></mce:script>
- <mce:scripttype="text/javascript"><!--
- dojo.ready(function(){//"ready"entrypoint
- });
- //--></mce:script>
- </head>
- <body>
- <ulid="list">
- <liid="one">One</li>
- <liid="two">Two</li>
- <liid="three">Three</li>
- <liid="four">Four</li>
- <liid="five">Five</li>
- </ul>
- </body>
- </html>
这个页面已经含有Dojo脚本标签, 相信你已经认识dojo.ready代码块。所有对DOM进行操作的代码必须等到DOM加载完毕后才能被执行。
检索
事有先后:为了对DOM进行操作,我们首先需要知道如何从DOM中获取元素。最简单的方法是使用dojo.byId。在你将一个你想要获得的元素的ID传给dojo.byId之后,如果ID相符的DOM节点存在,你将获得该节点,如果没有匹配的节点,那么将获得null。
这和使用document.getElementById是等价的,但是使用dojo.byId有两个优点:更简洁,并解决了某些浏览器对getElementById实现的bug。另一个dojo.byId很棒的特点是,如果你将一个DOM节点传给它,它将马上返回该节点。这有助于建立同时适用字符串与DOM节点的API。让我们来看一个例子: