浅谈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简介和组成就说到这里了，如有不足之处，欢迎指正！

感恩能与大家在华为云遇见！希望能与大家一起在华为云社区共同成长。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。