JavaScript中BOM对象原理与用法分析


Posted in Javascript onJuly 09, 2019

本文实例讲述了JavaScript中BOM对象原理与用法。分享给大家供大家参考,具体如下:

  • 百度百科

BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

  • 我的理解

博主是这么理解的,BOM对象指的是window对象,而window对象并不是JavaScript内置的对象,而是浏览器生成的对象。如果需要了解内置对象的话,可以翻阅我的另一篇博文。

  • 图解BOM

BOM对象还分为以下这几个子对象,说实话,图有点丑,下面我将详细的介绍一下这几个子对象。

JavaScript中BOM对象原理与用法分析

  • window对象

常用操作

window.alert('hello');//弹出警告框
window.confirm(text);//弹出确认对话框,返回布尔值
window.prompt(text,defaultstr);//弹出输入框,并返回输入内容
window.close();//关闭当前页面
window.print();//打印操作

注意:在申明变量的时候,所有在最外层申明的变量(非函数中)都属于window对象的属性,比如。

<script>
var str = 'China';//最外层变量,就是window对象的属性
console.log(str);//输出:China
console.log(window.str);//输出:China
</script>
  • navigator对象(包含浏览器信息的对象)

常用属性

appCodeName:内部代码
appName:浏览器名称
cookieEnabled:cookie是否可用
userAgent:用户代理信息

  • location对象(浏览器地址栏对象)

常用属性

host:主机名
href:地址链接,可以使用此属性实现页面跳转
pathname:地址路径
search:参数信息

页面跳转

window.location.href='http://www.webbc.win';//页面跳转
  • history对象(历史记录对象)

属性

length:历史记录的数目

常用方法

back():后退一页
forword():前进一页
go(num):指定跳转到哪一页,如果参数是正数就代表向前翻一页,如果是负数代表向后翻一页

  • screen 屏幕对象

常用属性

height:高度
width:宽度
availHeight:可用高度
availWidth:可用宽度

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 #Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 #Javascript
JavaScript中var的重要性实例分析
Jul 09 #Javascript
js图片无缝滚动插件使用详解
May 26 #Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 #Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 #Javascript
You might like
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
js编写选项卡效果
2017/05/23 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python样条插值的实现代码
2018/12/17 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python如何实现机器人聊天
2020/09/10 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
商务英语应届生自我鉴定
2013/12/08 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
销售人员工作自我评价
2014/09/21 职场文书
2015教师见习期工作总结
2014/12/12 职场文书