《JavaScript DOM编程艺术》（第二版）这本书的核心理念是 “渐进增强” 和 “平稳退化” ，强调JavaScript应该用来增强用户体验，而不是构建网站的基础。即使JavaScript被禁用，网页的核心内容和功能也应该能够正常访问。

第一部分：JavaScript语言基础

这本书没有深入复杂的JavaScript语法，而是聚焦于实现DOM脚本编程所必需的基础知识。

1. 语法概览

1）变量：使用 var 声明变量（注意：本书写作时 let 和 const 尚未普及）。

2）数据类型：字符串、数值、布尔值、数组、对象等。

3）操作符：算术操作符、比较操作符、逻辑操作符等。

4）语句：条件语句、循环语句。

2. 函数

1）函数的定义和调用。

2）理解函数的作用域。

3）返回值：函数如何通过 return 语句返回数据。

3. 对象

1）对象是属性的集合。

2）创建对象的方式：new Object() 和对象字面量 {}。

3）访问对象的属性：点符号和方括号符号。

4. 数组

1）创建数组：new Array() 和数组字面量 []。

2）数组方法：如 join() 用于将数组合并为字符串。

5. 事件处理

1）事件是JavaScript与用户交互的核心。

2）事件处理函数：如 onclick, onmouseover, onmouseout, onkeypress 等。

3）事件处理程序的绑定：本书早期介绍了内联方式，但后续强调了更优的分离方式。

---

第二部分：DOM编程核心

这是本书的绝对重点，详细讲解了如何通过JavaScript来操作网页。

1. DOM 概述

1）文档对象模型：将HTML文档表示为一棵节点树。

2）节点类型：元素节点、文本节点、属性节点。这是理解DOM操作的基础。

2. 获取元素

1）document.getElementById(‘id’)：通过ID获取单个元素。

2）document.getElementsByTagName(‘tagName’)：通过标签名获取元素集合。

3）document.getElementsByClassName(‘className’)：通过类名获取元素集合。

4）通过这些方法的组合，可以精准地定位到DOM树中的任何节点。

3. 获取和设置属性

1）getAttribute(‘attributeName’)：获取元素的某个属性值。

2）setAttribute(‘attributeName’, ‘value’)：设置元素的某个属性值。

3）常用于操作 src, href, title, class 等属性。

4. 动态创建和修改内容

1）innerHTML 属性：可以快速读取或写入元素内部的HTML内容。本书指出了它的便利性，但也提醒了潜在的安全风险。

2）纯DOM方法（更受本书推崇）：

① document.createElement(‘tagName’)：创建一个新的元素节点。

② document.createTextNode(‘text’)：创建一个文本节点。

③ parentNode.appendChild(newNode)：将新节点插入到父节点的末尾。

④ parentNode.insertBefore(newNode, targetNode)：将新节点插入到目标节点之前。

⑤ nodeValue 属性：用于获取和设置文本节点的值。

5. 操作CSS和样式

1）element.style.property：直接修改元素的内联样式。例如 element.style.color = ‘red’。

2）最佳实践：本书建议不要直接使用 style 属性，而是通过 className 属性来添加或移除预定义的CSS类。这样可以将表现信息保留在CSS中，实现结构与表现的分离。

6. 事件处理进阶

1）onload 事件：确保在DOM树完全加载后再执行脚本。

2）事件处理函数中的 this：在事件处理函数中，this 指向触发该事件的元素。

3）事件冒泡：这是DOM事件传播机制中的一种重要方式。当某个DOM元素触发事件时，事件会从最具体的元素（即事件目标）开始，沿着DOM树逐级向上传播到更一般的元素，直到到达document对象。

4）事件委托：利用事件冒泡，将事件处理程序添加到父元素，来管理其所有子元素的事件。这是提高性能和动态内容事件处理效率的重要技术。

7. Ajax 初步

1）本书在最后介绍了Ajax的核心对象 XMLHttpRequest。

2）讲解了其基本工作流程：open() -> send() -> 监听 onreadystatechange 事件。

3）强调了Ajax的同源策略。

4）通过一个动态加载内容的实例，展示了如何用Ajax实现“渐进增强”。

---

第三部分：综合实践与最佳实践

这部分是本书的灵魂，它将这些零散的技术点串联成一套完整的开发哲学。

1. 平稳退化

1）确保网页在JavaScript不可用的情况下，基本功能仍然可用。

2）经典案例：点击链接打开新窗口。应该先让链接 href 属性指向一个真实的URL，然后用JavaScript拦截点击事件，并打开新窗口。这样，即使JS失效，用户也能通过链接正常访问内容。

2. 分离 JavaScript

1）结构、表现、行为三者分离。

2）不要使用内联事件处理程序，如 onclick=“...”。

3）使用外部JavaScript文件，并通过DOM提供的方法来绑定事件。例如：

element.onclick = function() { ... };
// 或者更现代的方式（书中可能未深入）：addEventListener

3. 向后兼容性

1）在调用新的DOM方法前，先检查浏览器是否支持。

2）对象检测：是确保向后兼容的核心技术。

if (document.getElementById) {
  // 安全地使用 getElementById
}

4. 性能考虑

1）尽量少访问DOM：DOM操作通常是性能瓶颈。将多次DOM查询的结果保存在变量中，避免重复查询。

2）尽量少添加标记：精简的HTML和DOM结构有助于提升性能。

3）合并和放置脚本：将多个脚本合并，并将 <script> 标签放在 </body> 之前，以避免阻塞页面渲染。

5. 可访问性

1）考虑到使用屏幕阅读器等辅助技术的用户。

2）动态创建或修改内容时，要确保这些变化能够被辅助设备感知。

---

贯穿全书的案例：图片库

这本书通过一个“图片库”的案例，从最简单的版本开始，一步步应用上述所有知识点进行重构和优化，完美地演示了如何将一个功能简陋的脚本，进化成一个结构良好、体验优秀、健壮且可访问的现代脚本。

1）第一版：基础功能，内联事件处理。

2）第二版：分离JavaScript，使用 onclick 绑定事件。

3）后续版本：添加了平稳退化、可访问性支持、CSS样式切换、Ajax动态加载等。

总结

《JavaScript DOM编程艺术》不仅仅是一本技术手册，它更是一本前端编程思想启蒙书。它的核心价值在于：

1）理念先行：它首先教会我们“为什么”要这么做，然后才是“怎么做”。

2）渐进增强：这是全书的基石，强调JavaScript的角色是“增强”，而非“必需”。

3）最佳实践：从平稳退化、分离JavaScript到向后兼容，它为我们建立了良好的编程习惯。

4）完整的知识闭环：通过一个贯穿始终的案例，将所有知识点融会贯通，让我们看到技术如何服务于用户体验。

即使今天前端技术已经飞速发展，这本书所倡导的核心思想和最佳实践依然完全适用，是每一位前端初学者必读的经典之作。