《JavaScript DOM编程艺术》读书笔记

这周看了《JavaScript DOM编程艺术》这本书。很不错。难怪封面上说是“Amazon超级畅销书”、“从JavaScript到Ajax的必由之路”。书不厚，正好300页。大师级的思维方式，循序渐进。

以下参考自豆瓣网http://www.douban.com/review/1227656/

　　DOM模型
　　——在dom模型中，文档是一棵树，文档元素、文本和属性都是节点
　　——所有的属性节点都属于元素节点，文本节点是没有属性的
　　——css样式本身不是节点，不过也采用了文档树的模型
　　——dom的工作方式是先加载静态页面，再动态刷新，并不改变网页源码
　　——在浏览器看来，dom节点树才是文档。我们不是在创建html内容，而是在改变dom节点树
　　
　　DOM方法
　　——getAttribute不能用于document，只能用于元素
　　——setAttribute可以修改任何一个元素的任何一个属性，如果该属性不存在就创建后再赋值
　　——dom core的api，如getElementById, getElementsByTagName, getAttribute, setAttribute, createElement, createTextNode, appendChild和insertBefore等不是任何一个浏览器的js语句。使用它们而不是其他等价方法的好处就在于可以真正跨平台，独立于具体脚本语言和文档
　　——element.childNodes返回该元素所有子节点组成的数组（不只是下一层子节点，而是所有子节点的前序遍历排列）。节点的类型有12种，用element.nodeType查看其属性序号
　　——firstchild和lastchild是dom core认可的缩写。注意，我们想获得的文本的内容常常不是标签的值而是标签第一个子节点的值
　　——尽量用文本节点+nodeValue而不是标签.value来获得文本的值；如果要访问元素节点的属性，则应使用setAttribute
　　——nodeName总是返回大写字母
　　——html dom中有一些专用简写，如document.body，document.form
　　
　　三层分离
　　——内容层(xhtml)-表示层(css)-行为层(js) 。一层包裹一层，又相互独立。css的伪类涉及了行为层，而js动态修改dom涉及了内容层，动态修改style涉及了表示层。除非非如此不能达到目的，否则不要这么做
　　——在分离的行为层为文档添加事件处理总是优于直接写硬链接（直接写硬链接的话，onevent=又优于href=javascript:伪协议）。一般的步骤是：设置默认链接->用js查找元素->添加事件->提取属性->修改页面
　　——事件处理在装载文档之后在onload事件处理中动态绑定到文档的元素上，class和id都可用来标记。把js分离出来。这样一来，html就不用改动；即使禁用js，也只是少了一些事件处理而已
　　——“作为一条原则，如果你想用javascript给某个网页添加一些行为，就不应该让你的javascript代码对这个网页的结构有任何依赖。”
　　——“javascript脚本只应该用来充实文档的内容，要避免使用dom技术来直接插入核心内容。”
　　——事件处理函数返回false后，浏览器会认为该事件没有发生，不会去执行默认行为
　　——不要让给标记元素添加class的事情变得跟添加硬链接同样啰嗦，可以用id标记一个上层节点，然后在代码中检测其子节点。代码是可以很灵活的，所以尽量把页面标记搞得简单点。无论如何，代码只用写一次，页面标记却可能重复很多次
　　——css的属性名中的“-”中在dom的style中要写成Camel式
　　——写在外部css文件中的style是不能被dom检测到的
　　——“与其使用dom脚本去直接改变某个元素的样式信息，不如通过javascript代码去刷新这个元素的class属性。”
　　
　　通用性
　　——用对象检测而非浏览器嗅探来实现向后兼容，只需要在函数的开头添加一个或一组if语句
　　——事件处理函数是浏览器间兼容的，比如onclick, onfocus, onblur
　　——定时器的四个函数也是浏览器间兼容的
　　——最好选用xhtml而非html，在xhtml中所有标记必须小写，单标签必须有对应的<x></x>或者<x />（“/”前要加个空格）
　　——document.write和innerHTML都不被xhtml所接受