JS DOM编程艺术 | 笔记
第一章 JavaScript语法
1、最好的方法是<script>标签放到HTML文档的最后，</body>标签之前。
2、与解释性语言相比，编译型语言往往速度更快，可移植性更好。
3、字符串用单引号双引号都行，最好根据字符串包含的字符来选择，可以用转移字符\
4、一个数组中可以存不同的数据类型比如：var Lennon = ["john",1940,false];
5、与数组类似，对象也是使用一个名字表示一组值，对象的每一个值都是对象的一个属性，使用点号来获取属性。创建对象使用Object关键字。
6、拼接：把多个字符串首位连接在一起的操作 var message = “I am felling”+"happy"; JS是弱类型的语言，字符串+数字=字符串
7、if(false==空字符串) 会返回true，要严格比较要用另外一种等号===
8、函数声明function
9、在函数中使用了var，变量就会被视为局部变量。如果没有使用var，就会被视为全局变量。
10、对象里的数据可以用两种形式访问：属性和方法，属性和方法都可以用点来访问。
11、给定对象创建一个新实例需要使用new关键字，如var a= new person;
12、JS里对象可以分三类：
用户定义对象：程序员自行创建的对象。
内建对象：内建在JS语言里的对象，比如Array、Math和Data等。
宿主对象：由浏览器提供的预定义对象。
13、DOM把文档表示为一颗家谱树，M代表Model。DOM里包含许多不同类型的节点。
元素节点
文本节点
属性节点
14、id属性就像是一个挂钩，一头连着文档里的某个元素，另一头连接CSS样式表里的某个样式，DOM也可以使用这种挂钩。
15、getElementsByTagName和getElementsByClassName返回的是数组
16、getAttribute方法可以获取各个属性值。//不属于document对象
setAttribute可以对属性节点值做出修改
17、DOM的工作模式：先加载文档的静态内容，再动态刷新，刷新不影响文档的静态内容。DOM的真正威力在于对页面内容进行刷新却不需要在浏览器里刷新页面。
18、DOM是一种适用于多种环境和多种程序设置语言的通用型API
19、onclick事件处理函数，如果收到的JS代码返回值为true，则认为被点击了。如果接收的返回值是false，则认为没有被点击。
20、<a href="#" > 这里的#代表的是未指向任何目标的内部链接。
第二章 属性和方法
1、childNodes属性
可以获取任何一个元素的所有子元素element.childNodes，返回的是一个数组
2、nodeType属性
node.nodeType的值是一个数字而不是字符串
1—元素节点
2—属性节点
3—文本节点
3、nodeValue属性
得到的并不是包含在这个这个段落里的文本
4、firstChild和lastChild属性
获取数组第一个和最后一个元素
5、nodeName属性
获取节点名称，总是返回一个大写字母的值
第三章 实践&思想
1、平稳退化
可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利的浏览你的网站，就是所谓的平稳退化，虽然某些功能无法使用，但最基本的操作仍能顺利完成。
2、向后兼容
对象监测：把某些方法打包在一个if语句中，根据这个方法是否存在true还是false来决定采取怎样的行动。//监测浏览器对JS的支持程度。
浏览器嗅探:通过JS代码检索关于浏览器品牌和版本的信息。
3、性能考虑
为了保证应用流畅的运行，应该注意
尽量少访问DOM和尽量减少标记
合并和放置脚本：合并到一个js文件中，减少加载页面时发送的请求数量
压缩脚本：比如删除空格和注释，有很多压缩工具可以使用。精简版本一般命名中添加min.js
4、JS和HTML是否应该分离
JS和HTML一般都混杂在一起
分离原则：如果想要用JS给某个网页添加一些行为，就不应该让JS代码对这个网页结构有任何依赖。
5、onkeypress事件处理函数
这个函数容易出问题，用户每按下一个键都会触发它
6、getElementById、getElementsByTagName、getAttribute、setAttribute都是DOM Core的组成部分，而onclick属于HTML-DOM里的内容。
第四章 动态创建标记
1、document.write
write()方法可以方便快捷的把字符串插入到文档里 /*write最大的缺点是违背了行为应该与表现分离的原则 */
2、innerHTML属性
浏览器几乎都支持innerHTML，起源于IE4。这个属性不是W3C DOM标准的组成部分，但是已经包含在HTML5规范中了。
3、DOM方法
DOM是文档的表示，是一条双向车道，不仅可以获取文档的内容，也可以更新文档的内容
createElement方法
只要使用了createElement方法，可以把新创建出来的元素赋值给一个变量。
appendChild方法
为元素添加一个子节点
createTextNode方法
把文本插入到一个空白的节点中，这个节点已经插入到了文档的节点树中。
4、在已有元素前插入一个新元素
insertBefore()方法 /* 新元素、目标元素、父元素 parentElement.insertBefore(newElement,targetElement) */
在现有元素后插入一个新元素
DOM本身没有提供insertAfter方法，所以可以自己写一个
1 function insertAfter(newElement,targetElement){ 2 var parent = targetElement.parentNode; 3 if(parent.lastChild == targetElement){ 4 parent.appendChild(newElement); 5 }else{ 6 parent.insertBefore(newElement,targetElement.nextSibling); 7 } 8 }
5、Ajax
Hijax /*渐进增强地使用Ajax */
Ajax应用主要依赖于服务器端处理，而非客户端处理。
第五章 充实文档的内容
1、使用DOM要记住两个原则：
渐进增强：先从最核心的部分开始，然后逐步完善。
平稳退化：渐进增强必然支持平稳退化。
2、<abbr>标签：缩略语
<acronym>标签：首字母缩写词 /* 在HTML5中已经被<abbr>代替 */
3、displayAbbreviation函数在IE6或者更早的windows版本中有问题
4、避免使用DOM技术来创建核心内容
第六章 CSS-DOM
浏览器看到的网页其实是由三层信息构成的共同体：结构层、表示层、行为层
1、结构层
由HTML或者XHTML之类的标记语言负责创建。标签页比如<p>对网页内容的语义做出了描述。
2、表示层
由CSS负责完成，CSS描述页面内容应该如何呈现。
3、行为层
JS和DOM主宰的领域
4、这三种技术之间存在一些潜在的重叠区域，CSS利用伪类走进DOM的领地。
5、style属性
文档的每个元素节点都有一个属性style
获取颜色可以使用style对象的color属性element.style.color
6、许多DOM属性是只读的，也有例外，比如style对象的各个属性都是可读写的。
7、利用表格做页面布局不是好主意，但利用表格来显示表格数据却是理所当然。
8、className属性
可以用来设置一个元素的class属性，通过className属性设置某个元素的class属性时课替换掉元素原有的class。
第七章 JS实现动画效果
结合CSS-DOM和JavaScript的setTimeout函数，可以实现一个简单的动画。
第八章 HTML5
1、给<html>元素添加一个no-js类<html class="no-js">可以使浏览器在不支持JS的情况下应用CSS样式。
2、在IE中添加未知元素，必须使用类似下面的JS代码来创建该元素document.createElement('article');
/*Modernizr.js可以帮助我们做这件事 */
3、音频和视频<video>和<audio>
浏览器显示<video>元素时，会添加统一的标准播放控件，想要自定义需要DOM属性来实现。
使用控件一定要在<video>元素中添加control属性<video src="movie.ogv" control>
