首页 > 代码库 > DOM技术
DOM技术
DOM概述
DOM：Document Object Model（文档对象模型）（DOM核心就是 文档变对象，标签也变对象，属性也变对象，反正就是把标记文档拆散）
用来将标记型对象封装成对象，并将标记型文档中的所有内容（标签，文本，属性）都封装成对象。
封装成对象的目的是为了方便操作这些文档和文档中的内容，方便动态（增删改查）。
文档：标记型文档
对象：封装了属性和行为的实例
模型：所有标记型文档都具备的一些共性特征的一个体现
只要是标记型文档，DOM技术都可以进行操作。
常见的标记型文档：html xml
DOM这种技术如何对标记型文档进行操作的？
首先对标记型文档进行解析。
DOM解析方式
将标记型文档解析成一个DOM树，并将树中的内容封装成节点对象
在浏览器中，DOM解析将按照标签的层次关系体现出标签的所属，形成一个树状结构，称为DOM树。
DOM解析由浏览器自动完成，解析之后，生成一个document对象，并将它加载进内存。
比如下面这个html文档和相应的DOM树，整个HTML文档被封装成一个document对象。
<html> <head> <title>这是演示文档</title> </head> <body> <div>div区域</div> <dl> <dt>上层项目</dt> <dd>下层项目</dd> </dl> <table> <tbody> <tr> <th>表头</th> <td>单元格</td> </tr> </tbody> </table> <form> <input type="text"/> </form> </body></html>
DOM树：
树中的标签，文本，和属性称为节点，也称为对象。标签也称为页面中的元素。乱
理解：html标签是静态的，全是死的，没有办法对其中的某个标签进行操作的，现在通过DOM技术把标签，文本，属性全部单个拿出来，那么文档就可以对每个元素进行操作
DOM技术把文档文档中的元素全变成对象，这样才能挨个的动态操作。
DOM解析方式的好处：可以对树中的节点进行任意操作，比如：增删改查。
弊端：这种解析方式需要将真个标记型文档加载进内存，意味着如果标记型文档的体积很大，浪费较大内存空间。
SAX解析方式
是由一些组织定义的民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准。
SAX解析方式：是基于事件驱动的解析。
这种解析方式，并不将整个文档一次性读取，按照每一个标签进行解析，读到一个标签的开头，相当于处罚一个事件，然后对标签内容进行解析，然后读取到结束标签，这个解析就完成了。
这种解析方式获取数据速度很快（查），但是不能对标记进行增删改的动作。根据需求来灵活选择。
DOM的三级模型
DOM level 1：将html文档封装成对象。
DOM level 2：在level 1 基础上加入新功能，比如解析名称空间（html标签中的xmln属性代表命名空间，这个名字必须唯一，一般用网站的域名来作为命名空间，）
DOM level 3：将xml文档封装成对象。
这三种就完成了对常见的标记文档的解析
DOM是一种底层的技术，各个语言都对外提供了DOM的解析工具，java中的dom4j，jaxp（java内置）
同样Javascript也有相应的解析工具，在前端中，用Javascript进行解析。
DHTML概述
动态的HTML，不是一门语言，是多项技术综合体的简称
html+css只是一个静态页面，加入Javascript和DOM之后，就动起来了。
这四个技术在动态html页面效果定义时，都属于什么角色呢，负责什么职责呢？
HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。（用标签封装数据）
CSS：负责提供样式属性，对标签中的数据进行样式的定义。（对数据进行样式定义）
DOM：负责将标记型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作。
Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。比如想添加十个节点，就用循环，不然要挨个添加，甚是麻烦！（负责页面行为，就是页面动态效果）
综上所述：Javascript是动态效果的主力编程语言。
DHTML+XMLhttpRequest = AJAX
BOM模型
Browser Object Model（浏览器对象模型）
DOM为了方便操作文档，BOM为了方便操作浏览器。
bom中有一些对象，这些对象可以直接在javascript代码中使用，用来获取相应的信息。
widow对象
浏览器对应的对象就是window对象
注意：只要打开浏览器，window对象就在内存中，可以在javascript中直接使用，其实由于window对象是默认存在的，所以window对象可以缺省
appName，history，navigator等属性。
一些常用方法：
alert();弹窗
confirm();弹出一个是否选择窗口，根据不同的选择，该函数返回是或否，通过对该返回值的判定，进而选择执行不同的操作。（if操作）
focus();获取焦点。
setTimeout(js语句,毫秒值);超过毫秒值就执行js语句。类似于单片机的中断？函数返回一个整数，用来区分多个计时，将该值放到clearTimeout中可以取消该计时
setInterval(js语句,毫秒值);每隔毫秒值执行一次。函数返回一个整数，用来区分多个计时，将该值放到clearInterval中可以取消该计时
clearTimeout();
clearInterval();
moveBy(横坐标偏移量,纵坐标偏移量);当前浏览器窗口按照偏移量移动。
moveTo(横坐标,纵坐标);直接移动到指定坐标点。
open("网址","打开方式","height=100,width=100,status=yes,toolbar=yes,menubar=yes,location=yes");打开方式：新窗口(_blank)，有状态栏，有工具栏，有菜单栏，有地址栏
close();关闭窗口，必须是自己通过代码新打开的窗口才能通过close来关闭。
常见事件：
直接指向一个函数即可，事件触发时，就会执行函数。
onload=function(){ code... }onload：当窗口中的所有动作完成后，立刻触发，网页内容加载完后执行。
unbeforeunload：点击关闭浏览器窗口，关闭之前会执行。
onunload：点击关闭浏览器窗口，浏览器关闭之后调用。
属性：
status：属性中的值就会显示在状态栏。
弹窗广告：
location对象
和java中的url对象类似，location中的属性可以获取，也可以赋值，相当于一个变量。
location.protocol：获取地址栏中的协议
location.href：可以对该变量赋值，这会改变地址栏的值并进行解析，如果解析是http协议，就会对链接进行访问。
location.pathname：路径名
DOM操作
DOM技术