文档对象模型（DOM）

最新推荐文章于 2022-09-13 10:53:54 发布

citywalker007

最新推荐文章于 2022-09-13 10:53:54 发布

阅读量1.2k

点赞数

文章标签：文档 javascript button 浏览器 redirect function

本文链接：https://blog.csdn.net/mxq007/article/details/1771180

版权

文档对象模型（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>

<!--

function delCheck(){

var flag=window.confirm("确实要删除吗？");

if(flag==true) alert("已经删除！");

}

function dataCheck(){

var temp=window.prompt("你必须输入1~100之间的正整数","10");

if(temp!=null) alert("你输入的数据是"+temp);

}

//-->

</script>

</head>

<body>

</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>

<!--

function openNew(){

window.open("page1.htm");

}

function redirect(){

window.navigate("page1.htm");

}

//-->

</script>

</head>

<body>

</form>

</body>

</html>

page1.htm：Close方法的使用

<html>

<head>

</head>

<body>

it is a new page.

</form>

</body>

</html>

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

图 3.11 Open和Navigate方法的使用