DOM

DOM DHTML=HTML+DOM+CSS

浏览器提供的对象，如window和screen等；网页的各个部分都可以当做对象看待；

使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。编程人员利用这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。在JavaScript中提供了非常丰富的内部方法和属性,从而减轻了编程人员的工作,提高编程效率。

浏览器对象(Navigator)

窗口对象(Window)

文档对象(Document)

位置对象(Location)

历史对象(History)

在这些对象系统中,文档对象非常重要,它位于最低层,但对于我们实现Web页面信息交互起作关键作用。因而它是对象系统的核心部分。

JavaScript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入(set---()的方法)可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法（document.writer())来实现。

窗体对象

1 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

2 窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式： document.mytest.submit()

3 窗体对象中的属性主要包括以下：elements name action target encoding method. 　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例： elements[0].Mytable.elements[1]

4 在JavaScript中访问窗体对象可由两种方法实现：

（１）通过访问窗体：在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable.length。

（２）通过数组来访问窗体：

除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问： document.forms[0] document.forms[1] document.forms[2]...

5 在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

如何访问框架

在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问: parent.frames[Index1].docuement.forms[index2]

通过parent.frames.length确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访： parent.framesName.decument.formNames.elementName.(m/p)

文档对象模型

动态HTML的实现，需要一种有效显示和控制文档内容的方式，这就是文档对象模型（DOM，Document Object Model)。文档对象模型是组织网页文档各元素的结构，是查看文档中各元素的一种有效方式。

DOM创建了一种按顺序、按层次方式访问文档各元素的结构化方式。它提供了一种访问文档元素及内容的方法。在DOM中，每一个文档元素都成为相应的可操作对象。使用像JS这样的脚本语言，通过对象或其属性，或对象的相关对象，我产可以访问文档中的每一个元素。这种访问不仅可以读出，而且包括写入，可以读元素的属性，也可以更改元素的属性。

不同的浏览器提供的文档对象模型是不同的。

DOM中，对元素的访问总是由高层对象开始向低层定位，各层之间通过圆点符号“.”连接。如，要访问links对象。

window.document.links

DOM中，对象属性和方法的引用同JS内置对象属性和方法的引用格式是相同的，也是采用圆点符号".":

对象名.属性名

对象名.方法（[参数]…）

对象的子对象被看做是父对象的一个属性，父级和子级对象之间同样用"."符号来连接：

父对象.子对象.子对象…[属性]

文档中的所有元素对应的对象均为document对象的子对象。访问的方法有两种

1 对过对象名及对象中出现的顺序索引值来进行访问：（在DOM中，顺序索引值从0开始，0对应第一个）

document.images[0] //对应于在网页中第1个出现的image对象；

document.images[2] //对应于在网页中第2个出现的image对象；

document.images[3] //对应于在网页中第3个出现的image对象；

2 在DHTML元素标记中指定name属性，该属性便为该对象指定了名称，通过该名称来访问该对象；

document.img_1.src="images/image_2";

DOM中定义了许多事件，对应于在客户端发生的各种事件，包括用户的鼠标操作和键盘操作；每一类对象都定义有自己的属性和方法；

document对象提供的一些方法：

1 getElementById(elementId)方法：通过元素的id属性访问元素；

2 getElementByName(elementName)方法：通过元素的name属性访问元素；

3 getElementsByTagName(tag_Name)方法：通过元素的name属性访问元素；

通过tag_Name(标记名称)来获得元素，返回页面中所有tag_Name标签组成的数组。数组中每一个元素都对应一个tag_Name,可以通过数组元素直接访问tag_Name元素；

divs=document.getElementsByTagName("div")

得到数组divs[],由页面中定义的所有div元素组成，通过divs[0].id可以访问第一个div元素的id属性；

文档的write方法

用于显示输出信息；

DOM中，每一个标记就是一个对象，通过JS语言，控制这些标记；

当用户在网页中的对象（标记）上进行某些特定操作时，将会引发对应的事件；

事件响应机制的建立方式是将事件响应函数名称设置给事件属性，语法如下：

<标记名称事件属性="响应函数">…</标记名称>

而响应的函数则撰写在<script>标记中

使用[]运算符可以存取数组元素，方括号左边是对数组的引用，方括号内是非负整数值的任意表达式，利用这一语法我们可以读一个数组元素，也可以写一个数组元素；

操作对象属性

1 搜集一个对象当前设置的信息：例如文本对象，可以使用value属性来获取当前文本框里的任何字符串信息；get

2 改变一个当前对象的当前设置，如，可以使用窗口对象的status属性设置在浏览器的状态栏显示信息；set

3 改变一个对象的外观：，如，对于document对象，可以使用bgcolor属性来改变它的页面背景颜色；

引用属性：object:property;

一个对象如果是另一个对象的子对象，前者就会自动成为后者的属性；

在JS中，很多对象包含数组，它用来存储同一文档中同一对象的不同实例，数组名与对象同名，且后面加一个复数s

frames[],form[],anchors[],links[],images[],applets[],embeds[],elements[],options[];

在windows对象中，用frames[]数组引用代表原始窗口的框架的window对象，例如：frame[1]，document引用的是当前窗口的第二个子框架的document对象；

每一个document对象都有一个form[]数组，它包含的是代表该文档中出现的所有html表单的form对象，要引用这个表单，可以编写如下代码：window.document.form[0]；

同时每个form对象都有一个element数组，该数组包含了出现在表单中的各种HTML表单元素（如输入域、按钮等，）的对象，在某些情况下，可以编写引用表单对象的代码：

parent.frames[0].document.forms[1].elements[2].options[3].text;

操作对象的方法：

在JS中的对象中都至少有一个方法，对过这些中以完成特定的操作；

1 模拟用户的行为，如：form对象的submit()方法向服务器提供一个表单；

2 进行计算，如：Math对象的sqrt()方法就是计算一个数的平方根；

3 处理一个对象，如string对象的to Lowercase()方法，把所有的字符串字母变成小写字母；

事件处理

对象的事件，简单地说就是对象所发生的行为，history.back()方法仅仅是下载页面这个过程的开始（可以理解为方法是事件的一个触发的方式，当事件发生，去调用函数定义的代码），真正的下载过程是这个事件（执行定义的函数）；

一般事件以两种方式发生：

1 借助方法：按编程顺序发生，如history.back();onclick=gotooo(5);

2 借助用户的干预来发生，如用户单击浏览器上的返回按钮；

创建事件处理程序：

事件本身不是很重要，重要的是如何编写响应事件的处理过程，即一段代码；

建立事件处理程序的步骤：

1 把事件处理程序设置为一个属性值赋予给一个具体事件，然后插入到对象的HTML标签里；<h3 onclick="go_to(2);">Reading</h3>

2 设置事件处理程序的或函数；

<!--

function go_to(ao){

var h=document.getElementById("tab").getElementsByTagName("h3");

var d=document.getElementById("tab").getElementsByTagName("div");

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

if(ao-1==i){

h[i].className+=" up";

d[i].className+=" block"; }

else {

h[i].className=" ";

d[i].className=" ";

} } }

任何对象的事件处理程序实际上就是该对象的属性，当在一个html标签里面创建一个事件处理程序时，实际也就间接改变了该对象的事件处理程序属性。因此，我们可以直接使用以下语法格式为一个对象建立事件处理程序：

objectname oneventname=event_handler

如果事件处理程序接受参数，就必须在该对象的html标签里使用事件处理程序属性；

DOM表示一种应用程序接口（API），这种接口能够为HTML文档以及其内部各种元素提供被操作的可能，通过DOM技术用户可以直接用JS脚本来访问网页文档上每个独立的部分；

document，代表一个加载到浏览器中的HTML网页，当一个HTML网页被加载到浏览器中，浏览器会首先解析该网页文档，它会将网页解析为文档对象模型DOM,对于HTML网页，DOM是HTML文档在内在中的表现形式，它是一个应用程序接口，定义了该文档的逻辑结构，以及一套访问和处理文档的方法，客户端浏览器是一个处理HTML文档的应用程序，它必须将HTML文档解析DOM才能以编程方式读取、操作和显示文档；

DOM文档中的逻辑结构可以以节点树的形式进行表述，通过对HTML文件的解析处理，HTML文档中的元素便转化为DOM文档中的节点

任何格式良好的HTML文件中的每一个元素均有DOM文档中的一个节点类型与之对应；

这些属性不但可以读取，也可以用来赋值以改变文档的显示；

DOM:Document Object Model文档对象模型

文档对象模型（DOM），描述处理网页内容的方法和接口。
DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法，并将对应的文档呈现为带有元素、属性和文本的树结构（节点树），

1）DOM树定义了HTML/XML文档的逻辑结构，给出了一种应用程序访问和处理XML文档的方法。

2）在DOM树中，有一个根节点，所有其他的节点都是根节点的后代。

3) 在应用过程中，基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树，应用程序通过对DOM树的操作，来实现对HTML/XML文档数据的操作。DOM树中的一个个对象被称为节点。
JS中对于不同的运行环境，有着不同的内置宿主对象，这是由于JS是被作为一种扩展语言而设计的。对于通用程序设计语言，开发者必自己开发运行时的上下文环境。正因如此，那些语言才有了通用设计语言的名称。另一方面，扩展语言是在内建对象的应用程序（宿主环境）中运行程序的。宿主应用程序会在这时收到一些运行时的上下文信息。JS会以全局对象作为根节点的对象树的形式，接收这些上下文信息。在启动时，JS从宿主环境获取的对象树就被称为宿主对象。从JS代码的角度来看，全局对象在程序启动前就已经存在了，客户端JS的全局对象被称为Window对象。
JS借助DOM对HTML进行操作

1 节点的选择

2 节点的创建和新增

3 节点的内容更改

4 节点的删除
JS动态变更样式

1 通过className属性更改class名；

2 通过classList属性更改class名；

3 更改style属性；(还可以通过setInterval(匿名函数）实现动态效果；）

4 直接更改样式表；
<div id="foo" style="position:absolute">This is a sample.</div>

<script>

var elem=document.getElementById('foo');

var frame=0;

setInterval(function(){

frame+=1;

elem.style.left=frame*10+'px';},100);

</script>

			window 当前窗口
			↓
self、window、parent、top 窗口对象	navigator 浏览器	frame[] 框架	document 文档	history 历史记录	location 地址	screen 屏幕	popupAlert 消息框	timing 计时	cookies 浏览器缓存
			↓
	links[] 链接	anchors[] 锚	form[] 表单	images[] 图像
			↓
		select	input	textarea
			↓
	password	file	text	hidden	button	submit	reset	image	radio	checkbox
[]内可以wget名称或索引；