JavaScriptDOM文档格式.docx
《JavaScriptDOM文档格式.docx》由会员分享，可在线阅读，更多相关《JavaScriptDOM文档格式.docx（20页珍藏版）》请在冰豆网上搜索。
resizable：
是否允许改变窗口大小，yes或1为允许
location：
是否显示地址栏，yes或1为允许
status：
是否显示状态栏内的信息，yes或1为允许
定时器
轮询
Window.setTimeout（函数名，指定时间毫秒数）
延时执行某个函数执行一次
clearTimeout（定时器对象名称）取消执行定时器
setInterval（函数名称，时间毫秒数）
定时执行指定的函数间隔为多少毫秒数
clearInterval（定时器对象名称）取消定时器
定时器示例:
<
scripttype="
text/javascript"
>
//setTimeout（函数名，指定时间毫秒数）延时执行某个函数执行一次
//clearTimeout（定时器对象名称）
varstart;
functionshowName（）{
document.all["
myname"
].style.display="
block"
;
start=setTimeout（"
hideName（）"
300）;
}
functionhideName（）{
none"
showName（）"
functionstopTime（）{
if（start!
=null）{
clearTimeout（start）;
start=null;
document.all.btn.value="
开始闪烁"
}
else
{
start=setTimeout（"
300）;
停止闪烁"
/script>
/head>
bodyonLoad="
showName（）;
"
<
inputtype="
button"
onClick="
stopTime（）;
id="
btn"
value="
/>
h2>
Hello<
fontid="
color="
red"
style="
display:
肖总<
/font>
/h2>
/body>
//setInterval（函数名称，时间毫秒数）定时执行指定的函数间隔为多少毫秒数
//clearInterval（定时器名称）取消定时器
varnum=0;
varmyTimer;
functionshow（）{
document.all.myNum.innerHTML=num++;
functiontestTimer（）{
if（myTimer!
=null）{
clearInterval（myTimer）;
num=0;
myTimer=null;
开始计时"
}else{
myTimer=setInterval（show,100）;
停止计时"
body>
计时：
myNum"
face="
宋体"
>
0<
name="
onclick="
testTimer（）;
/html>
其他例子见：
js_时间显示器.htmljs_跑马灯.htmljs_文字滚动.html
网页对话框
模式对话框和无模式对话框
window.showModalDialog（"
传递变量名，"
窗口特征"
）
建议传递window对象
window.showModelessDialog（"
）
子窗口访问父窗口数据使用dialogArguments对象
返回到父窗口的值使用returnValue
window对象的子对象属性：
parent对象
代表对象层次中的父窗口
parent对象仅仅是对子窗口有意义
self对象代表对当前窗口或框架的引用
top对象代表最顶层的窗口
opener对象
代表创建当前窗口的源窗口
用于确定open方法打开窗口的源窗口
location对象代表特定窗口的URL信息
location.replace（url）刷新不后退
location.href="
加载可后退
window.location.reload（）;
history对象用于存储客户端最近访问过的网址清单
javascript:
top.mymain.history.forward（）;
=history.go
（1）
top.mymain.history.back
（1）;
=history.go（-1）
history.go（）刷新表单不提交
history.forward（）指向浏览器历史列表中的下一个URL，
相当于点击浏览器的“前进”按钮
history.back（）指向浏览器历史列表中的上一个URL，
相当于点击浏览器的“后退”按钮
window.screen代表浏览器屏幕
设置浏览器屏幕
varh=screen.Height;
//屏幕高度
varw=screen.Width;
//屏幕宽度
window对象属性：
window.status代表浏览器状态栏
设置状态栏标题
window.status="
清华IT"
window.closed窗口是否关闭
window的事件
html>
head>
<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=UTF-8"
title>
window对象的专有事件演示<
/title>
scriptlanguage="
javascript"
type="
alert（"
开始加载网页....\n---请注意网页的加载顺序---"
!
--window的专有事件:
onload在浏览器完成对象的装载后触发事件
onunload在对象卸载前立即触发事件
onbeforeunload在页面将要被卸载前触发事件
window对象的事件处理通过body标签的事件属性来设置的
-->
bodyonload="
alert（'
html文档加载完毕'
）"
onbeforeunload="
window.event.returnValue='
******你确定关闭本窗口******'
onunload="
拜拜'
注意网页的加载顺序哦!
加载写在最下面的JavaScript脚本"
document对象代表给浏览器窗口中的HTML文档
document的属性:
language="
JavaScript"
functionchange（）{
document.bgColor="
green"
document.fgColor="
//文本前景色
document.vlinkColor="
0x00ff00"
//已访问过的链接文本颜色
document.linkColor="
gray"
//链接文本颜色
}
functionshowURL（）{
alert（document.URL）;
//当前文档Unicode编码的URL地址
}
change（）;
普通文本<
ahref="
#"
showURL（）;
链接<
/a>
document的方法
document.write（）
document.writeln（）
document.close（）
开始的内容<
document.write（"
这是document对象写入的内容<
br>
varstr="
world"
哈楼"
str,"
javascript"
"
document.writeln（mystr="
Hello"
World"
document.writeln（mystr）
vara="
帅哥"
document.write（newStr=（a=="
美女"
）?
"
东方不败"
:
西门吹雪"
document.write（"
functionchangeDoc（）{
document.writeln（"
以下是更新后的文档内容<
document.writeln（'
'
functionchangeDoc（）'
{'
document.writeln（"
hello"
world"
}'
/scr'
+'
ipt>
//注意这里写法
测试document对象"
changeDoc（）;
document.close（）;
//关闭文档输出
}
document集合属性:
document.forms//返回文档中的表单数组
document.anchors//获取所有带有name和/或id属性的a对象的集合数组
document.images//返回文档中的image的数组
document.links//获取文档中所有指定了HREF属性的a对象和所有area对象的集合数组
document.all返回对象所包含的元素集合的引用
window.status="
//设置状态栏文本
document.title="
演示"
alert（"
文档标题：
+document.title）;
所有指定了href属性的对象集合数组长度:
+document.links.length）;
所有带有name或id属性的a对象的集合数组长度：
+document.anchors.length）;
alert（document.links[1].href）;
alert（document.all["
an1"
].name）
alert（document.forms["
frm1"
].method）;
buttonname="
show（）;
document集合属性演示
/button>
br/>
aname="
a"
TOjs_right.html<
an2"
b"
href="
js_left.html"
链接到js_left.html<
js_right.html"
链接到js_right.html<
formname="
method="
get"
/form>
frm2"
post"
frm3"
frames框架对象不能同时设定body
parent.frames返回父窗口的框架数组：
alert（top.frames.length）;
alert（parent.frames[0].name）
alert（parent.frames["
myleft"
body对象及通用属性
body对象方法:
functioncreateA（）{
varmyA=document.createElement（"
//创建一个html元素
myA.href="
js_跑马灯.html"
myA.innerText="
链接到js_跑马灯.html"
document.body.appendChild（myA）;
//body对象添加子节点
createA（）;
这是一个javascript动态创建的超链接<
通用属性:
body对象属性演示<
style>
body{font-size:
20px;
}
/style>
—通用属性：
innerText起始和结束标签内的文本
innerHTML起始和结束标签内的HTML
outerText起始和结束标签内的文本（包含标签本身）
outerHTML起始和结束标签内的HTML（包含标签本身）
-->
pid="
p1"
onmouseover="
this.innerText='
I>
innerText<
/I>
onmouseout="
this.innerHTML='
innerHTML<
innerText与innerHTML的区别
/p>
divonmouseover="
p2.outerHTML='
pid=p2>
outerHTML<
onmouseout="
p2.outerText='
outerText<
测试outerText与outerHTML区别<
注意当鼠标再次移动到div上时报错原因：
p2不存在原来的p2已经被替换成文本
/div>
p2"
outerText与outerHTML区别
pid=p3>
哈楼！
！
innerText"
alert（p3.innerText）"
innerHTML"
alert（p3.innerHTML）"
outerText"
alert（p3.outerText）"
outerHTML"
alert（p3.outerHTML）"
divid="
float_icon"
position:
absolute;
left=0;
top=0;
imgsrc="
cat.gif"
border=1>
script>
/*
offsetTop表示对象距顶部高度
offsetLeft表示对象距左边宽度
offsetWidth表示对象宽度
offsetHeight表示对象高度
clientWidth表示对象不包含滚动条或边框、边距的宽度
clientHeight表示对象不包含滚动条或边框、边距的高度
clientTop表示对象不包含滚动条或边框、边距的距父容器顶部高度
clientWidth表示对象不包含滚动条或边框、边距的距父容器左边宽度
*/
vardirX=1,dirY=1;
varxPos=0,yPos=0;
window.setInterval（moveIcon,10）;
functionmoveIcon（）{
xPos+=2*dirX;
yPos+=2*dirY;
float_icon.style.top=yPos;
//topdiv距顶部高度
float_icon.style.left=xPos;
//leftdiv距左边宽度
if（xPos<
=0||xPos+float_icon.offsetWidth>
=document.body.clientWidth）{
dirX=-dirX;
if（yPos<
=0||yPos+float_icon.offsetHeight>
=document.body.clientHeight）{
dirY=-dirY;
Style对象:
functionshowItem（）{
//获取id为sp的span标记下的img标记数组
varimgs=document.getElementById（"
sp"
）.getElementsByTagName（"
img"
varcp=document.getElementById（"
cp"
varcanExpand=true;
if（imgs[0].src.indexOf（"
minus.gif"
）!
=-1）{
canExpand=false;
imgs[0].src="
images/plus.gif"
}else{
images/minus.gif"
if（canExpand）{
cp.style.display="
//显示
//隐藏
spanid="
cursor:
hand;
showItem（）"
升级会员 