《JavaScript DOM编程艺术》
总体观点
网页是由结构（HTML）、表现（CSS）与行为（JavaScript）三位一体构筑的有机体。优秀的前端工程师必须坚持‘职责分离’（Separation of Concerns）与‘平稳退化’（Graceful Degradation）。
DOM（文档对象模型）不是一门单独的语言，而是一座将脚本语言与HTML页面节点连接起来的标准API桥梁。理解节点树（元素节点、文本节点、属性节点）是操控页面的根本法门。
全书以渐进增强（Progressive Enhancement）为灵魂：绝不在HTML中内联onclick或javascript:伪协议，即使浏览器禁用了JavaScript，网页依然能优雅地提供最基础但完整可用的图文信息。
核心观点
-
1. 坚持平稳退化（Graceful Degradation）：不要切断用户的退路
如果用户使用的设备不支持JavaScript或者脚本加载意外中断，网页的核心功能与内容依然必须能够通过标准HTML链接正常访问。
图片链接写为<a href='photo.jpg' onclick='showPic(this); return false;'>，支持JS的弹大图，不支持JS的仍能正常跳转打开图片。 -
2. 实现完全的内容与行为分离（Unobtrusive JavaScript）
严禁在HTML标签内部写行内onclick或onmouseover事件；所有交互行为必须在外部独立的.js脚本文件中通过DOM事件挂载绑定。
HTML只保持纯净的语义标签，JS在页面DOMContentLoaded后通过循环寻找class为gallery的链接，并统一挂载点击监听。 -
3. DOM树是节点构成的层次森林，善用标准节点API
通过getElementById、getElementsByTagName获取元素节点，利用childNodes、parentNode沿树穿梭，用nodeType严格区分元素与文本。
想要修改一段文字，不要盲目使用非标准的innerHTML，而是通过pNode.firstChild.nodeValue精准替换文本节点的内容。 -
4. 动态创建标记（DOM-Creation）胜过拼装innerHTML字符串
使用createElement、createTextNode和appendChild等标准API在内存中精确构造DOM树，比粗暴拼装字符串更安全，杜绝XSS注入。
动态添加一张图片时，在内存中创建img节点并设置src与alt属性，随后挂载到指定父容器末尾，避免字符串转义与闭合漏洞。 -
5. 渐进增强（Progressive Enhancement）：从内容出发层层赋能
先用良好语义的HTML标记出干净的内容核心；再用CSS排版装饰外观；最后才在顶层涂上JavaScript交互这层奶油蛋糕。
一个折叠菜单在纯HTML下就是一组普通的无序列表ul/li，搜索引擎与无障碍阅读器能完美抓取，JS加载后才蜕变为手风琴折叠面板。 -
6. 善待CSS-DOM：用更改className代替直接操作style行内属性
JavaScript应该负责判断‘什么时候变化’，而CSS应该负责定义‘变化长什么样’。通过切换class名让视觉表现牢牢留在CSS掌控中。
高亮某行表格时，不要用elem.style.backgroundColor='yellow'，而是执行elem.className='highlight'，样式统一在外部CSS维护。
全书思维导图 · 知识脉络树
全书结构
-
第1章 JavaScript简史
回顾JavaScript诞生史、网景与微软的第一次浏览器大战、ECMAScript标准确立与W3C DOM规范的演进历程。
讲述DHTML早期各家私有API（document.all vs document.layers）造成的割裂，引出统一的W3C DOM对于跨平台开发的救命意义。 -
第2章 JavaScript语法
梳理初学者必备的语言要素：变量弱类型、数组、对象、分支循环语句、函数定义与变量作用域的基础规范。
通过简单的银行储蓄计算器函数，演示入参接收、变量声明、while循环迭代计算利息并返回最终本息和的过程。 -
第3章 DOM
建立DOM（文档对象模型）心智模型：解析元素节点、文本节点与属性节点，掌握getElementById等五大核心查询与属性操作方法。
使用getAttribute('title')与setAttribute('title', '新说明')动态读取和篡改指定超链接的悬浮提示文字。 -
第4章 案例研究：JavaScript图片库
从零构建一个经典的相册展示页面：点击缩略图列表，在下方同一个占位大图区原地切换显示高清大图和说明文字。
编写showPic(whichpic)函数，提取点击链接的href并替换placeholder大图的src，同时将链接title同步更新到底部文字段落。 -
第5章 最佳实践
确立前端工程师的职业操守与三大铁律：坚持平稳退化、确保行为与结构分离、向后兼容性检测（对象能力检测代替浏览器嗅探）。
在执行document.getElementsByTagName之前先做if (!document.getElementsByTagName) return false检测，确保老旧浏览器不报错崩溃。 -
第6章 案例研究：图片库改进版
对第4章的朴素图片库进行脱胎换骨式的专业重构：剔除HTML内联onclick，实现纯外部JS自动化事件绑定与键盘可访问性无障碍支持。
编写prepareGallery函数遍历所有链接挂载onclick并返回false阻止浏览器跳转，同时兼顾键盘Enter与Tab键的无障碍聚焦操作。 -
第7章 动态创建标记
对比传统document.write与innerHTML的局限，深度演练createElement、createTextNode、appendChild与自定义insertAfter的标准API。
手写一个标准的insertAfter(newElement, targetElement)辅助函数，弥补W3C标准库只有insertBefore而缺失后置插入的遗憾。 -
第8章 充实文档的内容
展示如何利用DOM自动化增强页面语义：遍历文档自动提取abbr缩略词释义生成附录列表，自动抽取blockquote生成上标文献引用。
编写displayAbbreviations函数抓取整篇论文中的所有abbr标签，动态组装成一个优雅的术语释义定义列表dl追加到文末。 -
第9章 CSS-DOM
解析style属性的工作边界与局限，演示如何用DOM编写表格隔行变色脚本、鼠标悬停行高亮，强调通过切换className实现表现分离。
编写stripeTables函数循环表格的奇数tr行并附加odd类名，让样式全权交给CSS处理，避免在JS中硬编码字体颜色与边框。 -
第10章 用JavaScript实现动画效果
揭示动画的物理本质：位置随时间微小渐变。剖析setTimeout/clearTimeout与位置渐进算法，实现平滑匀速与减速动效。
手写moveElement(elementID, final_x, final_y, interval)通用缓动函数，计算当前坐标与终点差距并按比例每次移动一段距离。 -
第11章 HTML5
展望现代Web标准：解析HTML5语义化标签（canvas, audio, video）、现代表单输入类型与自动完成等新特性的渐进引入。
结合Modernizr或原生能力检测，判定浏览器是否支持HTML5原生表单placeholder，不支持时用JavaScript优雅兜底模拟。 -
第12章 综合示例：乐队网站
综合全书全部设计原则与技术，开发一个包含主页幻灯片切换、关于页手风琴展示、演出排期隔行变色与Ajax联系表单的完整乐队站点。
为Jay Skript and the Domsters乐队构建全功能站点，将渐进增强、DOM创建、平稳退化与无缝Ajax表单提交融会贯通。