第04章 文档对象模型DOM教学板书文档格式.docx
《第04章 文档对象模型DOM教学板书文档格式.docx》由会员分享，可在线阅读，更多相关《第04章 文档对象模型DOM教学板书文档格式.docx（31页珍藏版）》请在冰豆网上搜索。
浏览器通过对HTML页面的解析处理，HTML文档中的元素便转化为DOM中的节点对象。
DOM中的节点有Document、Element、Comment、Type等不同类型，其中每一个DOM树必须有一个Document节点，并且为节点树的根节点。
它可以有子节点如Text节点、Comment节点等。
具体来讲，DOM节点树中的节点有元素节点、文本节点和属性节点等三种不同的类型，下面具体介绍。
1．元素节点（elementnode）
在HTML文档中，各HTML元素如<
body>
、<
p>
ul>
等构成文档结构模型的一个元素对象。
在节点树中，每个元素对象又构成了一个节点。
元素可以包含其它的元素，例如在下面的“购物清单”代码中：
<
ulid="
purchases"
>
<
li>
Beans<
/li>
Cheese<
Milk<
/ul>
所有的列表项元素<
都包含在无序清单元素<
内部。
其中节点树中<
html>
元素是节点树的根节点。
2．文本节点（textnode）
在节点树中，元素节点构成树的枝条，而文本则构成树的叶子。
如果一份文档完全由空白元素构成，它将只有一个框架，本身并不包含什么内容。
没有内容的文档是没有价值的，而绝大多数内容由文本提供。
在下面语句中：
Welcometo<
em>
DOM<
/em>
World!
/p>
包含“Welcometo”、“DOM”、“World!
”三个文本节点。
在HTML中，文本节点总是包含在元素节点的内部，但并非所有的元素节点都包含或直接包含文本节点，如“购物清单”中，<
元素节点并不包含任何文本节点，而是包含着另外的元素节点，后者包含着文本节点，所以说，有的元素节点只是间接包含文本节点。
3．属性节点（attributenode）
HTML文档中的元素或多或少都有一些属性，便于准确、具体地描述相应的元素，便于进行进一步的操作，例如：
h1class="
Sample"
WelcometoDOMWorld！
/h1>
…<
这里class="
、id="
都属于属性节点。
因为所有的属性都是放在元素标签里，所以属性节点总是包含在元素节点中。
注意：
并非所有的元素都包含属性，但所有的属性都被包含在元素里。
任何的格式良好的HTML页面中的每一个元素均有DOM中的一个节点类型与之对应。
利用DOM接口获取HTML页面对应的DOM后，就可以自由的操作HTML页面了。
下面以例4-1来说明一下DOM树的结构。
【例4-1】文档结构树。
head>
title>
文档标题<
/title>
/head>
ahref="
"
我的链接<
/a>
h1>
我的标题<
/body>
/html>
用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的<
标签
document.bgColor
设置页面背景色
document.fgColor
设置前景色（文本颜色）
document.linkColor
未点击过的链接颜色
document.alinkColor
激活链接（焦点在此链接上）的颜色
document.vlinkColor
已点击过的链接颜色
document.URL
设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate
文件建立日期，只读属性
document.fileModifiedDate
文件修改日期，只读属性
document.fileSize
文件大小，只读属性
document.cookie
设置和读出cookie
document.charset
设置字符集简体中文:
gb2312
在处理文档的时候，有几个函数和属性可以用来获取元素信息，最常用的函数如下：
document.write（）：
动态向页面写入内容；
document.createElement（Tag）：
创建一个html标签对象；
document.getElementById（ID）：
获得指定ID值的对象；
document.getElementsByName（Name）：
获得指定Name值的对象集合。
childNodes是元素节点对象的一个属性，可以获取元素节点的所有直接子节点。
下面我们看一个例子。
【例4-2】childNodes属性的使用。
4-2<
scripttype="
text/javascript"
functiongetElements（）{
varmainContent=document.getElementById（"
main"
）;
mainContent.style.backgroundColor='
#FF0000'
;
varparagraphs=document.getElementsByTagName（"
p"
for（i=0;
i<
paragraphs.length;
i++）{
paragraphs[i].style.fontSize='
2em'
}
varelements=document.getElementsByTagName（"
body"
）[0].childNodes;
elements.length;
if（elements[i].nodeType==1&
&
elements[i].id）
alert（elements[i].id）;
/script>
divid="
pclass="
intro"
Welcometomywebsite<
Wesellallthewidgetsyouneed.<
/div>
footer"
Copyright2006ExampleCorp,Inc.
inputtype="
button"
onclick="
getElements（）"
value="
执行"
/>
在这个例子中，首先获取了ID为main的div元素节点，然后将背景色改成红色；
接着获取所有的p元素节点，通过遍历，把所有的字体都改成2em的；
最后遍历body的所有节点，通过对话框把每个元素节点的ID值依次显示出来。
document对象还有下面几个常用方法和属性：
open（）：
打开一个流，以收集来自任何document.write（）或document.writeln（）方法的输出；
close（）：
关闭用document.open（）方法打开的输出流，并显示选定的数据；
write（）：
向文档写HTML代码或JavaScript代码；
writeln（）：
等同于write（）方法，不同的是在每个表达式之后写一个换行符；
title：
该属性可以引用或设置页面中title标记内的内容。
其用法如下：
document.title="
newtitle"
//修改文档标题
document.open（）;
//开启文档
document.write（"
somewords"
//写入数据
document.writeln（"
document.close（）;
//关闭文档
【例4-3】document方法的使用。
4-3<
functionGreeting（）{
varnewWin=window.open（）;
//获得id为“name”的DOM元素
varname=document.getElementById（"
name"
with（newWin.document）{
//通常这里的open（）可以省略，在执行write前浏览器自动执行
//document.open（）的动作
open（）;
write（"
hello,"
+name.value+"
br/>
Nicetoseeyou!
somenotesforyou:
"
+
textarea>
hereissomemessage...<
/textarea>
+
buttononclick='
self.close（）'
Goodbye!
/button>
close（）;
输入你的姓名:
text"
id="
buttononclick="
Greeting（）"
Greeting<
上述页面中的按钮点击后将打开一个新的页面，并用document.write（）方法向新的页面中写入HTML代码。
4.1.4获取DOM中的元素
DOM中定义了多种获取元素节点的方法，如getElementById（）、getElementsByName（）和getElementsByTagName（）。
如果需要获取文档中的一个特定的元素节点，最有效的方法是getElementById（）。
1．document.getElementById（）
该方法通过元素节点的ID，可以准确获得需要的元素节点，是比较简单快捷的方法。
如果页面上含有多个相同id的元素节点，那么只返回第一个元素节点。
如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：
$（id），参数仍然是元素节点的id。
这个方法可以看作是document.getElementById（）的另外一种写法。
在后面的章节中将详细介绍这些JavaScript库。
需要操作HTML文档中的某个特定的元素时，最好给该元素添加一个id属性，为它指定一个（在文档中）唯一的名称，然后就可以用该id属性的值查找想要的元素节点。
【例4-4】getElementById（）方法的使用。
4-4<
functiongetValue（）{
varx=document.getElementById（"
myHeader"
）
alert（x.innerHTML）
h1id="
getValue（）"
这是标题<
点击标题，会提示出它的值。
在这个例子中，我们取得id属性的值为myHeader的元素，点击该元素可显示出它的值。
2．getElementsByName（）
document.getElementsByName（name）该方法与getElementById（）方法相似，但是它查询元素的name属性，而不是id属性。
因为一个文档中的name属性可能不唯一（如HTML表单中的单选按钮通常具有相同的name属性），所以getElementsByName（）方法返回的是元素节点的数组，而不是一个元素节点。
然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
【例4-5】getElementByName（）方法的使用。
<
4-5<
varx=document.getElementsByName（"
myInput"
alert（x.length）;
inputname="
type="
size="
20"
br/>
名为'
myInput'
的元素有多少个?
在这个例子中，我们获取了name为myInput的input元素节点数组，并将该数组的长度输出，输出的结果为3。
getElementById（）和getElementsByTagName（）这两种方法，可查找整个HTML文档中的任何HTML元素。
但这两种方法会忽略文档的结构，假如需要查找文档中所有的p元素，getElementsByTagName（）会把它们全部找到，不管p元素处于文档中的哪个层次。
同时，getElementById（）方法也会返回正确的元素节点，不论它被隐藏在文档结构中的什么位置。
例如：
document.getElementsByTagName（"
会返回文档中所有p元素的一个节点数组，而document.getElementById（'
maindiv'
）.getElementsByTagName（"
会返回所有p元素的一个节点列表，且这些p元素必须是id为maindiv的元素的后代。
（3）document.getElementsByTagName（）：
该方法是通过元素的标记名获取节点，同样该方法也是返回一个数组。
在获取元素节点之前，一般都是知道元素的类型的，所以使用该方法比较简单。
但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。
它不是document对象的专有方法，还可以应用到其它的节点对象。
其语法为：
标签名称"
或document.getElementById（'
ID'
获取节点数组时，通常要把此数组保存在一个变量中，就像这样：
varx=document.getElementsByTagName（"
变量x就是包含着页面中所有p元素节点的数组，可通过它们的索引号来访问这些p元素节点，索引号从0开始，可以使用数组的length属性来循环遍历节点列表。
for（vari=0;
i<
x.length;
i++）{
//这里可以操作相应的元素
}
要访问第三个p元素节点，可以这么写：
vary=x[2];
4.2在DOM元素间移动
获取一个元素节点以后，常常需要以该元素节点为基点上下左右地移动获取其它的元素节点，childNodes前面已经介绍过了，下面我们介绍其他的几种方式。
1．通过父节点获取
parentObj.firstChild：
如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。
这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式。
parentObj.lastChild：
这个属性是获取已知节点（parentObj）的最后一个子节点。
与firstChild一样，它也可以递归使用。
parentObj.childNodes：
获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
在IE上获取的是直接子节点的数组，而在Firefox上获取的是所有子节点即包括子节点的子节点。
parentObj.children：
获取已知节点的直接子节点数组。
在IE上，和childNodes效果一样，而Firefox不支持。
parentObj.getElementsByTagName（）：
它返回已知节点的所有子节点中类型为指定值的子节点数组。
不同的浏览器在处理DOM节点上是有差异的。
node"
Sometext.<
Somemoretext.<
在IE浏览器中搜索上面代码div的子节点应该为2个，但是在其他浏览器中，一共是5个节点（空格和回车换行也被看作节点）。
因此必须把所有的情况都考虑在内，检查节点的情况。
例如下面的代码：
varel=document.getElementById（'
node'
varfirstElement=el.childNodes[0];
if（firstElement.nodeType!
=1）
firstElement=
升级会员 