浅谈JavaScript的bom简介与组成
BOM的简介
概念：BOM（Browser Object Document）即浏览器对象模型
关于BOM的说明：
(1)BOM提供了独立于内容而与浏览器窗口进行交互的对象
(2)由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window对象
(3)BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
(4)BOM缺乏一个统一的标准
JavaScript语法的标准化组织是ECMA
DOM的标准化组织是W3C [所有浏览器公共遵守的标准]
BOM是各个浏览器厂商根据dom在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
ps：通常情况下如果提到了bom，一般指的都是window对象
BOM和DOM的关系
可以认为window相当于浏览器窗口 而dom则是窗口中的一个页面
(1)DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容
(2)BOM通过 window 对象来访问、控制、修改浏览器中的内容
联系：BOM包含DOM。
浏览器提供用来访问的是BOM对象
从BOM对象可以访问到DOM对象
从而使javascript可以操作浏览器、并通过操作浏览器读取到文档的内容
区别：
DOM描述了处理网页内容的方法和接口，即操作页面内部
BOM描述了与浏览器进行交互的方法和接口，即操作页面之间
Bom组成
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
下面让我来一一介绍这几个bom对象：
Window：窗口对象
一. 创建
window对象表示浏览器窗口，所有浏览器都支持它，并且所有的JavaScript全局对象，函数以及变量均自动成为该对象的成员。全局变量是window的属性，全局函数则是该对象的方法。
二. 方法
1.与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2.与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
这里针对定时器做一个小案例，案例div移动（从左向右移动）
var timer=null;
var marginLeft=0;
function begin(){
clearInterval(timer)
timer=setInterval(function(){
marginLeft+=30
var div_style=document.getElementsByTagName("div")[0].style
div_style.marginLeft=marginLeft+"px"
},300)
}
function end(){
clearInterval(timer)
}
三. 属性：
1. 获取其他BOM对象：
- history
- location
- Navigator
- Screen:
2. 获取DOM对象
document
Navigator：
- window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。（这个对象和event一样是一个全局变量，并且是唯一的） navigator.appCodeName //浏览器代码名的字符串表示
- navigator.appName //官方浏览器名的字符串表示
- navigator.appVersion //浏览器版本信息的字符串表示
- navigator.cookieEnabled //如果启用cookie返回true，否则返回false
- navigator.javaEnabled() //如果启用java返回true，否则返回false
- navigator.platform //浏览器所在计算机平台的字符串表示
- navigator.plugins //安装在浏览器中的插件数组
- navigator.userAgent //返回和浏览器内核相关的信息
ps:如果window.navigator.userAgent出现了Mobile，可以确定用户使用的是移动设备
Location：地址栏对象
1. 创建(获取)：
1). window.location
2). location
2. 方法：
reload() 重新加载当前文档。刷新
3. 属性
href 设置或返回完整的 URL。
这里通过地址栏对象和上面的定时器，做一个个5秒后跳转华为云官网的效果
second=5
function go(){
second--
if(second<0){
clearInterval(timer)
location.href="https://www.huaweicloud.com/?locale=zh-cn";
}
var time=document.getElementById("time")
time.innerHTML=second+"";
}
History：历史记录对象
1. 创建(获取)：
1）window.history
2） history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
关于js的bom简介和组成就说到这里了，如有不足之处，欢迎指正！
感恩能与大家在华为云遇见！希望能与大家一起在华为云社区共同成长。
- 点赞
- 收藏
- 关注作者
评论（0）