JavaScriptDOM.docx

JavaScriptDOM.docx

《JavaScriptDOM.docx》由会员分享，可在线阅读，更多相关《JavaScriptDOM.docx（20页珍藏版）》请在冰豆网上搜索。

JavaScriptDOM

DOM文档对象模型DocumentObjectModel

JavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示

如：

window、document、body、forms

这些对象与对象的层次关系称为DOM

DHTML（DynamicHTML动态HTML）

HTML+JavaScript+CSS+DOM的结合使用称之为DHTML

BOM浏览器对象模型

浏览器对象

window对象

表示浏览器窗口对其属性和方法的引用可以省略window.

window对象方法

alert（）方法

显示包含由应用程序自定义消息的对话框

confirm（）方法返回truefalse

显示一个确认对话框，

prompt（）方法

显示一个提示对话框其中带有一条消息和一个输入框

确定返回文本框的值取消返回null

close（）方法关闭指定的窗口

open（）方法打开一个WEB浏览器窗口

window.location.href="URL"当前窗口打开新窗口覆盖当前窗口

window.open（”打开窗口的url”，”窗口名”，”窗口特征”）

window.open（"about:

blank"）;//open（）最简单使用

window.open（"url","windowName","width=100height=100status=yesmenubar=no

toolbar=noresizable=nolocation=yesscrollbars=yes"）;

height：

窗口高度；

width：

窗口宽度；

top：

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

left：

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

toolbar：

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

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

resizable：

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

location：

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

status：

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

定时器

轮询

Window.setTimeout（函数名，指定时间毫秒数）

延时执行某个函数执行一次

clearTimeout（定时器对象名称）取消执行定时器

setInterval（函数名称，时间毫秒数）

定时执行指定的函数间隔为多少毫秒数

clearInterval（定时器对象名称）取消定时器

定时器示例:

//setTimeout（函数名，指定时间毫秒数）延时执行某个函数执行一次

//clearTimeout（定时器对象名称）

varstart;

functionshowName（）{

document.all["myname"].style.display="block";

start=setTimeout（"hideName（）",300）;

}

functionhideName（）{

document.all["myname"].style.display="none";

start=setTimeout（"showName（）",300）;

}

functionstopTime（）{

if（start!

=null）{

clearTimeout（start）;

start=null;

document.all.btn.value="开始闪烁"

}

else

{

start=setTimeout（"showName（）",300）;

document.all.btn.value="停止闪烁"

}

}

Hello

none">肖总

//setInterval（函数名称，时间毫秒数）定时执行指定的函数间隔为多少毫秒数

//clearInterval（定时器名称）取消定时器

varnum=0;

varmyTimer;

functionshow（）{

document.all.myNum.innerHTML=num++;

}

functiontestTimer（）{

if（myTimer!

=null）{

clearInterval（myTimer）;

num=0;

myTimer=null;

document.all.btn.value="开始计时";

}else{

myTimer=setInterval（show,100）;

document.all.btn.value="停止计时";

}

}

计时：

0

其他例子见：

js_时间显示器.htmljs_跑马灯.htmljs_文字滚动.html

网页对话框

模式对话框和无模式对话框

window.showModalDialog（"URL",传递变量名，"窗口特征"）

建议传递window对象

window.showModelessDialog（"URL",传递变量名，"窗口特征"）

子窗口访问父窗口数据使用dialogArguments对象

返回到父窗口的值使用returnValue

window对象的子对象属性：

parent对象

代表对象层次中的父窗口

parent对象仅仅是对子窗口有意义

self对象代表对当前窗口或框架的引用

top对象代表最顶层的窗口

opener对象

代表创建当前窗口的源窗口

用于确定open方法打开窗口的源窗口

location对象代表特定窗口的URL信息

location.replace（url）刷新不后退

location.href="url"加载可后退

window.location.reload（）;

history对象用于存储客户端最近访问过的网址清单

onClick="javascript:

top.mymain.history.forward（）;">=history.go

（1）

onClick="javascript:

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的事件

alert（"开始加载网页....\n---请注意网页的加载顺序---"）;

--window的专有事件:

onload在浏览器完成对象的装载后触发事件

onunload在对象卸载前立即触发事件

onbeforeunload在页面将要被卸载前触发事件

window对象的事件处理通过body标签的事件属性来设置的

-->

onbeforeunload="window.event.returnValue='******你确定关闭本窗口******'"

onunload="alert（'拜拜'）">

注意网页的加载顺序哦!

!

!

alert（"加载写在最下面的JavaScript脚本"）;

document对象代表给浏览器窗口中的HTML文档

document的属性:

functionchange（）{

document.bgColor="green";

document.fgColor="red";//文本前景色

document.vlinkColor="0x00ff00";//已访问过的链接文本颜色

document.linkColor="gray";//链接文本颜色

}

functionshowURL（）{

alert（document.URL）;//当前文档Unicode编码的URL地址

}

普通文本

链接

document的方法

document.write（）

document.writeln（）

document.close（）

开始的内容

document.write（"这是document对象写入的内容
"）;

varstr="world";

document.write（"哈楼",str,"javascript","
"）;

document.writeln（mystr="Hello","World","
"）;

document.writeln（mystr）

vara="帅哥";

document.write（newStr=（a=="美女"）?

"东方不败":

"西门吹雪"）;

document.write（"
"）;

functionchangeDoc（）{

document.writeln（"以下是更新后的文档内容
"）;

document.writeln（''）;

document.writeln（'functionchangeDoc（）'）;

document.writeln（'{'）;

document.writeln（'document.writeln（"hello"）;'）;

document.writeln（'document.writeln（"world"）;'）;

document.writeln（'}'）;

document.writeln（''）;//注意这里写法

document.writeln（''）;

document.close（）;//关闭文档输出

}

document集合属性:

document.forms//返回文档中的表单数组

document.anchors//获取所有带有name和/或id属性的a对象的集合数组

document.images//返回文档中的image的数组

document.links//获取文档中所有指定了HREF属性的a对象和所有area对象的集合数组

document.all返回对象所包含的元素集合的引用

window.status="清华IT";//设置状态栏文本

document.title="演示";

functionshow（）{

alert（"文档标题：

"+document.title）;

alert（"所有指定了href属性的对象集合数组长度:

"+document.links.length）;

alert（"所有带有name或id属性的a对象的集合数组长度：

"+document.anchors.length）;

alert（document.links[1].href）;

alert（document.all["an1"].name）

alert（document.forms["frm1"].method）;

}

document集合属性演示

TOjs_right.html

链接到js_left.html

链接到js_right.html

frames框架对象不能同时设定body

parent.frames返回父窗口的框架数组：

alert（top.frames.length）;

alert（parent.frames[0].name）

alert（parent.frames["myleft"].name）

body对象及通用属性

body对象方法:

functioncreateA（）{

varmyA=document.createElement（"a"）;//创建一个html元素

myA.href="js_跑马灯.html";

myA.innerText="链接到js_跑马灯.html";

document.body.appendChild（myA）;//body对象添加子节点

}

这是一个javascript动态创建的超链接

通用属性:

—通用属性：

innerText起始和结束标签内的文本

innerHTML起始和结束标签内的HTML

outerText起始和结束标签内的文本（包含标签本身）

outerHTML起始和结束标签内的HTML（包含标签本身）

-->

innerText'"

onmouseout="this.innerHTML='innerHTML'">

innerText与innerHTML的区别

outerHTML

onmouseout="p2.outerText='outerText

测试outerText与outerHTML区别

注意当鼠标再次移动到div上时报错原因：

p2不存在原来的p2已经被替换成文本