DOM 深入学习 - 1

本文章记录本人在深入学习Javascirpt DOM中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。

DOM 版本

w3c 指定的DOM规范包括多个版本，不同的版本（或称知为级别）又包含不同的子规法和模块，不同浏览器对DOM的支持是千变万化的。

DOM0级

在很早的时候市场上已经有了一些不同版本的DHTML规范，主要包括IE和Netscape两个不同的版本。这组DHTML规法规定了一套文档对象、集合、方法和属性。虽然不同的DHTML版本的特性存在差异，但是一些基本的思路和用法还是有章可循的。

DOM1级

1998年10月，w3c 推出了DOM 1.0版本的规范。

这个规法主要是包括两个子规范。
- DOM Core（核心部分）：把XML文档设计为树形节点结构，并为这种结构的运行机制定制了一套规法化标准，同时定义了创建、编辑、操作这些文档结构的方法以及属性。
- DOM HTML：针对HTML文档、标签集合、以及与个别HTML标签相关的元素定义了对象、属性和方法。

DOM2级

2000年1月，w3c正式发布更新后的DOM核心部分，并且在这次发布添加了一些新的规范，这次发布的DOM称为2级规范。2003年1月，w3c又正式发布了对DOM HTML子规范的修订，添加了针对HTML 4.01和XHTML 1.0版本文档中的很多对象、属性和方法。这次发布就叫做DOM2.0的推荐版本。

• DOM 2.0 Core：添加了更多的特性，如针对命名空间的方法等。
• DOM 2.0 HTML：针对HTML的文档结构模型，并添加了一些属性。
• DOM 2.0 Event：规定了与鼠标相关的事件和控制机制，但是不包括键盘相关事件和处理部分。
• DOM 2.0 Style：提供了访问和操作所有与css相关的样式以及规则的能力。
• DOM 2.0 Traversal and DOM 2.0 Range：允许开发人员通过迭代方式访问DOM，以便根据需要对文档进行遍历或者其他的操作。
• DOM 2.0 Views：提供了访问和更新文档的表现的能力。

DOM 2.0规法已经是目前各大浏览器主持的主流标准。可惜对ie的支持并不完善。

DOM3级

2014年4月，w3c发布了DOM3.0版本。

• DOM 3.0 Core：添加了更多新的方法和新属性。同时也修改了已有的一些方法。
• DOM 3.0 Load and Save：提供将XML文档的内容加载到DOM文档中和将DOM文档序列化为XML的文档能力。
• DOM 3.0 Validation：提供了确保动态生成的文档的有效性的能力，即如何符合文档类型声明。

清理 DOM 加载流程

一般浏览器加载顺序：
1. 解析HTML结构
2. 加载外部脚本和样式结构表
3. 解析并且执行脚本代码
4. 构造DOM模型
5. 加载图片等外部文件
6. 页面加载完毕

通过上面的加载顺序可以知道，网页头部的脚本（由外部文件加载）会在构造HTML DOM文档之前执行，这就会导致执行脚本无法访问文档结构模型。

如果页面包含许多的外部文件，如大量的图片、视频、音频、动画等文件，可能会延迟脚本的执行事件。为了避免js脚本处于长时间的等待，可以把需要执行的脚本部分放在HTML文档的中间，这样只要在构造DOM后执行到脚本所在的结构位置，就会执行脚本。所以一般建议把js放在页面的底部。

谨慎访问 DOM

访问一个DOM元素是代价比较高的，修改元素的代价更高，因为它们经常导致浏览器重新计算页面的几何变换。在访问或者修改元素最不好的情况下就是使用循环执行操作，特别是在HTML集合中使用循环。

for (var i = 0; i < 15000; i++) {
    document.getElementById('here').innerHTML += 'a';
};

上面这段代码的问题就是每一次循环都会去对DOM元素访问两次：一次是读取innerHTML属性能容，第二次是写入它。更有效率的方法是使用局部宾利储存更新后的内容，在循环结束后一次性写入。

var text = '';
for (var i = 0; i < 15000; i++) {
    text += 'a';
};
document.getElementById('here').innerHTML += text;

innerHTML 与 DOM 方法

谁的性能比较好

两者的性能都是基本接近，不过几乎所有的浏览器中，innerHTML的速度会更快一些，但是最新的基于webkit内核的浏览器除外。

如何选用

使用innerHTML的好处就是在早期的浏览器上面是显而易见的，但在最新版本的浏览器上面就没有那么的明显。因此，采用哪种方法将取决于用户经常使用的浏览器，以及个人的编码爱好。

对于日常的大多数的操作而言，使用innerHTML和使用DOM差异并不是很大，应当根据代码的可读性、可维护性、团队习惯、以及代码风格来综合决定采用那种风格。

警惕文档遍历中的空格 bug

在遍历DOM元素时候，空格的存在很容易造成误解，因为DOM把空格也作为一个节点进行解析（换行符也算）。

var el = document.documentElement.lastChild.firstChild.nodeName;

可以使用上面的代码去检测DOM的元素。

可以定义一个函数用来清除所有包括包含文本节点。这样当执行文档遍历的时候，就不存在元素之间的空格影响。函数要在文档结构加载完后在执行。

function clean(el) {
    var el = el || document,
            f = el.firstChild;

    while (f != null) {
        if (f.nodeType === 3 && /\s/.test(f.nodeValue)) {
            e.removeChild(f);
        } else if (f.nodeType === 1) {
            arguments.callee(f);
        }
        f = f.nextSibling;
    };
}

使用上面函数要注意到是，该函数的功能仅是临时性的清除元素之间的空格，需要在HTML文档的每一次加载是都重新只想你个一遍清除的操作。当然，使用这种方法虽然比较高效，但是在每次遍历文档之前，都需要先执行一次遍历操作，如果文档的结构比较复杂，那么这个操作所消耗的系统资源是不可小视的。

最后，如果文章有什么错误和疑问的地方，请指出。与sf各位共勉！