您的位置：首页 > Web前端 > JavaScript

JS DOM编程 window对象

2014-10-07 13:19 531 查看

HTML文档对象模型（HTML DOM）定义了一套标准方法来访问和操作HTML文档。DOM(Document Object Model)由万维网（World Wide Web Consortium,W3C）定义，最新浏览器都支持第一级和第二级DOM，这样使用JavaScript就可以控制整个页面。

DOM提供了一组按树状形似结构组织的HTML文档，树状结构中每一个对象被称为一个节点，每个对象都有一个或多个属性和方法。

例：
<html>

<head>

<script type="text/javascript">

function changeLink()

{ document.getElementById('myAnchor').innerHTML="搜狐" ;

document.getElementById('myAnchor').href="http://www.sohu.com" ; }

</script>

</head>

<body>

<a id="myAnchor" href="http://www.taobao.com">淘宝</a>

<input type="button" onclick="changeLink()" value="使用DOM改变链接">

</body>

</html>

常用属性：

常用方法：

onLoad事件：在窗口或框架完成文档加载时触发

打开一注册窗口：

因为window是最顶层的根，所以可以省略

window.open("google.htm");

可简写为：

open("google.htm");

close( )方法也是如此。

如歌使用window对象：
open（”打开窗口的url”，”窗口名”，”窗口特征”）
窗口的特征如下，可以任意组合：

height：窗口高度；

width：窗口宽度；

top：窗口距离屏幕上方的象素值；

left：窗口距离屏幕左侧的象素值；

toolbar：是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable：是否允许改变窗口大小，yes或1为允许

location：是否显示地址栏，yes或1为允许

status：是否显示状态栏内的信息，yes或1为允许

我们需要预先制作好注册页面，假设为register.html，打开注册窗口的语句如下

open("register.html", "注册窗口", "toolbars=0, location=0,

statusbars=0,menubars=0,width=700,height=550,scrollbars=1");

<SCRIPT language="javascript">

function openwindow( ) {

window.status="系统当前状态：您正在注册用户......";

if (window.screen.width == 1024 && window.screen.height == 768)

    open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");

else

        window.alert("请设置分辨率为1024x768，然后再打开");   }

function closewindow( )

{

    if(window.confirm("您确认要退出系统吗？"))

        window.close( );

}

</SCRIPT>

<INPUT type="button" name="regButton" value=" 用户注册 " onclick="openwindow( )">

<INPUT type="button" name="exitButton" value=" 退出 " onclick="closewindow( )">
或者
<H3><A href="javascript: openwindow( ) ">用户注册 </A></H3>

<H3><A href="javascript: closewindow( ) ">退出</A></H3>
结果：

Date对象：
var mydate=new Date("July 29, 2007,10:30:00" )
如果没有参数，表示当前日期和时间

例如：
var today = new Date( )

使用setTimeout( )方法每隔1秒调用显示时间的方法

<SCRIPT language="JavaScript">

function disptime( ){

var time = new Date( ); //获得当前时间

var hour = time.getHours( ); //获得小时、分钟、秒

var minute = time.getMinutes( );

var second = time.getSeconds( );

document.myform.myclock.value =hour+":"+minute+":"+second+" " ;

var myTime = setTimeout("disptime()",1000);

}

</SCRIPT>

<BODY onLoad="disptime( )">

<FORM NAME="myform">

H2>当前时间：

<INPUT name="myclock" type="text" value="" size="10" >

</H2></FORM >

</BODY>

history对象：

location对象：

例：

<FORM name="form1" method="post" action="">

……

<TD width="4%"><A href="javascript: history.back( )">返回 </A></TD>

<TD width="4%"><A href="javascript: history.forward( )">前进</A></TD>

<TD width="4%"><A href="javascript: location.reload( )">刷新</A></TD>

<TD width="6%"><A href="../index.html">首页</A></TD>

跳转到其他版块

<SELECT name="selTopic" id="selPTopic" onChange="javascript: location=this.value">

     <OPTION value="news.html" selected="selected">新闻贴图</OPTION>

      <OPTION value="gard.html">网上谈兵</OPTION>

      <OPTION value="IT.html">IT茶馆</OPTION>

     <OPTION value="education.html" selected >教育大家谈</OPTION>

</SELECT>

</FORM>

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

标签： dom window

相关文章推荐

新的分享

章节导航