JavaScript循序渐进（1）

DOM

Document Object Model

是表达式XML文档的常见方式，DOM给开发者提供了一种定位XML层级结构的直观方法。

解析并浏览DOM文档的有效方法无疑能简化JavaScript的开发。

归根结底，JavaScript中绝大操作都是JavaScript和网页里不同的HTML元素之间的交互，而DOM则是简化这一过程的出色工具。

例如：

获得文档中的所有<li>元素

var li = document.getElementsByTagName("li");

并给它们全部都添加一个黑色边框

for(var j=0; j<li.length; j++){

li[j].style.border="1px solid #000";

}

获取ID为”zxr”的元素

var zxr = document.getElementById("zxr");

从文档中删除这个元素

zxr.parentNode.removeChild(zxr);

DOM是开发分离式JavaScript代码的第一步，在HTML文档中进行简单快速的定位使JavaScript与HTML的互动容易了不少。

事件

event

是黏合应用程序中所有用户交互的“胶水”。

DOM和JavaScript事件的组合，是决定所有现代Web应用程序形态的根本所在。

例如：

获取所有的<li>元素，给它们添加上事件处理函数（event handler）

var li = document.getElementsByTagName("li");

for(var j=0; j<li.length; j++){

li[j].onmouseover = function(){

this.style.backgroundColor = 'blue';

};

li[j].onmouseout = function(){

this.style.backgroundColor = 'yellow';

};

}

JavaScript 与 CSS

在DOM和事件交互的基础上产生了DHTML，她的实质其实就是JavaScript和DOM元素上的CSS属性之间的交互。

作为简便布局、分离式网页的标准，CSS（层叠样式表）在给开发者提供大量功能的同时，只给你的用户带来了最少量的兼容性问题。总之，DHTML的意义在于JavaScript和CSS组合起来能做到什么，你又该如何使用这种组合来创造使人们印象深刻的效果。

Ajax

Ajax或异步JavaScript与XML(Asynchronous Javascript and XML),是Jesse James Garrett在Ajax: A New Approach to Web Applications 一文中提出的名词，他是Adaptive Path这家信息体系结构(information architecture)公司的创始人和总裁。

这个名词描述的是客户端和服务器之间，在请求和提交附加信息时进行的高级交互动作。

Ajax这个词涵盖了数据通信的数百种情况，不过全是围绕一个前提进行的：这些客户端到服务器的附加请求都是在页面完全载入之后才提交的。

XMLHTTPRequest（从服务器收发XML数据的主要手段）。

如果说有一个公司始终走在利用Ajax技术创造优秀应用程序的最前沿，这个公司无疑就是Google。

在garrett的Ajax文章快发表之前出现的一个高度可交互的例子是：Google Suggest。这个示例允许你输入查询，即时得到自动补全，这样的特性用旧式页面刷新方式是永远不可能办到的。

浏览器支持

JavaScript开发中不好的一方面是：这门语言及其实现与支持它的浏览器关联得过于紧密，因而必然受到当前最受欢迎的浏览器所限制。既然用户未必选用支持JavaScript最好的浏览器，我们也就被迫对那些才是最重要的功能作出选择。