JavaScript中操作BOM对象重点总结

BOM：浏览器对象模型（Browser Object Model）：

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

BOM可实现功能：

1. 弹出新的浏览器窗口
2. 移动、关闭浏览器窗口以及调整窗口的大小
3. 页面的前进、后退

 

window对象：

1. 常用属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

语法：

window.属性名= "属性值"

示例：

window.location="http://www.baidu.com" ;     【表示跳转到百度首页】

2. 常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

①confirm( )：将弹出一个确认对话框

confirm("对话框中显示的纯文本")

示例：

confirm( )与alert ( )、 prompt( )区别：

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

②open( )：打开弹出网页

window.open("弹出窗口的url","窗口名称","窗口特征”)

窗口特征：

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes  | no  | 1  | 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes  | no  | 1  | 0	是否显示滚动条。黙认是yes
location=yes  | no  | 1  | 0	是否显示地址地段。黙认是yes
status=yes  | no  | 1  | 0	是否添加状态栏。黙认是yes
menubar=yes  | no  | 1  | 0	是否显示菜单栏。黙认是yes
resizable=yes  | no  | 1  | 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes  | no  | 1  | 0	是否显示标题栏。黙认是yes
fullscreen=yes  | no  | 1  | 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

③close( )：网页的关闭

window. close( );

 

history对象：

常用方法：

名称	说明
back( )	加载 history 对象列表中的前一个URL
forward( )	加载 history 对象列表中的下一个URL
go( )	加载 history 对象列表中的某个具体URL

方法中的等价关系：

location对象：

常用属性：

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法：

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location和history对象的应用：

主页面使用href实现跳转和刷新本页

示例：

查看鲜花详情 

刷新本页

返回主页面

 

Document对象：

常用属性：

名称	说      明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

语法：

document.referrer

document.URL

Document对象应用：

 

判断页面是否是链接进入

自动跳转到登录页面

var preUrl=document.referrer;  //载入本页面文档的地址

if(preUrl==""){

     document.write("

您不是从领奖页面进入，5秒后将自动 跳转到登录页面

");

      setTimeout("javascript:location.href='login.html'",5000); 【通过周期函数跳转】  }

Document对象的常用方法：

名称	说      明
getElementById()	返回对拥有指定id的第一个对象的引用【对象的id唯一】
getElementsByName()	返回带有指定名称的对象的集合【相同name属性】
getElementsByTagName()	返回带有指定标签名的对象的集合【相同的元素】
write()	向文档写文本、HTML表达式或JavaScript代码

Document对象访问页面元素：

动态改变层、标签中的内容：

document.getElementById("book").innerHTML="现象级全球畅销书";

访问相同name的元素：

var aInput=document.getElementsByName("season");

var sStr="";

for(var i=0;i

   sStr+=aInput[i].value+"  ";  }

document.getElementById("replace").innerHTML=sStr;

访问相同标签的元素：

var aInput=document.getElementsByTagName("input");

var sStr="";

for(var i=0;i

   sStr+=aInput[i].value+"  ";  }

document.getElementById("replace").innerHTML=sStr;

JavaScript内置对象：

1. Array：用于在单独的变量名中存储一系列的值

2. String：用于支持对字符串的处理

3. Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

常用方法：

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

示例：随机选择颜色

function selColor(){

        var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");

        var num=Math.ceil(Math.random()*7)-1;

        document.getElementById("color").innerHTML=color[num];  }

4. Date：用于操作日期和时间：

var 日期对象=new Date(参数)

参数格式：MM  DD,YYYY,hh:mm:ss

例如：

Var today=new Date( );   //返回当前日期和时间

var tdate=new Date("september 1,2013,14:58:12");

Date对象的方法：

方法	说 明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

制作时钟特效：

使用Date对象的方法显示当前时间的小时、分钟和秒

示例：

function disptime(){

var today = new Date(); 

var hh = today.getHours();

var mm = today.getMinutes();

var ss = today.getSeconds();

//获得小时、分钟、秒数

document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;  }

disptime();

定时函数：

①setTimeout( )

语法：setTimeout("调用的函数",等待的毫秒数)

示例：

最终代码：

②setInterval( )

语法：setInterval("调用的函数",间隔的毫秒数)

示例：

 

清除函数：

①clearTimeout( )

语法：clearTimeout(setTimeOut()返回的ID值)

示例：

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

clearTimeout(myTime)；

②clearInterval ()

语法：clearInterval(setInterval()返回的ID值)

示例：

var myTime＝setInterval("disptime() ", 1000 );

clearInterval(myTime)；

总结：