DOM基础

DOM document object model 文档对象模型

 

DOM用于操作标记性文档，如最常见的HTML，XML

 

三要素

文档：标记型文档，通过标签完成定义

对象：将属性和行为封装到对象中，封装为对象document

模型：标签、属性 、标签中封装的内容（文本，图片，链接等）

 

通过这个对象，就可以完成对文档节点的操作（增加、删除、修改、查找）

 

正是基于DOM的功能，就可以完成页面的动态效果（动态增加一行，删除多行等）

 

将HTML解析为一棵DOM树，将其中的标签，属性，内容都封装为节点对象

通过操作节点，完成对文档的控制！

 

DOM的弊端：需要将整个标记型文档加载到内存，才可以操作；

 

另一中解析--->SAX解析

基于事件驱动的方式对节点进行解析，遇到开始标签，触发一个事件，遇到该标签的结束标签，事件结束，用于查找速度很快。由于一直往前解析，不回头，所以，不能对节点进行增删改。

 

 

==================================================================================

 

DOM三级模型

DOM level 1: 将HTML封装为对象（通过javascript进行操作）；

DOM level 2: 在level1基础上，增加功能。如，解析名称空间；

DOM level 3: 将XML封装为对象；

 

 

==================================================================================

 

DHTML

 

不是一门语言（XHTML是一门语言），是一系列技术的综合体现的简称！

HTML+CSS  静态网页

HTML+CSS+JAVASCRIPT+DOM  4种技术的结合，实现了动态网页效果

 

HTML：使用标签封装数据；

CSS：对内容进行样式定制；

DOM：将文档和标签封装为对象，并提供操作标签的方法；

JS：提供编程环境，负责行为定义；

 

DHTML + XMLHttpRequest = AJAX

 

 

 

==================================================================================

 

BOM: Browser Object Model 浏览器对象模型

 

常用对象

window  

浏览器窗口一旦打开，内存就存在的对象（窗体存在，window对象即存在）

 

window.navigator 

封装了浏览器的相关信息，window对象可以省略不写

window.navigator.appName  浏览器名称

window.navigator.appVersion  浏览器版本

 

window.history

用于已浏览的URL信息

window.history.back()  从历史列表中装入前一个URL

window.history.forward()  从历史列表中装入下一个URL

window.history.go(n)  从历史列表中装入某个URL，n表示序号

 

window.location

代表当前浏览器的地址栏对象

该对象既可以获取，又可以设置其中的属性值

window.location.href = "http://www.abc.com";

 

window.event

代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态等

 

window.clipboardData

 提供对预定义剪切板格式的访问，以便在编辑操作中使用

 

 

==================================================================================

 

window对象常用的方法

 

window.alert();//弹出框

 

window.confirm();//弹出确认/取消框

 

var timeId = window.setTimeout("fn()",1000);//1秒后执行

window.clearTimeout(timeId);//清除

 

var timeId=window.setInterval("fn()",1000);//每隔1秒执行一次

window.clearInterval(timeId);//清除

 

window.moveBy(x_offset,y_offset);//按偏移量移动窗口

window.moveTo(x,y);//移动到指定的坐标

快速变换窗口的坐标，可以实现窗口震动效果

 

window.open("../demo.html","_blank","heigth=400,width=400,status=no,toolbar=no,

                                                                  menubar=no,location=no");

//打开新窗口，指定窗口的大小等属性，并装入给定的URL

 

window.close();//关闭当前窗口

 

window.onload = function() {...}

窗体加载完毕自动执行指定的函数

 

window.unonload = function{...}

关闭窗体时执行指定的函数

 

window.focus();

让窗体获取焦点，即窗体前置

 

 

 打开窗口的3种方法：

window.location.href  = url;

window.open();

<a href="url">xxx</a>

 

==================================================================================

 

document文档对象，操作文档中的节点

创建

createElement  

为指定标签创建一个元素实例

 

createTextNode 

从指定值中创建文本字符串

 

获取

getElementById 

通过标签的id属性值获取该节点的引用（id不能重复，结果只有1个）

document.getElementById("myBar");

 

getElementsByName 

通过标签的name属性值获取这些节点的引用（name可以重复，结果为1个数组）

具有name属性的标签：表单标签、超链接设置锚点

document.getElementsByName("favor");

 

getElementsByTagName

通过标签名获取这些节点的引用

document.getElementsByTagName("input");

 

nodeName   获取节点的名称

nodeType    获取节点的类型

nodeValue   获取节点的值

 

节点的3种类型

1.标签型节点   nodeType：1 ；nodeValue为null

2.属性节点      nodeType：2 ；nodeValue为属性的值

3.文本节点      nodeType：3 ；nodeValue为文本值

 

获取DIV节点的文本 var text = divNode.innerHTML;

获取input节点的文本  var myId = document.getElementById("myId").value;

 

设置/修改

设置DIV节点的文本

divNode.innerHTML = "new content";

设置标签到节点中  

oDivNode2.innerHTML = "<input type='text' name='xxx' value='BBBBBBBBBB'/>";