您的位置：首页 > 其它

文档对象模型（DOM）

2007-09-04 09:11 274 查看

文档对象模型（DOM）

文档对象模型（DOM）是用于表示HTML元素以及Web浏览器信息的一个模型，它使脚本程序能够访问网页上的信息。文档对象模型（DOM）的每个对象都有属性、方法和事件，脚本程序通过设置对象的属性，调用对象的方法，响应特定的事件，从而动态地显示网页内容并与用户进行交互。
对于不同的脚本语言，通常都有一个对象模型，例如，JavaScript就有它的对象模型。不过，VBScript却没有其对象模型，它使用的是微软为IE创建的对象模型。使用为浏览器创建对象模型的方式使得对象模型与语言无关，从而可以获得更强的可扩展性。
JavaScript对象模型与IE对象模型非常相似，下面我们介绍IE对象模型的层次结构，如图 3.8所示。

图 3.8 IE对象模型的层次结构
对象模型中最顶层的对象是window对象，它表示浏览器的窗口，所有其他对象都可以作为Window对象的属性。
Window对象的最重要的属性（属性也是对象）是document对象，前面已经多次使用过该对象，document对象表示窗口中显示的HTML文档，其本身又有自己的属性，比如，表示网页中表单的form对象，表示网页中超级链接的links对象等。
另外，Window对象的其它常用属性还有：表示浏览器历史记录的history对象；表示浏览器本身的navigator对象；表示当前网页URL的location对象等。
下面我们将通过示例来说明window对象常用方法的使用，脚本语言采用JavaScript。Window对象的常用方法有：
n alert( )
n confirm( )
n prompt( )
n open( )
n close( )
n navigate( )

(1) Alert( )
前面已经多次使用过该方法，它用来显示一个警告信息框，只有一个【确定】按钮。

(2) Confirm( )
Confirm方法类似于Alert方法，它也显示一个信息框，但是这个信息框有两个按钮，分别是【确定】和【取消】按钮。

(3) Prompt( )
当需要提示用户输入数据时，使用Prompt方法显示一个对话框，让用户输入信息。该方法有两个参数，一个是提示信息，一个可选的默认响应。

ex3_4_03.htm：Alert，Confirm和Prompt方法的使用
<html>
<head>
<script language="javascript">

</script>
</head>
<body>
<form name="form1">
<input name="del" type="button" id="del" value="删除(confirm)" onClick="delCheck()">
<input name="enterData" type="button" id="enterData" value="输入数据(prompt)" onClick="dataCheck()">
</form>
</body>
</html>

当在浏览器中浏览此文件，单击【删除(confirm)】按钮，将产生一个信息框，让用户确认是否执行删除操作，如果单击【确定】按钮，则显示一个“已经删除”的信息框，如图 3.9所示。

图 3.9 Alert，Confirm和Prompt方法的使用
当单击图 3.9中的【输入数据(prompt)】按钮，将显示一个对话框，如图 3.10所示，提示用户输入数据。如果用户输入数据后，单击【确定】按钮，则把输入值赋给变量temp；如果用户没有输入数据后，单击【确定】按钮，则把默认值“10”赋给变量temp；如果用户单击【取消】按钮，则不返回任何信息。

图 3.10 提示用户输入数据
(4) Open( )
用Open方法可以打开一个新窗口，并在此窗口中显示一个文档。open方法的参数较多，但通常是可选的。

(5) Close( )
用Close方法可以关闭一个打开的窗口。

(6) Navigate( )
Navigate方法用来在当前窗口显示新文档。

ex3_4_04.htm：Open和Navigate方法的使用
<html>
<head>
<script language="javascript">

</script>
</head>
<body>
<form name="form1">
<input name="newWin" type="button" id="newWin" value="在新窗口中打开(open)" onClick="openNew()">
<input name="currentWin" type="button" id="currentWin" value="在当前窗口中打开(navigate)" onClick="redirect()">
</form>
</body>
</html>

page1.htm：Close方法的使用
<html>
<head>
<title>新文档</title>
</head>
<body>
it is a new page.
<form name="form1">
<input name="newWin" type="button" id="newWin" value="关闭此窗口(close)" onClick="window.close()">
</form>
</body>
</html>

在浏览中浏览ex3_4_04.htm，如图 3.11所示，如果单击【在新窗口中打开(open)】，将会在新窗口中显示page1.htm文档，单击【关闭此窗口(close)】，则将此新窗口关闭；如果单击【在当前窗口中打开(navigate)】，则在当前窗口中显示page1.htm文档。

图 3.11 Open和Navigate方法的使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航