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之编码规范 推荐
May 23 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
React服务端渲染原理解析与实践
Mar 04 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php+highchats生成动态统计图
2014/05/21 PHP
扩展String功能方法
2006/09/22 Javascript
jquery插件之easing使用
2010/08/19 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中@property的理解和使用示例
2019/06/11 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
软件工程师面试题
2012/06/25 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
英语自荐信范文
2013/12/11 职场文书
实习生自我评价
2014/01/18 职场文书
搞笑创意广告语
2014/03/17 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2015年派出所工作总结
2015/04/24 职场文书
调解书格式范本
2015/05/20 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
php实例化对象的实例方法
2021/11/17 PHP
JavaScript执行机制详细介绍
2021/12/06 Javascript