html+dom+深入,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各位共勉！