第04章 文档对象模型DOM教学板书.docx
《第04章 文档对象模型DOM教学板书.docx》由会员分享，可在线阅读，更多相关《第04章 文档对象模型DOM教学板书.docx（31页珍藏版）》请在冰豆网上搜索。
第04章文档对象模型DOM教学板书
第4章文档对象模型（DOM）
本章介绍了文档对象模型（DOM）的基本概念以及DOM树的结构，并在此基础上讲解了DOM中元素的移动以及其他操作。
●DOM的概念
●DOM树的结构
●DOM中元素的操作
4.1DOM基础
通过JavaScript，我们可以重构整个HTML文档，可以添加、移除、改变或重排页面上的项目。
要改变页面的某个部分，JavaScript就需要对HTML文档中所有元素设置进行访问的接口。
通过这个接口，可以提供对HTML元素进行添加、移动、改变或移除的方法和属性，这些都由文档对象模型（DOM）来实现。
4.1.1DOM简介
DOM的全称是DocumentObjectModel，即文档对象模型。
在浏览器中，基于DOM的HTML分析器将一个页面转换成一个对象模型的集合（通常称DOM树），浏览器正是通过对这个对象模型的操作，来实现对HTML页面的显示。
通过DOM接口，JavaScript可以在任何时候访问HTML文档中的任何一部分数据，因此，利用DOM接口可以无限制的操作HTML页面。
DOM接口提供了一种通过分层对象模型来访问HTML页面的方式，这些分层对象模型依据HTML的文档结构形成了一棵节点树。
也就是说，DOM强制使用树模型来访问HTML页面中的元素。
由于HTML本质上就是一种分层结构，所以这种描述方法是相当有效的。
对于HTML页面开发来说，DOM就是一个对象化的HTML数据接口，一个与语言无关、与平台无关的标准接口规范。
它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。
利用DOM，程序开发人员可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等等。
可以这样说，HTML文档代表的是页面，而DOM则代表了如何去操作页面。
无论是在浏览器里还是在浏览器外，无论是在服务器上还是在客户端，只要有用到HTML的地方，就会碰到对DOM的应用。
DOM规范与Web世界的其他标准一样受到W3C组织的管理，在其控制下为不同平台和语言使用DOM提供一致的API，W3C把DOM定义为一套抽象的类而非正式实现DOM。
目前，DOM由三部分组成，包括：
核心（core）、HTML和XML（可扩展标记语言）。
核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。
HTML接口和XML接口两部分则是专为操作具体的HTML文档和XML文档所提供的高级接口，使对这两类文件的操作更加方便。
4.1.2DOM树的结构
前面我们讲过，DOM为我们提供的访问文档信息的媒介是一种分层对象模型，而这个层次的结构，则是一棵根据文档生成的节点树。
在对文档进行分析之后，不管这个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树。
在这棵节点树中，有一个根节点即Document节点，所有其他的节点都是根节点的后代节点。
节点树生成之后，就可以通过DOM接口访问、修改、添加、删除、创建树中的节点和内容。
DOM把文档表示为节点（Node）对象树。
“树”这种结构在数据结构中被定义为一套互相联系的对象的集合，或者称为节点的集合，其中一个节点作为树结构的根（root）。
节点被冠以相应的名称以对应它们在树里相对其他节点的位置。
例如，某一节点的父节点就是树层次内比它高一级别的节点（更靠近根节点），而其子节点则比它低一级别；兄弟节点显然就是树结构中与它同级的节点了，不在它的左边就在它的右边。
DOM的逻辑结构可以用节点树的形式进行表述。
浏览器通过对HTML页面的解析处理，HTML文档中的元素便转化为DOM中的节点对象。
DOM中的节点有Document、Element、Comment、Type等不同类型，其中每一个DOM树必须有一个Document节点，并且为节点树的根节点。
它可以有子节点如Text节点、Comment节点等。
具体来讲，DOM节点树中的节点有元素节点、文本节点和属性节点等三种不同的类型，下面具体介绍。
1．元素节点（elementnode）
在HTML文档中，各HTML元素如
、
、
所有的列表项元素
都包含在无序清单元素内部。其中节点树中元素是节点树的根节点。
2．文本节点（textnode）
在节点树中，元素节点构成树的枝条，而文本则构成树的叶子。
如果一份文档完全由空白元素构成，它将只有一个框架，本身并不包含什么内容。
没有内容的文档是没有价值的，而绝大多数内容由文本提供。
在下面语句中：
WelcometoDOMWorld!
包含“Welcometo”、“DOM”、“World!
”三个文本节点。
在HTML中，文本节点总是包含在元素节点的内部，但并非所有的元素节点都包含或直接包含文本节点，如“购物清单”中，
这里class="Sample"、id="purchases"都属于属性节点。
因为所有的属性都是放在元素标签里，所以属性节点总是包含在元素节点中。
注意：
并非所有的元素都包含属性，但所有的属性都被包含在元素里。
任何的格式良好的HTML页面中的每一个元素均有DOM中的一个节点类型与之对应。
利用DOM接口获取HTML页面对应的DOM后，就可以自由的操作HTML页面了。
下面以例4-1来说明一下DOM树的结构。
【例4-1】文档结构树。
文档标题我的链接
我的标题
用DOM树结构来表示上面这段代码，如图4-1所示：
图4-1DOM树结构
上面所有的节点彼此间都存在关系。
除文档节点之外的每个节点都有父节点。
比方说，head和body的父节点是html节点，文本节点“我的标题”的父节点是p节点。
大部分元素节点都有子节点。
比方说，head节点有一个子节点：
title节点；title节点也有一个子节点：
文本节点“文档标题”。
当节点分享同一个父节点时，它们就是同辈（同级节点）。
比方说，h1和a是同辈，因为它们的父节点均是body节点。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。
比方说，所有的文本节点都是html节点的后代，而第一个文本节点是head节点的后代。
节点也可以拥有先辈。
先辈是某个节点的父节点，或者父节点的父节点，以此类推。
比方说，所有的文本节点都可把html节点作为先辈节点。
4.1.3document对象
每个载入浏览器的HTML页面都会成为document对象（即该HTML页面对应的DOM）。
document对象使我们可以通过JavaScript对HTML页面中的所有元素进行访问。
document对象是window对象的一部分，可通过window.document属性对其进行访问。
document对象代表一个浏览器窗口或框架中显示的HTML文件。
浏览器在加载HTML文档时，为每一个HTML文档创建相应的document对象。
document对象是window对象的一个属性，引用它时，可以省略window前缀。
document拥有大量的属性和方法，结合了大量子对象，如图像对象、超链接对象、表单对象等。
这些子对象可以控制HTML文档中的对应元素，使我们可以通过JavaScript对HTML页面中的所有元素进行访问。
通过document对象可以使用页面中的任何元素，也可以添加新元素、删除存在的元素。
下面来看看document的属性，见表4-1。
表4-1document对象的属性
属性名
作用
document.title
设置文档标题等价于HTML的
标签</p><p>document.bgColor</p><p>设置页面背景色</p><p>document.fgColor</p><p>设置前景色（文本颜色）</p><p>document.linkColor</p><p>未点击过的链接颜色</p><p>document.alinkColor</p><p>激活链接（焦点在此链接上）的颜色</p><p>document.vlinkColor</p><p>已点击过的链接颜色</p><p>document.URL</p><p>设置URL属性从而在同一窗口打开另一网页</p><p>document.fileCreatedDate</p><p>文件建立日期，只读属性</p><p>document.fileModifiedDate</p><p>文件修改日期，只读属性</p><p>document.fileSize</p><p>文件大小，只读属性</p><p>document.cookie</p><p>设置和读出cookie</p><p>document.charset</p><p>设置字符集简体中文:</p><p>gb2312</p><p>在处理文档的时候，有几个函数和属性可以用来获取元素信息，最常用的函数如下：</p><p>document.write（）：</p><p>动态向页面写入内容；</p><p>document.createElement（Tag）：</p><p>创建一个html标签对象；</p><p>document.getElementById（ID）：</p><p>获得指定ID值的对象；</p><p>document.getElementsByName（Name）：</p><p>获得指定Name值的对象集合。</p><p>childNodes是元素节点对象的一个属性，可以获取元素节点的所有直接子节点。</p><p>下面我们看一个例子。</p><p>【例4-2】childNodes属性的使用。</p><p><html></p><p><head></p><p><title>4-2
functiongetElements（）{
varmainContent=document.getElementById（"main"）;
mainContent.style.backgroundColor='#FF0000';
varparagraphs=document.getElementsByTagName（"p"）;
for（i=0;iparagraphs[i].style.fontSize='2em';
}
varelements=document.getElementsByTagName（"body"）[0].childNodes;
for（i=0;iif（elements[i].nodeType==1&&elements[i].id）
alert（elements[i].id）;
}
}
Welcometomywebsite
Wesellallthewidgetsyouneed.
Copyright2006ExampleCorp,Inc.
升级会员 