《JavaScript DOM编程艺术 第2版》——读书笔记（不含代码部分）

第3章：DOM
DOM：    D(document)
    O(object)
    M(model)
常用方法：    getElementById
        getElementByTagName
        getElementByClassName
        getAttribute
        setAttribute

第5章：最佳实践
如何改进javascript代码，使得其具有平稳退化、可分离、向后兼容性、性能较优等特点。
这需要在日常编码中格外注意，思考如何才能达到这样的效果。
具体说明：

第6章：
在进行代码优化时，可以这样考虑。
a.它支持平稳退化吗？
    javascript伪标签、#
b.它的javascript与HTML标记是分离的吗？
    分析清楚自己要实现什么功能，通过具体什么步骤可以实现，然后依次在函数中实现。
    如果想用javascript给某个网页添加某个行为，则不应该让javascript代码对这个网页结构有任何依赖。
    在判断可行性时，如果一个函数有多个出口，可以使它们集中出现在函数开头。
c.共享load事件
    即何时执行当前函数，一般需要页面加载完成之后立即执行。故存在多个函数需要加载时，可以使用addLoadEvent()函数同时加载。
d.不要做过多假设
e.把javascript和CSS结合起来
f.DOM Core 和HTML-DOM的区别
   通常来说后者的写法更简便一些

第7章  动态创建标记
绝大多数JS函数的工作原理：网页的结构由标记负责，JS函数只用来改变某些细节而不改变其底层结构。
JS也可以用来改变网页的结构和内容，通过DOM方法，创建新元素和修改现有元素来改变网页结构。
在不清楚一个元素的结构时，可以根据其包含的元素画出结构图（DOM节点树）。
方法一：通过document.write方法，问题在于使用该方法会使得js和html无法分离，结构和操作无法分离。
             通过innerHTML属性，该属性能够读写给定元素里的HTML内容，但是很粗糙，不能进行细致操作。
方法二：通过DOM
要用DOM的思想来理解添加节点的行为。在DOM看来，一个文档就是一棵节点树。想要在节点树上添加内容，必须通过插入新的节点。
通过两个步骤：
（1）通过createElement方法来创建新的元素；
（2）通过appendChild方法把该元素插入节点树；
（3）通过createTextNode方法给元素添加文本。
（1）中的方法格式：document.createElement(nodeName); 使用时应该把新创建出来的元素赋给一个变量（由于创建新的元素需要邮东西来引用）：var para document.createElement("p"); 这时该元素拥有“nodeName”和“nodeType”属性，但是还未被加入到节点树中。
（2）中方法的格式：parent.appendChild(child); 获取parent的id，var testdiv = document.getElementById("testdiv"); para变量如（1）中创建， testdiv.appendChild(para);
（3）中方法的格式：document.createTextNode(text);  var txt = document.createTextNode(Hello world);
将文本节点插入到上述的新建节点p中，para.appendChild(txt);
构建节点树的过程：可以从左到右，一个分支一个分支的逐一构建，也可以先把所有的元素创建出来，再统一完成父子（从属）关系。
另外：DOM中有insertBefore方法，但是没有insertAfter方法，可以自己写，然后加入到函数脚本中。

Ajax的相关知识：
使用Ajax可以只更新页面中的一小部分，其他内容——标志、导航、头部、脚部等不用加载。
优点：对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来相应请求，它会在后台处理请求，以此同时用户还能继续浏览页面并与页面交互。
缺点：它依赖于JavaScript，所以可能有的浏览器不支持，搜索引擎的蜘蛛程序抓取不到相关内容。
核心技术：XMLHttpRequest对象
该对象最有用的是open方法，用来指定服务器上将要访问的文件，指定请求类型：GET、POST、SEND,第三个参数指定请求是否以异步方式发送和处理。
要构建成功的Ajax应用，关键在于将Ajax功能看做一般的JavaScript增强功能，在平稳退化的基础上求得渐进增强。
渐进增强与Ajax：最开始的应用是基于老式的页面刷新机制构建的，就可以在既有框架的基础上，用Ajax拦住发送到服务器的请求，并将请求转交给XMLHttpRequest对象处理。
Hijax：Ajax应用主要依赖于后台服务器，实际上是服务器端的脚本语言完成了绝大部分工作。XMLHttpRequest对象作为浏览器与服务器之间的“中间人”，它只是负责传递请求和响应。如果把这个中间人移开，浏览器和服务器之间的请求和相应应该继续完成（而不是中断），只不过花的时间可能长一些。
具体的应用实例在第12章介绍。

第8章  充实文档的内容
1. 增强文档  例一（使用定义列表、<abbr>）
定义列表结构：
定义列表（<dl>）有一系列“定义标题“（<dt>）和相应的”定义描述“（<dd>）构成。
缩略语标签<abbr>
编写 displayAbbreviations 函数
IE浏览器有些版本不能正常使用displayAbbreviations函数，因为微软知道IE7之后才支持abbr元素。该问题有几种解决方案，可以选择能够保证该函数平稳退化的方案，即在负责从abbr元素提取title属性值和文本值的for循环里添加一条判断语句（如果当前元素没有子元素就退出当前循环）。
2. 增强文档  例二（文献来源链接）
显示<blockquote>的"cite"属性
编写 displayCitations 函数
以上两个函数有许多共同之处：从创建一个由特定元素（abbr元素  /  blockquote元素）构成的节点集合开始，用一个循环去遍历这个节点集合并在每次循环里创建出一些标记，最后把新创建的标记插入到文档中。
沿着这个思路，编写一个函数，将文档里能用到的快捷键显示在页面中。
3. 增强文档  例三（快捷键清单，与键盘按键关联）
accesskey属性可以把一个元素（如链接）与键盘上的某个特定按键关联在一起。
小结：
在需要对文档里的现有信息进行检索时，以下DOM方法最有效：
getElementById
getElementByTagName
getAttribute
在需要将信息添加到文档中时，以下DOM方法最有效：
createElement
createTextNode
appendChild
insertBefore
setAttribute

第9章  CSS-DOM
（利用DOM技术去获取和设置CSS信息。）
1. 获取样式：
样式存放在style对象的属性里：element.style.property
当CSS属性中存在连字符"-"时（如margin-top-width）要求使用驼峰命名法，即"margin-top-width"变成"marginTopWidth"。
使用CSS速记属性，可以把多个样式组合在一起写成一行，
比如<p style="color: red; font: 12px 'Arial' , sans-serif; "></p>
但是这样的样式是内嵌在html中，推荐css文件从外部引入到html中，这时DOM style 属性就不能检索了。
2. 设置样式：
element.style.propery = value    (这里的value值需要用引号括起来)
3. 使用DOM-CSS的场合：
A 根据元素在节点树里的位置来设置样式
（比如给html中的多个<h1>标签设置样式，如果通过CSS只能给每一个跟在h1后面的元素添加一个class属性）
B 根据某种条件反复设置某种样式
（比如给html中的表格设置斑马线的颜色效果，如果nth-child()不可用，可以用DOM编写函数遍历奇数行）
C 响应事件
（比如鼠标停留时显示说明，CSS伪类hover不是所有的浏览器都支持，可以用DOM编写函数实现）
判断应用CSS还是DOM:改变某个元素的呈现效果——CSS ；  改变某个元素的行为——DOM
4. className属性
用className属性和赋值操作符设置一个元素的class属性：
element.className =value
但是注意这里只是通过className属性替换某个元素原有的class属性，而不是追加。
如果想要把新的class设置值追加到className属性上（intro的第一个字符是空格，元素原来的class），格式如下：
element.className += "  intro";
更新元素className属性，根本没碰style属性，确保了页面的表示层和行为层分离的更彻底。
5. 对函数进行抽象
把一个非常具体的东西改进为一个较为通用的东西——抽象（abstraction）。
比如把上述例子中的标签 'h1' 和类名 'intro' 改成变量 'tag' 和 'theclass'，在调用函数时传递具体的参数值。

第10章  用JavaScript实现动画效果
动画——样式随时间变化的完美例子之一，简单说是让元素的位置随着时间而不断发生变化。
1. 位置position属性：取值为
static（默认按照它们在标记中出现的先后顺序出现）、
fixed、
relative（与static相似，但是可以通过float属性使其从正常显示顺序中脱离出来）、
absolute（可以将元素放在容纳它的“容器”的任何位置）
注意：将函数调用赋值给一个变量是一个好习惯。
2. 时间
setTimeout("function",interval) ，该函数可以让某个函数经过一段预定时间后才开始执行。
如果想要取消某个正在排队等待执行的函数，可以用clearTimeout函数：clearTimeout(variable) ，variable参数中保存某个setTimeout函数调用返回值的变量，该参数最好是全局变量，不使用var来定义，可以在任一位置取消。
3. 时间地增量
parseInt(string)  /  parseFloat(string) 这两个函数可以提取字符串中的数值部分，便于数值计算。
4. CSS中的overflow属性
用来处理一个元素的尺寸超出其容器尺寸的情况。
当一个元素包含的内容超出自身大小时，会发生溢出，可以只让一部分内容可见；也可以通过该属性告诉浏览器是否需要显示滚动条，让用户看到内容的其余部分。
image可以在div中进行移动，链接鼠标单击不同链接的行为，显示image的不同部分。
5. 动画改进
对小数的"四舍五入"处理：
Math.ceil(number);  ——      返回”不小于“number值的一个整数。
Math.floor(number);  ——    返回”小于“number值的一个整数。
Math.round(number);  ——   

第11章  HTML5
1. 谈到Web设计，最准确的理解是把网页看成三个层：
(1)结构层——超文本标记语言（HTML）
(2)样式层——层叠样式表（CSS）
(3)行为层——JavaScript和文档对象模型（DOM）
2. 一个工具
Modernizr是一个开源的JavaScript库，利用它的特性检测功能，可以对HTML5文档更好的控制。
可以在http://modernizr.com/下载。
3. Canvas（画布）
可以通过它动态创建和操作图形图像，它不仅可以用来绘制矢量路径，还可以现实和操作位图图像（如图像的彩色和灰阶）
4. 音频和视频（<audio>和<video>）
视频和音频的任意一种格式，其实都是包含很多内容的容器，只不过编解码器不同，编解码器的核心是一个算法，用来压缩和存储，以减小原始文件的大小。
5. 表单
表单中原有的输入控件类型：文本框、单选按钮、复选按钮
表单中新增的输入控件类型：email、url、date、number、range、search、tel、color
相应的，新的属性包括：
autocomplete —— 用于为文本输入框添加一组建议的输入项
autofocus —— 表单元素自动获得焦点
form —— 用于对<form>标签外部的表单元素分组
min、max、step —— 用于范围（range）和数值（number）输入框中
pattern —— 定义一个正则表达式，以便验证输入的值
placeholder —— 用于在文本输入框中显示临时性的提示信息
required —— 表示必填