js操作BOM对象

原创 2018年04月16日 23:19:01
浏览器对象模型(BOM)是JavaScript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。

BOM通常可实现如下功能:
1.弹出新的浏览器窗口。
2.移动、关闭浏览器窗口及调整窗口的大小。
3.在浏览器窗口中实现页面的前进、后退功能。

windows对象常用的属性

名称

说明   
history有关客户访问过的URL信息
location有关当前URL的信息
screen

只读属性,包含有关客户端显示屏幕的信息

语法
    window.属性名="属性值"

window.location="www.baidu.com"


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

语法
    window.方法名();

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

语法
    window.confirm();
var flag = confirm("确定要删除此条信息吗?");  
    if (flag == true) {  
        alert("删除成功!")  
    } else {  
        alert("取消删除!")  
    }  

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

语法
    window.close();


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

history对象与location对象
history对象提供用户最近浏览过的URL列表
名称描述
back()加载history对象列表中的前一个URL
forward()加载history对象列表中的后一个URL
go()
加载history对象列表中的某个具体URL

实例

<a href="javascript:history.back()" onclick="backyet().back()">后退</a> 



location对象提供当前页面的URL信息 重新装载当前页面或装入新页面

location对象的属性

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

设置或返回完整的URL

location对象的方法
名称说明
reload()重新加载当前文档
replace()

用新的文档替换当前文档

<a href="javascript:location.href=a.html'">a</a>  

document对象
document对象的常用属性

属性描述
referrer返回载入当前文档的URL
URL

返回当前文档的URL

语法
document.referrer
document.URL

document对象的常用方法

方法描述
getElementById()返回对拥有指定id的第一个对象的引用
getElementsByName()返回带有指定名称的对象集合
getElementByTagName()返回带有指定标签名的对象的集合
write()

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

document.getElementById("totalPrice").innerHTML="$" +sum;

JavaScript内置对象

Date:用于操作日期和时间    

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

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

Math:使我们有能力执行常用的数学任务,它包含了若干个数学常量和函数

1.date对象
var 日期实例=new Date(参数);

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对象的年份,其值为四位数
getTime()

返回自某一时刻(1970年1月1日)以来的毫秒数

<script>
    function show() {
        var today= new Date();
        var hh=today.getHours();
        var mm=today.getMinutes();
        var ss=today.getSeconds();

        document.getElementById("a").innerHTML=hh+":"+mm+":"+ss;
    }
    var mytime=setInterval("show()",1000)
</script>
<p id="a"></p>
<input type="button" value="date" onclick="show()">


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

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

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

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

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

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

JS中BOM对象复习

BOM:浏览器对象模型-----  Browser Object Model   主要提供访问和操作浏览器各组件的方式 浏览器各组件:window(浏览器窗口)、location(地址栏)、hist...
  • weixin_36927395
  • weixin_36927395
  • 2017-01-17 16:39:17
  • 186

JS中BOM相关知识点总结

js中BOM相关知识小结
  • liujie19901217
  • liujie19901217
  • 2016-04-01 21:57:53
  • 2602

Javascript之BOM与DOM讲解

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

js浏览器-BOM的内置对像操作 页面的全屏 后退

点击我可以穿件一个新的页面 点击我可以关闭本页面 点击我跳转到百度 ...
  • gyq04551
  • gyq04551
  • 2016-11-20 17:15:32
  • 702

【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
  • 1684

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

BOM对象 JavaScript向程序员提供了一种操作Web浏览器的手段,例如,Javascript语言可以用来调整Web浏览器窗口的高度,宽度和屏显位置等属性。(引用自JavaScript+DOM编...
  • fengbird
  • fengbird
  • 2017-03-29 17:04:31
  • 1428
收藏助手
不良信息举报
您举报文章:js操作BOM对象
举报原因:
原因补充:

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