本书讲述了JavaScript和DOM的基础知识，但重点放在DOM编程技术背后的思路和原则：预留退路、循序渐进和以用户为中心等，这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中，使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本，最后结合所讲述的内容创建了一个实际的网站。
本书适合Web设计师和开发人员阅读。

第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

242这是一本讲述一种程序设计语言的书,1但它也适合Web设计师阅读.a具体地说,1本书是为那些喜欢使用CSS和XHTML并愿意遵守编程规范的Web设计师们编写的.a1a1c1ac111c111a1a1
243本书由代码和概念两大部分构成.a不要被那些代码吓倒：我知道它们乍看起来很唬人,2可一旦抓住了代码背后的概念,2你们就会发现用一种新语言去阅读和编写代码并没有多么困难.a学习一种新的程序设计语言看起来很难,2但事实却并非如此.aDOM脚本看起来似乎比CSS更复杂,2可一旦领悟了它的语法,2你们就会发现自己又多掌握了一样功能强大的Web开发工具.a2a2c2ac222c222a2a2
244归根结底,3代码都是思想和概念的体现.a我在这里要告诉大家一个秘密：其实没人能把一种程序设计语言的所有语法和关键字都记住.a如果有拿不准的地方,3查阅参考书就全解决了.a3a3c3ac333c333a3a3
245本书不是一本参考大全.a我将只讨论编写和运行JavaScript脚本所必需的最基本的语法.a我的真正目的是为了让大家理解DOM脚本编程技术背后的思路和原则.a这些思路和原则或许已经是你们早就熟悉的了：预留退路.c循序渐进.c以用户为中心的设计.a这些概念其实对任何前端Web开发工作都非常重要.a4a4c4ac444c444a4a4
246这些思路贯穿在本书的所有代码示例中.a你们将会看到用来创建图片库页面的脚本.c用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本.a如果你们愿意,5完全可以把这些例子剪贴到自己的代码中,5但更重要的是理解这些代码背后的“如何”和“为什么”.a5a5c5ac555c555a5a5
247如果你们已经在使用CSS和XHTML来把设计思路转化为活生生的网页,6就应该知道Web标准有多么的重要.a还记得你们第一次意识到自己根本不必使用＜font＞标签时感受到的震撼吗？还记得你们是在何时发现自己只需修改一个CSS文件就可以改变整个网站的视觉效果吗？DOM技术有着同样强大的威力.a6a6c6ac666c666a6a6
248不过,7能力越大,7责任也就越大.a因此,7我不仅想让你们看到用DOM脚本实现的超酷效果,7更想让你们看到怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页.a7a7c7ac777c777a7a7
249如果需要本书所讨论的相关代码示例的完整清单c,8http://www.friendsofed.com网站搜索本书的主页就可以查到.a你们还可以在这个网站找到friendscofcED出版社出版的其他好书,8它们的内容涉及Web标准.cFlash.cDreamWeaver以及许多细分的计算机领域.a8a8c8ac888c888a8a8
2410你们对JavaScript的热情不应该在合上本书时就冷却下来.a我已经在http//domscripting.ccom/处开设了一个网站,9我将在那里继续与大家共同探讨现代的.c标准化的JavaScript.a我希望你们能到该网站看看.a与此同时,9我更希望本书能够对大家有所帮助.a祝你们好运！9a9c9ac999c999a9a9
2411致谢10a10c10ac101010c101010a10a10
2412没有我的朋友和同事AndycBuddc（www.andybudd.com）和RichardcRutter（www.clagnut.com）的帮助,11本书的面世就无从谈起.aAndy在我们的家乡Brighton开设了一个名为Skillswap（www.skillswap.org）的免费培训网站.a在2004年7月,11Richard和我在那里做了一次关于JavaScript和DOM的联合演讲.a演讲结束后,11我们来到附近的一家小酒馆,11在那里,11Andy建议我把演讲的内容扩展成一本书.a11a11c11ac111111c111111a11a11
2413我接受了这个想法,12并就此事请教了friendscofcED出版社的ChriscMills.aChris非常支持我的想法,12完全没有顾虑到我以前从未写过书的事实.afriendscofcED的每个人一直都在帮助和鼓励我.a我要特别感谢我的项目经理BeckiecStones和我的文字编辑JuliecSmith对我这个初出茅庐的作者给予的支持和谅解.a12a12c12ac121212c121212a12a12
2414如果没有两方面的帮助,13我大概永远也学不会编写JavaScript代码.a一方面是几乎每个Web浏览器里都有的“viewcsource”（查看源代码）选项.a谢谢你,13“viewcsource”.a另一方面是那些多年来一直在编写让人叹为观止的代码并解说重要思路的JavaScript大师们.aScottcAndrew.cAaroncBoodman.cStevecChampeon.cPeter-PaulcKoch.cStuartcLangridge和SimoncWillison只是我现在能想到的几位.a感谢你们所有人让我分享你们的聪明才智.a13a13c13ac131313c131313a13a13
2415感谢MollycHolzschlag与我分享她的经验和忠告,14感谢她对本书初稿给予反馈意见.a感谢DerekcFeatherstone与我多次愉快地讨论JavaScript问题,14我喜欢他思考和分析问题的方法.a14a14c14ac141414c141414a14a14
2416我还要特别感谢AaroncGustafson,15他在我写作本书期间向我提供了许多宝贵的反馈和灵感.a15a15c15ac151515c151515a15a15
2417在写作本书期间,16我有幸参加两次非常棒的盛会：在得克萨斯州Austin举办的“SouthcbycSouthwest”和在伦敦举办的@media.a我要感谢这两次盛会的组织者HughcForrest和PatrickcGriffiths,16是他们让我有机会结识那么多最友善的人——我从没想过我能有机会与他们结为朋友和同事.a16a16c16ac161616c161616a16a16
2418最后,17我要感谢我的妻子JessicacSpengler,17这不仅是因为她一直在默默地支持我,17更因为她对本书初稿做出的专业帮助.a谢谢你,17我的人生伴侣.a17a17c17ac171717c171717a17a17
2419序言18a18c18ac181818c181818a18a18
2420“JavaScript？别提了,19用它编写程序特别麻烦.a靠它建立起来的网站也不好用,19动不动就弹出一个报错窗口什么的.a你要是用了它,19说不定它会趁你没看见的时候踢你的狗一脚呢.a”19a19c19ac191919c191919a19a19
2421这就是JavaScript给我留下的印象……20a20c20ac202020c202020a20a20
2422作为一名Web设计师（或者称开发人员）,21我对JavaScript的态度是能不用就不用,21你是不是也和我一样呢？像我们这样的人肯定还不少.a从“.com”盛极一时的年代开始,21因为过时的网络教程中有太多质量低劣的示例脚本,21所以人们对JavaScript产生抵触情绪,21这根本不让我感到意外.a21a21c21ac212121c212121a21a21
2423幸运的是,22有一群像JeremycKeith这样的人在努力地为人们指明正确的方向.a在这本书中,22他向我们证明了事情并不像我们想像得那么糟糕,c只要运用得当,22再注意避开那些传统的JavaScript陷阱,22DOM脚本编程技术就可以成为Web开发工具箱中又一件功能强大甚至是不可或缺的好东西.a22a22c22ac222222c222222a22a22
2424事实上,23DOM脚本编程技术的现状让我想起了2002年前后的CSS.a在那之前,23CSS一直被人们认为是一种古怪的Web显示语言,23除了用它来改变字体,23几乎没有什么人用它来干其他事情.a23a23c23ac232323c232323a23a23
2425但没过多久,24人们对利用CSS设计网页布局的兴趣就一发而不可收了,24整个潮流也从那时扭转了过来.aWired和ESPN等著名企业用CSS重新设计网站的做法改变了人们的旧思想.a我也在2003年初加入了向Web设计人员推广CSS技术的CSScZencGarden组织.a到了那年年底,24CSS已经从少数人的个人爱好变成了许多公司对网站开发人员的一种预期和要求.a24a24c24ac242424c242424a24a24
2426现在,25我们看到DOM脚本编程技术也正呈现出一种类似的上升趋势.a受GooglecMaps和Flickr等著名公司在最近利用DOM脚本编程技术推出的新型服务的影响和带动,25对DOM脚本编程人才的需求正在日益增加.a与过去相比,25有越来越多像你和我这样的人开始迷上了脚本编程技术,25并开始学习如何利用DOM的力量增强而不是妨碍网站的可用性.a25a25c25ac252525c252525a25a25
2427我们是幸运的,26因为现在有这本书来指导我们.a我也想像不出还有什么人能够比JeremycKeith更适合做我们的领路人.a作为Web标准计划DOMcScripting任务组的台柱,26他一直站在脚本编程技术领域各种最新研发方向的最前端.a再说,26我从他那里“偷学”代码已经有好几年了,26手中有了这本书,26我也就用不着再不好意思了.a26a26c26ac262626c262626a26a26
2428这的确是一本值得一读再读的好书.a在磕磕绊绊地看懂了前几段示例代码之后,27我已经迫不及待地想看到更多的例子了.a学完第1章后,27我已经完全被吸引住了.aJeremycKeith是极少数能把高深的概念用简明易懂的语言解释透彻的天才,27他的著作不仅可以让我们知道应该怎么做,27还能让我们明白为什么要那样做.a27a27c27ac272727c272727a27a27
2429是抛开“浏览器嗅探”（browsercsniffing）技术而拥抱“对象检测”（objectcdetection）技术的时候了.a再也不用假设你们网站的访问者都已经激活了JavaScript支持功能了.a让我们舍弃那些内嵌在HTML文档里的事件处理函数吧,28因为我们再也不需要那样做了.aWeb一天一个样,28而这本书里的技术会让我们每个人都获益.a28a28c28ac282828c282828a28a28

162JeremycKeithc国际知名的Web设计师,1Web标准计划（webstandards.org）成员,1DOMcScripting任务组负责人之一.a除本书外,1他还正在撰写众所期待的《BulletproofcAjax》一书（中文版将由人民邮电出版社出版）.a可以通过其个人网站adactio.com与他联系.a1a1c1ac111c111a1a1