JS DOM编程 window对象

最新推荐文章于 2024-03-04 20:45:38 发布

可口可乐的围脖

最新推荐文章于 2024-03-04 20:45:38 发布

阅读量726

点赞数

分类专栏： JavaScript 文章标签： dom window

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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" οnclick="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=" 用户注册 " οnclick="openwindow( )">
<INPUT type="button" name="exitButton" value=" 退出 " οnclick="closewindow( )">

或者

结果：

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>