《JavaScript DOM编程艺术》 笔记

      我在读这本书之前已经有一定的基础，也有过项目经验。之前做过hybird混合开发，当时开始做的时候也没什么基础，看几天代码就直接开工了，需要什么知识都是临时看，想到什么就搜什么用什么，也没有系统的学习一下。因为那个项目主要使用Jquery，所以很多时候都是jquery的方法直接拿来用，也没有对DOM有基础的认识，很多东西都是半懂不懂。《JavaScript DOM编程艺术》这本书对DOM和原生方法的讲解非常详细，接下里写的是我觉得比较重要的、而且笔者以前也没有注意到的内容。

      第一章主要是js的简史，浏览器厂商之间的相互竞争到如今的统一，不过多描述。

      第二章主要介绍js基本的语法和用法，js是一门解释性弱类型语言。不需要编译器，浏览器的解释器直接读入源代码并执行。其他的不过多描述。

      第三章主要讲DOM（文档对象模型）的相关知识。一份文档可以用一个模型来表示，模型中的每个元素之间都或多或少有着父元素，兄弟元素，子元素的关系，所以文档称之为节点树。

      节点跟上面提到的元素不一样，节点包括元素节点、文本节点和属性节点，一般操作DOM是通过元素节点来调用。有3种DOM方法可以获取到元素，分别是getElementById()(元素ID),getElementsByClassName()(类名),getElementsByTagName()(标签名)。getElementById()方法返回的是一个对象，其他两个方法返回一个对象数组。getAttribute()和setAttribute()方法分别是获取和设置元素的属性值。很多框架封装的方法都是通过这些原生方法实现的，比如addClass方法，就是找到对应元素之后，通过getAttribute("class")获取class的属性值，在这个值后面加上需要加的类名称，再使用setAttribute()方法把新生成的字符串赋给class属性，就可以达到在元素中添加类的效果。

      第四章主要是一个图片库案例和元素的一些属性和相关应用，事件处理函数。

            childNodes：全体节点的总个数；

            nodeType：节点类型（属性值是数字，常用的有3种，1表示元素节点，2表示属性节点，3表示文本节点）；

            nodeValue：获取或设置文本节点的值；

            firstChild&lastChild：第一个or最后一个子节点

      通过这些属性可以找到文档中的任意节点。并且通过事件处理函数（比如onclick）可以为链接添加绑定事件。

      第五章主要是网页制作时一些尽量要达到的标准，主要内容如下：

      1.平稳退化:确保网页在没有javascript的情况下也能工作；

      2.分离：结构层表现层和行为层互相分离；

      3.向后兼容性：确保老版本的浏览器上能够正常使用；

      4.性能考虑：确保脚本执行的性能最优。

      关于平稳退化和向后兼容两点，这本书的作者是非常看重的。但是在制作网页时，要考虑主体用户所使用的浏览器和制作成本还有用户体验之间的关系，一般考虑较新的主流浏览器之间的兼容。

      把网页的行为与结构分离开，比如onclick事件，就可以在js中找到特定元素之后再进行绑定，而不必一定要当成属性放在HTML中。这样可以达到行为与结构的分离。

      更多的是对脚本性能的考虑。每次访问DOM元素都会遍历整个DOM树，在有规划的情况下可以考虑减少DOM访问的次数；引入脚本文件的script标签位置也会对其产生影响，放在head中会导致浏览器不能并行加载其他资源，所以引入js脚本时最好放在</body>之前或者之后；另外就是在可能的情况下考虑js脚本的合并与压缩。

      第六章主要是根据第五章的标准对之前章节的案例进行改进。

      第七章主要介绍创建标记的方法，包括传统方法和一些DOM方法，以及通过现有的方法来编写一些其他的操作DOM的方法。

      传统方法：document.write():将字符串插入文档中，这个方法需要将方法调用写在body中的script标签中，无法让行为与结构分离；innerHTML：读写某元素中的HTML内容。

      DOM方法：createElement：创建新的元素节点；

                      appendChild：将新节点插入某个父节点中；

                      createTextNode：创建文本节点；

                      insertBefore：在指定元素前插入新元素

      并且示例通过insertBefore方法和nextSibling方法编写insertAfter函数。

      第八章主要演示相关函数的编写与封装来充实页面的内容和效果。

      第九章讲解根据元素位置设置样式等函数的封装与使用。

      第十章主要是实现简单的动画效果。通过setTimeout()循环改变div的top和left属性值来达到动画效果，并封装成函数，进行优化并应用到一个图片切换的功能中。

      第十一章介绍HTML5中加入的几种控件，并且对控件进行一些自定义修改(比如视频、音频、input等)。

      第十二章中主要是一个完整的项目案例，从布局版式到行为层的函数调用，到最后的压缩代码和优化，本书都讲解的很详细。

      附录JavaScript库：通过引入库可以使用更多高级的选择器来实现功能，在操作DOM时也有更多简单易用的方法。比如jquery库，也封装了简单的ajax方法，可以通过请求取得数据；也有一些基于CSS的动画效果。