BOM和DOM（二）

DOM优化

逐个地添加列表项，将导致浏览器反复渲染新信息，使用一个文档片段来保存创建的列表项，最后一次性地将它们添加到文档中，就可以完美地避开反复渲染的问题。
在所有的节点类型中只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。不能把文档片段直接添加到文档中，但可以将它作为一个仓库来使用，在里面保存将来可能添加到文档中的节点。创建文档片段的方法：document.createDocumentFragment();。

DOM事件

JavaScript使用户有能力创建动态页面，事件是可以被JavaScript侦测到的行为，网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。
事件指派方法：静态设置语句块：直接设置按钮的onclick事件为语句块构成的文本，这种方法只能适合于简短的语句块。静态设置函数调用：将事件处理的语句块写到一个函数中，为按钮的onclick属性指定函数调用的文本即可，这种方法可以带参数this已获得触发事件的按钮对象，借此获得事件触发者的其他信息。这种方法适用于多个事件触发者设置事件处理方法。动态设置函数引用对象：将事件处理的语句块写到一个函数中，该函数不带参数，在程序中为事件触发者动态指定事件处理函数的函数名。绑定事件：addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）,处理函数和是否在捕获时执行。
常用的事件类型

事件触发有键盘，鼠标，定时器以及系统等因素。如下图： sjcf.png
event对象的常用属性：当事件发生时会产生事件对象，事件对象的作用是用来记录事件发生时的一些相关信息，如鼠标移动时的位置，键盘按下时的键值等。event对象的常用属性如下图： e-sx.png

DOM扩展

HTML5向Wab新引入了querySelector以及querySelectorAll两个方法能更方便地从DOM选取元素，功能类似于jQuery的选择器。

两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要时合法的CSS选择语法。querySelector（）方法仅仅返回匹配指定选择器的第一个元素。如果需要返回所有的元素，使用querySelectorAll（）方法替换。新属性实现遍历：childElementCount:返回子元素的个数。 firstElementChild：指向第一个子元素。 lastElementChild:指向最后一个子元素。 previousElementSibling:指向前一个同辈元素。 nextElementSibling:指向后一个同辈元素。classList属性：classList属性返回元素的类名，该属性用于在元素中添加，移除及切换CSS类，classList属性是只读的，但是可以使用add()和remove()方法修改它。length属性返回类列表中类的数量。classList常用方法如下图： c-ff.png

本地存储

JavaScript cookie :cookie是一些数据，存储于你电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。cookie的作用就是用于解决如何记录客户端的用户信息；当用户访问web页面时，他的名字可以记录在cookie中。在用户下一次访问该页面时，可以在cookie中读取用户访问记录。cookie以名/值对形式存储。
HTML5 Web Storage
Web Storage:在HTML5中，本地存储Web Storage是window的属性，包括localStorage和sessionStroage，前者是一直存在本地的，后者只是伴随着session,窗口一旦关闭就没了，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage；用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。二者用法相同。