JavaScript DOM 编程艺术（第2版）学习记录

这是我看的WEB前端开发的第一本书，把之前不知道的知识点罗列了一些，仅留给自己学习所用。

DOM编程最佳实践：

一、平稳退化：确保网页在没有javascript的情况下也能正常工作。

二、分离javascript：把网页的结构和内容与javascript脚本的动作行为分开。

三、向后兼容性：确保老版本的浏览器不会因为javascript脚本而死掉。

四、性能考虑：确保脚本执行的性能最优。

平稳退化

网站的访问者完全有可能使用的是不支持javascript的浏览器，还有一种可能是虽然浏览器支持javascript，但用户已经禁用它了（比如，因为讨厌看到弹出广告）。如果正确地使用了javascript脚本，就可以让访问者在他们的浏览器不支持javascript的情况下仍能顺利地浏览你的网站。这就是所谓的平稳退化（graceful degradation），就是说，虽然某些功能无法使用，但最基本的操作仍能顺利完成。

1、javascript:伪协议

javascript:伪协议让我们通过一个链接来调用javascript函数，比如

<a href="javascript:popUp('http://www.baidu.com/');">example</a>

这条语句在支持“javascript:”伪协议的浏览器中运行正常，较老的浏览器则会去尝试打开那个链接但失败，支持这种伪协议但禁用了javascript功能的浏览器会什么都不做。

总之，在HTML文档里通过“javascript:”伪协议调用javascript代码的做法非常不好。

2、内嵌的事件处理函数

如<a href="#" onclick="popUp("http://www.baidu.com/"); return false;">example</a>

这种方法跟伪协议的做法同样糟糕。

向后兼容

1、对象检测

2、浏览器嗅探技术

性能考虑

1、尽量少访问DOM和尽量减少标记

2、合并和放置脚本

3、压缩脚本

DOM Core和HTML-DOM

getElementById

getElementByTagName

getAttribute

setAttribue

这些都是DOM Core的组成部分。它们并不专属于javascript，支持DOM的任何一种程序设计语言都可以使用它们。它们的用途也并非仅限于处理网页，它们可以用来处理用任何一种标记语言（比如XML）编写出来的文档。

DOM Core                                                                              HTML-DOM

document.getElementByTagName("form")                    document.form

element.getAttribute("src")                                                 element.src

element.getAttribute("href")                                                element.href

document.getElementByTagName("body")                   document.body

document.write方法和innerHTML属性

document.write方法和innerHTML属性也是HTML-DOM的专有属性，不能用于任何其他标记语言文档。浏览器在呈现正常的XHTML文档时会直接忽略掉innerHTML属性和document.write方法

DOM节点树、文档

setAttribute方法可以改变DOM节点树上的某个属性节点，相关文档在浏览器里的呈现就会发生相应的变化。不过，setAttribute方法并未改变文档的物理内容，如果用文本编辑器而不是浏览器去打开文档，将看不到任何变化。只有在用浏览器打开那份文档时才能看到文档呈现效果的变化。这是因为浏览器实际显示的是那颗DOM节点树。在浏览器看来，DOM节点树才是文档。

个人猜测：浏览器加载文档后，在内存中生成DOM节点树，并将其显示在网页上，文档自始至终都是静态的、没有变化的。用户实际操作的是DOM节点树，浏览器显示的也是节点树。（参考资料：前端必读：浏览器内部工作原理 http://kb.cnblogs.com/page/129756/）