本书讲述了JavaScript和DOM的基础知识，但重点放在DOM编程技术背后的思路和原则：预留退路、循序渐进和以用户为中心等，这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中，使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本，最后结合所讲述的内容创建了一个实际的网站。
本书适合Web设计师和开发人员阅读。
随着Ajax的兴起，JavaScript再一次成为炙手可热的技术。然而，在历史上，它并不是一直这么幸运，由于主流浏览器之间的不兼容，以JavaScript为核心的DHTML曾经昙花一现，很快被人遗忘。
俱往矣，如今的网页设计已经翻开了新的一页。在CSS彻底改变了Web页面布局的方式之后，万维网联盟跨浏览器的DOM标准的制定，使JavaScript终于突破瓶颈，成了大大改善网页用户体验的利器。
本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了大师级的网页开发技术，并透彻阐述了一些至关重要的JavaScript编程原则和最佳实践，包括预留退路、循序渐进和以用户为中心等。读者可以非常直观地加以领悟，迅速使自己的编程技术更上一层楼。
“本书理应奉为经典。文笔清晰，采用了优秀的编程原则，严格遵守相应的标准。真是完美的结合。”
——Slashdot
“我要隆重推荐本书。它前所未有地演示了DOM脚本编程的真正潜力。无论你是JavaScript新手还是专家，本书都绝对必读。”
——Garrett Dimon，Digital-Web.com专栏作家
Jeremy Keith 国际知名的Web设计师，Web标准计划（webstandards.org）成员，DOM Scripting任务组负责人之一。除本书外，他还正在撰写众所期待的《Bulletproof Ajax》一书（中文版将由人民邮电出版社出版）。可以通过其个人网站adactio.com与他联系。
..
<< 查看详细
第1章 JavaScript简史 1
1.1 JavaScript的起源 2
1.2 浏览器之争 3
1.2.1 DHTML 3
1.2.2 浏览器之间的冲突 4
1.3 制定标准 5
1.3.1 浏览器以外的考虑 5
1.3.2 浏览器之争的结局 6
1.3.3 新的开始 6
1.4 小结 7
第2章 JavaScript语法 9
2.1 准备工作 9
2.2 语法 11
2.3 语句 11
2.4 变量 13
2.4.1 数据类型 15
2.4.2 数组 17
2.5 操作 20
2.6 条件语句 22
2.6.1 比较操作符 23
.2.6.2 逻辑操作符 24
2.7 循环语句 25
2.7.1 while 25
2.7.2 do...while 26
2.7.3 for 27
2.8 函数 27
2.9 对象 31
2.9.1 内建对象 32
2.9.2 宿主对象 33
2.10 小结 33
第3章 DOM 35
3.1 文档：DOM中的“D” 35
3.2 对象：DOM中的“O” 35
3.3 模型：DOM中的“M” 36
3.3.1 节点 38
3.3.2 getElementById()方法 42
3.3.3 getElementsByTagName()方法 44
3.4 趁热打铁 46
3.4.1 getAttribute()方法 46
3.4.2 setAttribute()方法 48
3.5 小结 49
第4章 案例研究：JavaScript美术馆 51
4.1 编写标记语言文档 52
4.2 编写JavaScript函数 54
4.2.1 DOM之前的解决方案 55
4.2.2 showPic()函数的代码清单 56
4.3 JavaScript函数的调用 56
4.4 对JavaScript函数进行功能扩展 59
4.4.1 childNodes属性 59
4.4.2 nodeType属性 60
4.4.3 在HTML文档里增加一段描述性文本 61
4.4.4 用JavaScript代码改变＜p＞元素的文本内容 62
4.4.5 nodeValue属性 63
4.4.6 firstChild和lastChild属性 63
4.4.7 利用nodeValue属性刷新＜p＞元素的文本内容 64
4.5 小结 68
第5章 JavaScript编程原则和良好习惯 69
5.1 不要误解JavaScript 69
5.1.1 不要归罪于JavaScript 70
5.1.2 Flash的遭遇 71
5.1.3 质疑 72
5.2 预留退路 72
5.2.1 “javascript:”伪协议 74
5.2.2 内嵌的事件处理函数 74
5.2.3 有何不好 74
5.3 向CSS学习 75
5.4 分离JavaScript 78
5.5 向后兼容性 80
5.6 小结 82
第6章 案例研究：JavaScript美术馆改进版 83
6.1 快速回顾 84
6.2 解决“预留退路”问题 84
6.3 解决“分离JavaScript”问题 85
6.3.1 添加事件处理函数 86
6.3.2 进行必要的检查 87
6.3.3 创建必要的变量 89
6.3.4 创建循环 90
6.3.5 完成必要的操作 91
6.3.6 完成JavaScript函数 91
6.3.7 把多个JavaScript函数绑定到onload事件处理函数上 92
6.4 JavaScript函数的优化：不要做太多的假设 94
6.4.1 不放过每个细节 97
6.4.2 键盘浏览功能 99
6.4.3 慎用onkeypress事件处理函数 100
6.4.4 把JavaScript与CSS结合起来 102
6.5 DOM Core和HTML-DOM 105
6.6 小结 106
第7章 动态创建HTML内容 109
7.1 document.write()方法 110
7.2 innerHTML属性 111
7.3 DOM提供的方法 114
7.3.1 createElement()方法 115
7.3.2 appendChild()方法 116
7.3.3 createTextNode()方法 117
7.4 重回“JavaScript美术馆” 121
7.4.1 insertBefore()方法 123
7.4.2 “JavaScript美术馆”二次改进版 127
7.5 小结 131
7.6 下章简介 132
第8章 充实文档的内容 133
8.1 不应该做的事情 133
8.2 把“不可见”变成“可见” 134
8.3 原始内容 135
8.4 XHTML文档 137
8.5 CSS 138
8.6 JavaScript代码 139
8.6.1 显示“缩略词语表” 139
8.6.2 显示“文献来源链接表” 152
8.6.3 显示“快速访问键清单” 158
8.7 小结 161
8.8 下章简介 162
第9章 CSS-DOM 163
9.1 三位一体的网页 163
9.1.1 结构层 163
9.1.2 表示层 164
9.1.3 行为层 164
9.1.4 分离 165
9.2 style属性 165
9.2.1 样式信息的检索 167
9.2.2 设置样式信息 172
9.3 何时该用DOM脚本去设置样式信息 174
9.3.1 根据元素在节点树里的位置来设置样式信息 174
9.3.2 根据某种条件来设置样式信息 178
9.3.3 对事件做出响应 182
9.4 className属性 184
9.5 小结 188
第10章 用JavaScript实现动画效果 191
10.1 何为动画 191
10.1.1 位置 192
10.1.2 时间 194
10.1.3 抽象化 198
10.2 实用的动画 205
10.2.1 问题的提出 205
10.2.2 问题的解决 207
10.2.3 CSS 208
10.2.4 JavaScript代码 210
10.2.5 与变量的作用域有关的问题 214
10.3 改进动画效果 216
10.4 最后的优化 219
10.5 小结 224
第11章 学以致用：JavaScript网站设计实战 225
11.1 案例背景介绍 225
11.1.1 原始材料 226
11.1.2 网站的结构 226
11.1.3 网页的结构 227
11.2 页面视觉效果设计 228
11.3 CSS 229
11.4 颜色 231
11.4.1 布局 232
11.4.2 字型 234
11.5 XHTML文档 236
11.6 JavaScript脚本 236
11.6.1 当前页面的标识 238
11.6.2 JavaScript动画 242
11.6.3 内部浏览 247
11.6.4 JavaScript美术馆 251
11.6.5 改进表格 254
11.6.6 改进表单 259
11.7 小结 268
11.8 下章简介 268
第12章 展望DOM脚本编程技术 269
12.1 Web的现状 269
12.1.1 Web浏览器 270
12.1.2 Web设计师 271
12.1.3 三条腿的凳子 272
12.2 Ajax技术 274
12.2.1 XMLHttpRequest对象 275
12.2.2 Ajax技术的爆发 278
12.2.3 循序渐进：如何运用Ajax技术 279
12.2.4 Ajax技术的未来 281
12.3 Web应用 282
12.4 小结 283
附录 DOM方法和属性 285
网上的生活越来越丰富多彩。从最初的(X)HTML网页，到一度热炒的DHTML概念，再到近几年流行起来的CSS，网站和网页的设计工作变得越来越简便，网上的内容越来越富于变化和色彩。但是，很多网页设计者和网民朋友都不太喜欢JavaScript，这主要有以下几方面原因。第一，很多网页设计者认为JavaScript的可用性很差——早期的浏览器彼此很少兼容，如果想让自己编写出来的JavaScript脚本在多种浏览器环境里运行，就必须编写许多用来探测浏览器的具体品牌和具体版本的测试及分支代码（术语称之为“浏览器嗅探”代码）。这样的脚本往往到处是if...else语句，既不容易阅读，又不容易复查和纠错，更难以做到让同一个脚本适用于所有的浏览器。第二，对广大的网民来说，JavaScript网页的可访问性很差——浏览器会时不时地弹出一个报错窗口甚至导致系统死机，让人乘兴而来、败兴而去。第三，JavaScript被很多网站用来实现弹出广告窗口的功能，人们厌烦这样的广告，也就“恨”屋及乌地厌烦起JavaScript来了。第四，“JavaScript”这个名字里的“Java”往往让人们误以为其源于Java语言，而实际接触之后才发现它们根本没有任何联系。与Java语言相比，JavaScript语言要简单得多。很多程序员宁肯钻研Java，也不愿意去了解JavaScript的功能和用法。
不管什么原因，JavaScript曾经不受欢迎的确是一个事实。
现在，情况发生了极大的变化。因为几项新技术的出现，JavaScript的春天似乎来了。首先，W3C（万维网联盟）推出的标准化DOM（Document Object Model，文档对象模型）已经一统江湖，目前市场上常见的浏览器可以说没有不支持的。这对网页设计者来说意味着可以用简单的“对象检测”代码来取代那些繁复的浏览器嗅探代码，而按照DOM编写出来的JavaScript页面不像过去那样容易出问题，这对网民来说意味着浏览体验变得流畅了。其次，最近兴起的Ajax技术以DOM和JavaScript语言（以及CSS和XHTML）为基本要素，基于Ajax技术的网站离不开JavaScript和DOM脚本。
其实，人们对JavaScript的恶劣印象在很大程度上来源于早期的程序员对这种语言的滥用。如果程序员在编写JavaScript脚本的时候能够把问题考虑得面面俱到，就可以避免许多问题，但可惜的是如此优秀的程序员太少了。事实上，即使是在JavaScript已经开始流行起来的今天，如果程序员在编写JavaScript脚本的时候不遵守相关的标准和编程准则，也仍会导致各种各样的问题。
在2002年前后，CSS也是一种不太受人们欢迎的Web显示语言，除了用它来改变一下字体，几乎没有人用它来干其他的事情。但没过多久，人们对利用CSS设计网页布局的兴趣就一发而不可收，整个潮流也从那时扭转了过来。现在，掌握CSS已经成为许多公司在招聘网站开发人员时的一项要求。
目前，DOM编程技术的现状与CSS技术在2002年时的境况颇有几分相似。受Google Maps和Flickr等著名公司利用DOM编程技术推出的Gmail、Google Suggest等新型服务的影响和带动，对DOM编程人才的需求正日益增加。有越来越多的人开始迷上了脚本编程技术并开始学习如何利用DOM技术去改善而不是妨碍网站的可用性和可访问性。
本书的作者Jeremy Keith是Web标准计划DOM Scripting任务组的负责人之一，他在这本书里通过大量示例证明了这样一个事实：只要运用得当，再注意避开那些“经典的”JavaScript陷阱，DOM编程技术就可以成为Web开发工具箱里又一件功能强大甚至是不可或缺的好东西。
本书并不是一本参考大全类型的图书，作者只重点介绍了几种最有用的DOM方法和属性。本书的精华在于作者在书中提到的关于JavaScript和DOM脚本编程工作的基本原则、良好习惯和正确思路。如果读者能通过书中的几个案例真正领悟这些原则、习惯和思路，就一定能让自己的编程技术再上一个台阶。
这是一本非常实用的好书，是一本值得一读再读的好书。作为本书的译者，我们相信它会让每位读者、自建网站的设计者和来到自建网站的访问者都受益匪浅。
参加本书翻译的人员还有韩兰、李京山、胡晋平、高文雅。
译 者
2006年9月
这是一本讲述一种程序设计语言的书，但它也适合Web设计师阅读。具体地说，本书是为那些喜欢使用CSS和XHTML并愿意遵守编程规范的Web设计师们编写的。.
本书由代码和概念两大部分构成。不要被那些代码吓倒：我知道它们乍看起来很唬人，可一旦抓住了代码背后的概念，你们就会发现用一种新语言去阅读和编写代码并没有多么困难。学习一种新的程序设计语言看起来很难，但事实却并非如此。DOM脚本看起来似乎比CSS更复杂，可一旦领悟了它的语法，你们就会发现自己又多掌握了一样功能强大的Web开发工具。
归根结底，代码都是思想和概念的体现。我在这里要告诉大家一个秘密：其实没人能把一种程序设计语言的所有语法和关键字都记住。如果有拿不准的地方，查阅参考书就全解决了。
本书不是一本参考大全。我将只讨论编写和运行JavaScript脚本所必需的最基本的语法。我的真正目的是为了让大家理解DOM脚本编程技术背后的思路和原则。这些思路和原则或许已经是你们早就熟悉的了：预留退路、循序渐进、以用户为中心的设计。这些概念其实对任何前端Web开发工作都非常重要。
这些思路贯穿在本书的所有代码示例中。你们将会看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本。如果你们愿意，完全可以把这些例子剪贴到自己的代码中，但更重要的是理解这些代码背后的“如何”和“为什么”。
如果你们已经在使用CSS和XHTML来把设计思路转化为活生生的网页，就应该知道Web标准有多么的重要。还记得你们第一次意识到自己根本不必使用＜font＞标签时感受到的震撼吗？还记得你们是在何时发现自己只需修改一个CSS文件就可以改变整个网站的视觉效果吗？DOM技术有着同样强大的威力。
不过，能力越大，责任也就越大。因此，我不仅想让你们看到用DOM脚本实现的超酷效果，更想让你们看到怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页。
如果需要本书所讨论的相关代码示例的完整清单，到http://www.friendsofed.com网站搜索本书的主页就可以查到。你们还可以在这个网站找到friends of ED出版社出版的其他好书，它们的内容涉及Web标准、Flash、DreamWeaver以及许多细分的计算机领域。..
你们对JavaScript的热情不应该在合上本书时就冷却下来。我已经在http//domscripting. com/处开设了一个网站，我将在那里继续与大家共同探讨现代的、标准化的JavaScript。我希望你们能到该网站看看。与此同时，我更希望本书能够对大家有所帮助。祝你们好运！
致谢
没有我的朋友和同事Andy Budd （www.andybudd.com）和Richard Rutter（www.clagnut.com）的帮助，本书的面世就无从谈起。Andy在我们的家乡Brighton开设了一个名为Skillswap（www.skillswap.org）的免费培训网站。在2004年7月，Richard和我在那里做了一次关于JavaScript和DOM的联合演讲。演讲结束后，我们来到附近的一家小酒馆，在那里，Andy建议我把演讲的内容扩展成一本书。
我接受了这个想法，并就此事请教了friends of ED出版社的Chris Mills。Chris非常支持我的想法，完全没有顾虑到我以前从未写过书的事实。friends of ED的每个人一直都在帮助和鼓励我。我要特别感谢我的项目经理Beckie Stones和我的文字编辑Julie Smith对我这个初出茅庐的作者给予的支持和谅解。
如果没有两方面的帮助，我大概永远也学不会编写JavaScript代码。一方面是几乎每个Web浏览器里都有的“view source”（查看源代码）选项。谢谢你，“view source”。另一方面是那些多年来一直在编写让人叹为观止的代码并解说重要思路的JavaScript大师们。Scott Andrew、Aaron Boodman、Steve Champeon、Peter-Paul Koch、Stuart Langridge和Simon Willison只是我现在能想到的几位。感谢你们所有人让我分享你们的聪明才智。
感谢Molly Holzschlag与我分享她的经验和忠告，感谢她对本书初稿给予反馈意见。感谢Derek Featherstone与我多次愉快地讨论JavaScript问题，我喜欢他思考和分析问题的方法。
我还要特别感谢Aaron Gustafson，他在我写作本书期间向我提供了许多宝贵的反馈和灵感。
在写作本书期间，我有幸参加两次非常棒的盛会：在得克萨斯州Austin举办的“South by Southwest”和在伦敦举办的@media。我要感谢这两次盛会的组织者Hugh Forrest和Patrick Griffiths，是他们让我有机会结识那么多最友善的人——我从没想过我能有机会与他们结为朋友和同事。
最后，我要感谢我的妻子Jessica Spengler，这不仅是因为她一直在默默地支持我，更因为她对本书初稿做出的专业帮助。谢谢你，我的人生伴侣。...
“JavaScript？别提了，用它编写程序特别麻烦。靠它建立起来的网站也不好用，动不动就弹出一个报错窗口什么的。你要是用了它，说不定它会趁你没看见的时候踢你的狗一脚呢。”.
这就是JavaScript给我留下的印象……
作为一名Web设计师（或者称开发人员），我对JavaScript的态度是能不用就不用，你是不是也和我一样呢？像我们这样的人肯定还不少。从“.com”盛极一时的年代开始，因为过时的网络教程中有太多质量低劣的示例脚本，所以人们对JavaScript产生抵触情绪，这根本不让我感到意外。
幸运的是，有一群像Jeremy Keith这样的人在努力地为人们指明正确的方向。在这本书中，他向我们证明了事情并不像我们想像得那么糟糕；只要运用得当，再注意避开那些传统的JavaScript陷阱，DOM脚本编程技术就可以成为Web开发工具箱中又一件功能强大甚至是不可或缺的好东西。
事实上，DOM脚本编程技术的现状让我想起了2002年前后的CSS。在那之前，CSS一直被人们认为是一种古怪的Web显示语言，除了用它来改变字体，几乎没有什么人用它来干其他事情。
但没过多久，人们对利用CSS设计网页布局的兴趣就一发而不可收了，整个潮流也从那时扭转了过来。Wired和ESPN等著名企业用CSS重新设计网站的做法改变了人们的旧思想。我也在2003年初加入了向Web设计人员推广CSS技术的CSS Zen Garden组织。到了那年年底，CSS已经从少数人的个人爱好变成了许多公司对网站开发人员的一种预期和要求。..
现在，我们看到DOM脚本编程技术也正呈现出一种类似的上升趋势。受Google Maps和Flickr等著名公司在最近利用DOM脚本编程技术推出的新型服务的影响和带动，对DOM脚本编程人才的需求正在日益增加。与过去相比，有越来越多像你和我这样的人开始迷上了脚本编程技术，并开始学习如何利用DOM的力量增强而不是妨碍网站的可用性。
我们是幸运的，因为现在有这本书来指导我们。我也想像不出还有什么人能够比Jeremy Keith更适合做我们的领路人。作为Web标准计划DOM Scripting任务组的台柱，他一直站在脚本编程技术领域各种最新研发方向的最前端。再说，我从他那里“偷学”代码已经有好几年了，手中有了这本书，我也就用不着再不好意思了。
这的确是一本值得一读再读的好书。在磕磕绊绊地看懂了前几段示例代码之后，我已经迫不及待地想看到更多的例子了。学完第1章后，我已经完全被吸引住了。Jeremy Keith是极少数能把高深的概念用简明易懂的语言解释透彻的天才，他的著作不仅可以让我们知道应该怎么做，还能让我们明白为什么要那样做。
是抛开“浏览器嗅探”（browser sniffing）技术而拥抱“对象检测”（object detection）技术的时候了。再也不用假设你们网站的访问者都已经激活了JavaScript支持功能了。让我们舍弃那些内嵌在HTML文档里的事件处理函数吧，因为我们再也不需要那样做了。Web一天一个样，而这本书里的技术会让我们每个人都获益。...
