JavaScript操作BOM对象

原创 2018年04月16日 13:47:33

 

浏览器对象模型(BOM)是JavaScript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的内容元素阻止包装起来。BOM是一个分层结构。

 

 

BOM可实现功能

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口的大小

页面的前进、后退

 

属性名称

      

history 

有关客户访问过的URL的信息

location

有关当前 URL 的信息

 

JavaScript中,属性的语法

 

语法:

window.属性名="属性值";

例如:

window.location="http://www.baidu.com";

表示跳转到百度

 

常用的方法

方法名称

      

prompt( )

显示可提示用户输入的对话框

alert( )

显示带有一个提示信息和一个确定按钮的警示框 

confirm( )

显示一个带有提示信息、确定和取消按钮的对话框 

close( )

关闭浏览器窗口

open( )

打开一个新的浏览器窗口,加载给定 URL 所指定的文档

setTimeout( )

在指定的毫秒数后调用函数或计算表达式

setInterval( )

按照指定的周期(以毫秒计)来调用函数或表达式

 

在JavaScript中,方法的使用格式:

语法:

window.方法名();

window对象是全局对象,所以在使用window对象的属性和方法时,window可以省略。

 

1confirm()

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

语法:

window.confirm(“对话框中现实的纯文本”);

例如:

window.confirm(“确认要删除此条信息吗?”);

confirm()弹出的确认对话框中,有一条提示信息,一个“确定”按钮和一个“取消”按钮。如果用户单击“确定”按钮,则confirm()返回true;如果单击“取消”按钮,则confirm()返回false

在用户点击“确定”按钮或“取消”按钮将对话框关闭之前,它将阻止用户对浏览器的所有操作。

示例:

<script type="text/javascript">
   var flag=confirm("确认要删除此条信息吗?");
    if(flag==true)
      alert("删除成功!");
      else
       alert("你取消了删除");
</script>


confirm()alert ()prompt()区别

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

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

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

 

2close()

close()方法用于关闭浏览器窗口

语法:

window.close();

3open

在页面上弹出一个新的浏览器窗口

语法:

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

 

窗口的特征属性

属性名称

      

heightwidth

窗口文档显示区的高度、宽度。以像素计

lefttop

窗口的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。处于全屏模式的窗口必须同时处于剧院模式

  

history对象

 

history对象提供用户最近浏览过的URL列表。但出于隐私方面的原因,history对象不再允许脚本访问已经访问过的实际URL,可以使用history对象提供的,逐个返回访问过的页面的方法

 

history对象的方法

名称

      

back()

加载 history 对象列表中的前一个URL

forward()

加载 history 对象列表中的下一个URL 

go()

加载 history 对象列表中的某个具体URL

 

history.go(1)相当于浏览器中的“前进”按钮,等价于history.forward()

history.go(-1)相当于浏览器中的“后退”按钮,等价于history.back()

 

 

location对象

 

location对象的属性

 

名称

      

host

设置或返回主机名和当前URL的端口号

hostname

设置或返回当前URL的主机名

href

设置或返回完整的URL

 

 

location对象的方法

名称

      

reload()

重新加载当前文档

replace()

用新的文档替换当前文档

 

location对象常用的属性是href,通过对此属性设置不同的地址,从而达到跳转功能。

 

 

document对象

 

document对象既是window对象的一部分,又代表了整个html文档,可用来访问页面中的所有元素

 

document对象的常用属性

名称

      

referrer

返回载入当前文档的URL

URL

返回当前文档的URL

 

 

referrer的语法:

document.referrer

当前文档如果不是通过超链接访问的,则document.referrer的值问null

url的语法:

document.url

上网浏览某个页面时,由于不是由指定的页面进入的,因此系统将会提醒不能浏览本页面或者直接跳转到其他页面。

例如:

var preUrl=document.referrer;  //载入本页面文档的地址
if(preUrl==""){
      document.write("<h2>您不是从领奖页面进入,5秒后将自动跳转到登录页面</h2>");
      setTimeout("javascript:location.href='login.html'",5000);
}


document对象的常用方法

名称

      

getElementById()

返回对拥有指定id的第一个对象的引用

getElementsByName()

返回带有指定名称的对象的集合

getElementsByTagName()

返回带有指定标签名的对象的集合

write()

向文档写文本、HTML表达式或JavaScript代码

 

例如:

getElementById(): //获取页面中指定id的对象! 一个对象

getElementsByName("sex"): //获取页面中所有name属性值为sex的对象 ! 数组

getElementsByTagName("div"):// 获取页面中所有标签为div的对象 ! 数组

 

 

JavaScript内置对象

 

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

String:用于支持对字符串的处理

Math:用于执行常用的数学任务,它包含了若干个数字常量和函数

Date:用于操作日期和时间

 

Date对象

 

语法:

var 日期实例=new Date(参数);

日期实例是存储对象的变量,可以省略参数,如果没有参数,则表示当前日期和时间。

 

例如:

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

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

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


Date对象的常用方法

方法

  

getDate()

返回 Date 对象的一个月中的每一天,其值介于131之间

getDay()

返回 Date 对象的星期中的每一天,其值介于06之间

getHours()

返回 Date 对象的小时数,其值介于023之间

getMinutes()

返回 Date 对象的分钟数,其值介于059之间

getSeconds()

返回 Date 对象的秒数,其值介于059之间

getMonth()

返回 Date 对象的月份,其值介于011之间

getFullYear()

返回 Date 对象的年份,其值为4位数

getTime()

返回自某一时刻(197011日)以来的毫秒数

 

 

例如:

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

<body>
<div id="myclock"></div>
<script type="text/javascript">
    function disptime(){
        var today = new Date();  	//获得当前时间
        var hh = today.getHours();	//获得小时
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
    }
    disptime();
</script>
</body>

 

Math对象

它是JavaScript的一个全局对象,不需要创建,直接作为对象使用就可以调用其属性和方法

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

 

random()方法返回的随机数包括0,不包含1,且都是小数

例如:

实现返回的整数范围为2~99

var iNum=Math.floor(Math.random()*98+2);

定时函数

 

1setTimeOut()

setTimeOut()用于在指定的毫秒后调用函数或计算表达式

语法:

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

 

例如:

var  myTime=setTimeout("disptime() ", 1000 );//1秒(1000毫秒)之后执行函数disptime()一次


2setInterval()

setInterval()可按照指定的周期(以毫秒计)来调用函数或计算表达式

语法:

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

例如:

var  myTime=setInterval("disptime() ", 1000 );//每隔1秒(1000毫秒)执行函数disptime()一次 

注:setTimeOut()只执行一次函数,如果要多次调用函数,则需要使用setInterval()或者让被调用的函数再次调用setTimeOut()

 

3clearTimeout()clearInterval ()

clearTimeout()函数用来清除setTimeOut()函数设置的定时器

语法:

clearTimeout(setTimeOut()返回的ID)

例如:

var  myTime=setTimeout("disptime() ", 1000 );
clearTimeout(myTime);

 

 

clearInterval ()函数用来清除setInterval()设置的定时器

语法:

clearInterval(setInterval()返回的ID)

例如:

var  myTime=setInterval("disptime() ", 1000 );
clearInterval(myTime);

 

 

 

 

【BOM操作】JavaScript中的event对象之总结

Event属性和方法:  1. type:事件的类型,如onlick中的click;  2. srcElement/target:事件源,就是发生事件的元素;  3. button:...
  • itpinpai
  • itpinpai
  • 2015-08-08 12:32:48
  • 1176

javaScript中的对象、BOM、DOM知识点总结

一、  什么是javaScript对象?         对象是javaScript中最重要的API。         javaScript包含多种对象有:内置对象、外部对象(window对象、dom...
  • hhhhhggggddd
  • hhhhhggggddd
  • 2017-04-13 10:04:51
  • 524

实用JS系列——BOM常用对象

最近在着手项目的时候,意识到自己JS的欠缺。虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子。所以JavaScript的基础还需要再打扎实,也就有了这一系列博客。这一系列...
  • u010066934
  • u010066934
  • 2015-01-15 19:34:57
  • 4383

第二章 Javascript操作BOM对象

1、window对象浏览器对象模型是Javascript的组成之一。提供了独立于内容与浏览器进行交互的对象。2、BOM通常实现的功能弹出新的浏览器窗口移动、关闭浏览器以及调整窗口的大小在浏览器窗口中实...
  • liaohuanmei
  • liaohuanmei
  • 2018-04-16 20:46:42
  • 15

Javascript之BOM与DOM讲解

一.Javascript组成JavaScript的实现包括以下3个部分:ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 (DOM)处理网页内容的方法和接口浏览器对象模型(BOM)...
  • qq877507054
  • qq877507054
  • 2016-05-13 15:36:09
  • 12520

Javascript之BOM对象

个人理解是,我们知道浏览器显示内容的主要对象是DOM。浏览器除了有显示的内容,还有一个重要的部分就是一个载体,它承载我们看到的内容。好比是一个框架。这个载体对象我们把它叫做BOM。所以,DOM 是属于...
  • wangyongxia921
  • wangyongxia921
  • 2014-03-03 20:57:33
  • 6579

JavaScript之DOM对象与BOM对象的关系

BOM对象 JavaScript向程序员提供了一种操作Web浏览器的手段,例如,Javascript语言可以用来调整Web浏览器窗口的高度,宽度和屏显位置等属性。(引用自JavaScript+DOM编...
  • fengbird
  • fengbird
  • 2017-03-29 17:04:31
  • 1424

【JavaScript】BOM总结

BOM(browser object model)浏览器对象模型的缩写。 ·        BOM提供了独立于内容而与浏览器窗口进行交互的对象 ·        由于BOM主要用于管理窗口与窗口之...
  • u012331102
  • u012331102
  • 2015-08-14 18:04:20
  • 502

Javascript——BOM(操作指南)

/** * 知识点: 1 掌握window对象 * 2 掌握location对象 * 3 掌握history对象 */ // BOM 也叫浏览器...
  • Lixuanshengchao
  • Lixuanshengchao
  • 2016-08-07 20:33:59
  • 1680

JS中BOM相关知识点总结

js中BOM相关知识小结
  • liujie19901217
  • liujie19901217
  • 2016-04-01 21:57:53
  • 2597
收藏助手
不良信息举报
您举报文章:JavaScript操作BOM对象
举报原因:
原因补充:

(最多只允许输入30个字)