第4章 文档对象模型（DOM） ·5·

个属性，引用它时，可以省略window前缀。document拥有大量的属性和方法，结合了大量子对象，如图像对象、超链接对象、表单对象等。这些子对象可以控制HTML文档中的对应元素，使我们可以通过JavaScript对 HTML 页面中的所有元素进行访问。

通过document对象可以使用页面中的任何元素，也可以添加新元素、删除存在的元素。 下面来看看document的属性，见表4-1。

表4-1 document对象的属性

属性名 document.title document.bgColor document.fgColor document.linkColor document.alinkColor document.vlinkColor document.URL document.fileCreatedDate document.fileModifiedDate document.fileSize document.cookie document.charset 作用 设置文档标题等价于HTML的

在这个例子中，首先获取了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=\修改文档标题 document.open(); //开启文档

第4章 文档对象模型（DOM） ·7·

document.write(\写入数据 document.writeln(\写入数据 document.close(); //关闭文档 【例4-3】document方法的使用。

输入你的姓名:

上述页面中的按钮点击后将打开一个新的页面，并用document.write()方法向新的页面中写入HTML代码。

4.1.4 获取DOM中的元素

DOM中定义了多种获取元素节点的方法，如getElementById()、getElementsByName() 和 getElementsByTagName()。如果需要获取文档中的一个特定的元素节点，最有效的方法是

·8· JavaScript语言与Ajax应用

getElementById()。

1．document.getElementById()

该方法通过元素节点的ID，可以准确获得需要的元素节点，是比较简单快捷的方法。如果页面上含有多个相同id的元素节点，那么只返回第一个元素节点。

如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是元素节点的id。这个方法可以看作是document.getElementById()的另外一种写法。在后面的章节中将详细介绍这些JavaScript库。

需要操作HTML文档中的某个特定的元素时，最好给该元素添加一个id属性，为它指定一个（在文档中）唯一的名称，然后就可以用该id 属性的值查找想要的元素节点。

【例4-4】getElementById() 方法的使用。

点击标题，会提示出它的值。

在这个例子中，我们取得id 属性的值为myHeader的元素，点击该元素可显示出它的值。

2．getElementsByName()

document.getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素节点的数组，而不是一个元素节点。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。

【例4-5】getElementByName() 方法的使用。

• 1
• 2
• 3
• 4
• 5
• >>
• 8

搜索更多关于： 第04章 文档对象模型(DOM)（教学板书） 的文档