文档对象模型(DOM)

             文档对象模型(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对象;表示当前网页URLlocation对象等。

下面我们将通过示例来说明window对象常用方法的使用,脚本语言采用JavaScriptWindow对象的常用方法有:

n         alert( )

n         confirm( )

n         prompt( )

n         open( )

n         close( )

n         navigate( )

 

(1)      Alert( )

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

 

(2)      Confirm( )

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

 

(3)      Prompt( )

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

 

ex3_4_03.htmAlertConfirmPrompt方法的使用

<html>

<head>

<script language="javascript">

<!--

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 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  AlertConfirmPrompt方法的使用

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

3.10 提示用户输入数据

(4)      Open( )

Open方法可以打开一个新窗口,并在此窗口中显示一个文档。open方法的参数较多,但通常是可选的。

 

(5)      Close( )

Close方法可以关闭一个打开的窗口。

 

(6)      Navigate( )

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

 

ex3_4_04.htmOpenNavigate方法的使用

<html>

<head>

<script language="javascript">

<!--

function openNew(){

window.open("page1.htm");

}

function redirect(){

window.navigate("page1.htm");

}

//-->

</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.htmClose方法的使用

<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 OpenNavigate方法的使用

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值