javascript DOM,它究竟是什么-------Day32

这一夜看的我是头疼不已啊，为何呢？

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

只是一夜也不是毫无收获，先记录下临时本身的理解，可能存在误差，随着以后应用的增多慢慢理解吧，先烙个印再说。

一、DOM它是什么？

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

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

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

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

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

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

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

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

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

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

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

* 元素节点 ： html标签 

* 文本节点 ：文本

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

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

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

三、DOM的初印象

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

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

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

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

四、DOM的增删改查

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

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

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

而增和删就是最近才掌握学习的，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);

这种话<script type="text/javascript" src=""></script>你知道怎么写了么

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

事实上我现在写这个有点牵强，因为我没有实际应用測试过，但是感受是有道理的，就在这里一块说下：

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

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

而后，咱们来看看，那些操做可以呢？

一、经过类名切换来改动DOM

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

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

咱们全然可以写成.cc{style:cyan;width:100px;}

document.getElementById("").classname=cc;这里仅仅需要执行一次就能够

二、一次性DOM元素生成

var e=document.createElement("");

body.appendChild(e);

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

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

var e=document.createElement("");

e.innerHTML="haha";

body.appendChild(e);--一次就能够

三、还有个就是文档片断记录

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，毕竟这三部分是一个整体，整合起来看的话会有不小的惊喜吧，今天就先到这里了，啊，又晚了，睡觉