JavaScript Dom 学习笔记-优快云博客

本文详细介绍了DOM对象的层次关系，并重点解析了Window对象的功能和用法，包括其属性、事件及与其他对象如frames的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]1.Dom对象的层次关系图[/b]

window
| -- location
| -- frames
| -- history
| -- navigator
| -- event
| -- screen
| -- document
| -- links | -- location
| -- images
| -- anchors
| -- filters
| -- forms
| -- applets
| -- embeds
| -- plugins
| -- frames
| -- scripts
| -- all
| -- selection
| -- styleSheets
| -- body

例子：禁止右键弹出事件
function hideContextMenu(){
return window.event.returnValue=false;
}

<body onLoad="hideContextMenu()">
or
<body onLoad="return false">

效果一样

[b]============= 2_1.window 对象 ============= [/b]window.alert("hello world");
-------------
window.confirm("hello world");
对话框
例子:
if(window.confirm("hello")==true){
alert("yes");
}else{
alert("no");
}
-------------
window.prompt()
可输入值的对话框
例子:
alert(window.prompt("年龄","18"));
-------------
window.navigate()
导航到某url
-------------
window.setInterval()
每隔多久执行一次此方法，执行多次
-------------
window.setTimeout("window.close()",5000) 5秒后关闭
过多久后执行此方法，执行一次
-------------
window.clearInterval()
取消setInterval
-------------
window.clearTimeout()
取消setTimeout
-------------
window.MoveTo()
window.resizeTo()
-------------
window.open() 对应的关闭 window.close()
打开一个新窗口
-------------
window.showModalDialog()
打开模态对话框

[b]============= 2_2.window 对象 frames数组对象 =============[/b]
[b]parent的使用[/b]主html


<html>
<frameset rows="20%,80%">
  <frame name="top" src="top.html" />
  <frame name="bottom" src="bottom.html" />
</frameset>
</html>

top.html


<input type="button" value="刷新" onClick="window.parent.frame[1].location.reload()" />
或者
<input type="button" value="刷新" onClick="parent.frame[1].location.reload()" />
或者
<input type="button" value="刷新" onClick="parent.frame[‘bottom’].location.reload()" />
或者
<input type="button" value="刷新" onClick="window.parent.item(1).location.reload()" />
或者
<input type="button" value="刷新" onClick="window.parent.item('bottom').location.reload()" />
或者
<input type="button" value="刷新" onClick="window.parent.bottom.location.reload()" />

[b]top的使用[/b]
top.html


 <frameset rows="20%,*" >
   <frame name="a" />
   <frame name="x" src="bottom" />
 </frameset>

bottom.html


 <frameset cols="300%,*" >
   <frame name="b" />
   <frame name="c" src="bottom_right" />
 </frameset>

buttom_right.html


 <script>
   top.a.document.write("i love this game");
 </script>
或者
<script>
   parent.parent.document.write("i love this game");
 </script>

[b]============= 2_2.window 对象 event对象 =============[/b]
属性：
altKey return boolean
ctrlKey
shiftKey
clientX 返回窗口客户区坐标（不包括边框和滚动条）
clientY
screenX 鼠标相对窗口坐标
scrrenY
offsetX 鼠标相对事件源坐标
offsetY
x 鼠标相对事件源父元素顶点坐标
y
returnValue 设置false，相当于取消操作
cancelBubble 示例讲解：张孝祥JavaScript dom 20：00
srcElement 返回当前事件源对象
keyCode 返回键盘unicode码值
button

[b]============= 2_3.window 对象 .事件 =============[/b]
[b]专用事件：[/b]
onload() 网页加载事件
onunload() 关闭网页后事件
onbeforeunload() 关闭网页前事件

浏览器是边加载文本内容边执行函数，最后才加载事件:请看以下例子：


 <sript>
   alert("ok1");
   <body  onload="alert('byebye')">
     hello
   </body>
   alert("ok2");
   alert("ok3");
 </script>

执行的顺序是  ：  ok1  hello  ok2  ok3  byebye

[b]通用事件：[/b]
onclick()
onmousemove()
onmouseover()
onmouseout()
onmousedown()
onmouseup()
onkeydown()
onkeyup()
onkeypress() 按下并弹起后事件

[b]============= 2_3.window 对象 .属性 =============[/b]