javascript DOM,它到底是什么-------Day32

这一晚上看的我是头疼不已啊，为什么呢？

终究是半路出家，我对javascript的理解仅仅停留在：调用javascript，改变页面样式，元素和实现一些事件的响应，尽管须要的时候可能会用，可是到底使用的原理却不是非常明确，至于DOM，这么专业的词汇，还是省省吧。

只是一晚上也不是毫无收获，先记录下临时自己的理解，可能存在偏差，随着之后应用的增多慢慢理解吧，先烙个印再说。

1、DOM它是什么？

最直接的回答：“Document Object Model”的缩写，简称“文档对象模型”，听到这种回答真是让人抓狂啊，可是，不得不说它是正确的。

最专业的回答：W3C对DOM的定义是-----它 是中立于平台和语言的接口，程序和脚本能够通过这个接口动态的訪问和改动文档的内容、结构和样式。

最简练的回答：一种API，应用编程接口

毫无疑问，上面的回答都是正确的，并且我们还能提炼出几个要点：1、一种应用接口；2、对文档的操作，在我看来，这大抵就是它的核心了，这样我们来试着通俗的解释下，看看能不能更简单、更直观的了解这样的概念

在上一篇文章中，提到了javascript能够分成三部分：ECMAscript、DOM、BOM，然后又简单描写叙述了下ECMAscript：定义了变量来存不同数据类型的值，定义了运算符来对值进行操作，将值的改变和运算符的操作过程合成语句，或者用语句拼接一些完整的方法等等，可是就这样摆着，方法是有了，可没见过说明书能够自己操作机器的，我们要想真正实现动态化和交互性，就必须将他们整合，而这样的将html（或者html5）、css和javascript凝聚在一起的就是DOM。

这样我们再来回味上面的三种回答，它是将文档内事物都整合起来作为一个大的对象进行操作的；至于改变文档内的内容，javascript则是来訪问这个文档的入口，而举个不恰当的样例，桌上一桌丰盛的菜，你最须要的是什么，是一套餐具，人用餐具吃饭，这已经成了一个标准，无论你吃的是那个菜，无论是你在吃还是他在吃，手扒的倒是能够排除在外，而javascript就是那个媒介，那个通道....

2、DOM是怎样进行改变的？

这个总是各个介绍中大篇幅阐述的，看的多了，理解的也就easy些，这样我们先来看看这幅神图：

嗯，就是这样，DOM将整个文档打散，分成一个模块一个模块的散件，里面的随意一个事物你都能够单独将它取出来，这就是它的策略，分而治之。

这样来让我们看看，它把他都分成了什么：（还记得什么是网页么，html标签 + 文本）

* 文档节点 ：这就是整个文档，就是一个网页

* 元素节点 ： html标签 

* 文本节点 ：文本

* 属性节点 ：html标签的属性

* 凝视节点 ：凝视都是一类，分的果然非常细，不放过一条活鱼的样子

至于根节点、父节点、子节点和同胞的差别，就不详说了，这个社会，谁还能分不清谁是谁啊。

3、DOM的初印象

你对DOM的初印象是什么，我不知道，我的初印象是对事件的响应，既然是实现动态，可以交互，就必需要能监听事件，或者鼠标的，或者键盘的，这就是我最初的概念，当然这非常片面，可是这一点会你是始终忘不掉的，简单想想会有哪些事件需要监听呢：

* onclick/onmouseover/onblur/甚至单击、双击、右键、长按的鼠标操作，足够单独整理一篇的

* 监听键盘（不同按键相应的编码，难道真的要背么..）

* 事实上另一个是对页面改变的监听，window.onload/onchange/等等

4、DOM的增删改查

碰到数据处理，惯性的就是考虑增删改查，不得不说，这应该算的上一个好习惯。我们最常见、使用频率最高的应该是查和改。

查的方法通常有三种：getElementById、getElementByTagName、getElementByNames，由于id的唯一性，通过id来定位查询是最快最经常使用的，而后两种则是获取集合类型，批量获取的好方法，tagname用来获取同样标签的同类元素，而classname则能够自由定义，更便于特选部分，而非所有，当然classname还存在它最大的问题就是兼容性，万恶的ie。

而改的就 更简单了，在前面以前做过的更改页面背景颜色，甚至改变引入样式，改变标签内容等，都是DOM的改，它主要包含例如以下几个方面：1、改变html内容；2、改变CSS样式；3、改变html属性；4、改变事件（处理程序）

而增和删就是最近才掌握学习的，createElement（“div”）是不是非常熟悉，是的，我们已经用过非常多次了，当然节点还不仅仅这一种，我们还能够变通，仅仅要不要忘记最后的appendChild（），而删就更easy理解了，在哪就从哪里剔除掉，removeChild（），“县官不如现管”在这里体现的淋漓尽致，当然前面的改也能够通过replaceChild来总体改动，就不再多说了。

这里事实上有个最明显，最经常使用，而我们却非常少去思考的一个最鲜活的样例，我们来分析下，加深下印象：

<script type="text/javascript">
function show(){
	alert("haha");
}
</script>

是不是很的熟悉，没办法，生活就是这样，总在不经意间让你感觉到无尽的智慧。我们来写一下它的DOM代码

var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function show(){alert('haha');}";
document.body.appendChild(script);

5、怎样加快DOM的执行速度

事实上我如今写这个有点牵强，由于我没有实际应用測试过，可是感觉是有道理的，就在这里一块说下：

首先，为什么会存在DOM的执行速度问题？

DOM的改动会严重影响网页的用户界面，须要又一次绘制页面，也就说须要浏览器进行又一次解析，而为了确保运行效果的准确性，全部改动操作是按顺序同步运行的，也就是所说的“回流”，由于须要又一次从头运行，所以性能上肯定要收到影响。我们无法改变这样的现状，仅仅能有意有效的去降低它的负担，避免更能多的影响因素。

然后，我们来看看，那些操作能够呢？

1、通过类名切换来改动DOM

document.getElementById("").style.color=cyan;

document.getElementById("").style.width=100px;每个改变都要进行重析，须要执行两次

我们全然能够写成.cc{style:cyan;width:100px;}

document.getElementById("").classname=cc;这里仅仅须要执行一次就可以

2、一次性DOM元素生成

var e=document.createElement("");

body.appendChild(e);

e.innerHTML="haha";---两次重析

而我们能够去做的仅仅是将二三句进行颠倒就可以

var e=document.createElement("");

e.innerHTML="haha";

body.appendChild(e);--一次就可以

3、还有个就是文档片段记录

function show(element){

var a;

for(var i=0;i<10;i++){

var e=document.createElement("");

e.innerHTML="haha";

body.appendChild(e)

}

};----这但是一个浩大的project，须要10次重析

而我们通过文档片段记录，则有效的减短了时间

function show(element){

var a,f=document.createDocumentFragment();

for(var i=0;i<10;i++){

var e=document.createElement("");

e.innerHTML="haha";

f.appendChild(e);

}

body.appendChild(f);

}

我理解的DOM，临时是这样一个框架，接下来还须要看BOM，毕竟这三部分是一个总体，整合起来看的话会有不小的惊喜吧，今天就先到这里了，啊，又晚了，睡觉