章简介：

我们在上一章认识了JavaScript的主要作用，JavaScript的基本语法及函数，和在网页中引入JavaScript的三种方式。

本章来认识与DOM相关的一些对象，其中包括了 window、document、location''、history对象，以及Data时间对象和常用的定时函数。

本章单词：

Confirm 确认提示窗

Open 打开

Close 关闭

Interval 间隔，

Timeout 超时

Element 元素

2、1 Window对象

浏览器对象模型（DOM）是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。

Window对象是整个BOM的核心，在浏览器中打开网页后，首先看到的是浏览器窗口，即顶层的window对象，其次才是网页文档内容（document）。

Window对象也称为浏览器对象，当浏览器打开HTML文档时，通常会创建一个window对象，如果文档定义了一个或多个框架，浏览器将为原始文档创建一个window对象，同时为每个框架另外创建一个window对象。

1 常用属性

History 有关客户访问过的URL的信息

Location 有关当前URL的信息

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

2 常用方法

Prompt() 显示可提示用户输入的对话框

window.prompt("","");

有两个参数，是输入对话框，用来提示用户输入一些信息。

Alert() 显示一个带有提示信息和一个确定按钮的警告提示框

window.alert("");

只有一个参数，仅显示警告对话框的信息，无返回值，不能对脚步产生任何改变。

Confirm() 显示一个带有提示信息，"确定"和"取消"按钮的对话框。

window.confirm("");

只有一个参数，是确认对话框，显示对话框的消息，"确认"和"取消"按钮。

Close（） 关闭浏览器窗口

window.close();

Open（） 打开一个新的浏览器窗口，加载指定的URL所指定的文档

window.open("");

SetTimeout（） 在指定的毫秒数后调用函数和计算表达式，只调用一次

window.setTimeout("");

SetInterval（） 按照指定的周期（以毫秒计）来调用函数或表达式，无限次调用。

window.setInterval("");

2、2 history对象

History对象提供用户最近浏览过的URL列表，出于隐私原因，已经不再允许脚步访问已经访问过的实际URL，但是可以使用history对象提供的方法，逐个返回访问过的页面的方法。

Back（） 加载history对象列表中前一个URL。

等效于"后退"按钮

Forward（） 加载history对象列表中后一个URL。

等效于"前进"按钮

Go（） 加载history对象列表中某个具体的URL。

Go（1） 代表前进一页，等价于forward（）方法。

Go（-1）代表后退一页，等价于back（）方法。

2、3 location对象

Location对象提供当前页面的URL信息，并且可以重新装载当前的页面和装入新页面。

location对象属性：

host 设置或返回主机名和当前的URL的端口号

hostname 设置或返回当前URL的主机名

href 设置或返回完整的URL

location对象方法

reload 重新加载当当前文档

replace 用新的文档替换当前文档

2、4 document对象

document对象即是window对象的一部分，又代表了整个HMTL文档，可以用来访问页面中的所有元素，在使用document对象时，除了要适用于浏览器外，也要符合W3C标准。

document对象常用属性

Referrer 返回载入当前文档的URL

URL 返回当前文档RUL

document对象常用方法：

//返回对拥有指定 id 的第一个引用

document.getElementById("");

//返回带有指定名称的对象的集合

document.getElementsByName("");

//返回带有指定标签名的对象的集合

document.getElementsByTagName("");

//向文档写文本、HTML代码、JavaScript代码

document.write("");

innerHMLT是几乎所有的HMTL元素都有的属性，它是一个字符串，用来设置或者获取当前对象的开始标签和结束标签之间的HTML。

2、5 Date对象：

此对象用于操作日期和时间，和Java中的类很相似，需要使用 new对象名（）的方式创建

var time=new Date(); //获得当前的时间

time.getDate(); //返回一个月中的每一天，其值为 1~31

time.getDay(); //返回星期中的每一天，其值为 0~6

time.getHours(); //返回小时数，其值为 0~23

time.getMinutes(); //返回分钟数，其值为 0~59

time.getSeconds(); //返回秒数，其值为 0~59

time.getMonth(); //返回月数，其值为 0~11

time.getFullYear(); //返回年数，其值为 四位数

time.getTime(); //返回自 1970-1-1 日以来的毫秒数

2、6 Math对象

Math对象提供了许多与数学相关的功能，它是一个JavaScript的全局对象。

Math.ceil("25.5"); //对数字进行上舍入 返回 26

Math.floor("25.5"); //对数字进行下舍入 返回 25

Math.round("25.5"); //对数字进行四舍五入 返回 26

Math.random(); //返回随机数

2、7 定时函数

Javscript提供了俩个定时函数 setTimeout（） 和 setInterval（），并且还提供了用于清除定时函数的两个函数 clearTimeout（）和 clearInterval（）

setTimeout（）

此函数用于在指定的毫秒数后调用函数或者表达式，只执行一次。

window.setTimeout("");

setInterval（）

此函数用于在指定的毫秒数后调用函数或者表达式，重复执行

window.setInterval("");

本章总结：

1、学会使用window对象可以实现弹出窗口，关闭当前窗口，弹出页面消息框等效果。

2、学会使用Date 对象可以获得当前系统的日期，时间。

3、学会使用history和location对象的相关属性和方法可以轻松实现浏览器中的"后退"和"进行"以及"刷新"功能。

4、学会使用 document的各个方法来访问元素。

5、学会使用两个定时函数，和清除它们。

后记：对于大部分转行的人来说，找机会把自己的基础知识补齐，边工作边补基础知识，真心很重要。

"我们相信人人都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚集地。"

OM 也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。BOM 的核心对象是 window，它表示浏览器的一个实例。window 对象处于 JavaScript 结构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。

1.对象的属性和方法

window 对象有一系列的属性，这些属性本身也是对象。

window对象属性

window 下的属性和方法，可以使用 window.属性、window.方法()或者直接属性、方法()的方式调用。例如：window.alert()和 alert()是一个意思。

2.系统对话框

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器中显示的网页没有关系，也不包含 HTML。

3.新建窗口

使用 window.open()方法可以导航到一个特定的 URL， 也可以打开一个新的浏览器窗口 。它可以接受三个参数：

1.第一个参数，是你将要导航到的URL

2.窗口的名称或者窗口的目标，命名可以给新窗口设置一个名称，凡事以这个名称打开的窗口，都在这个窗口里加载URL ， 目标：_blank，_parent，_blank新建一个窗口，_parent表示在本窗口内加载

3.特定的字符串，表示各种窗口配置的功能

不命名会每次打开新窗口，命名的第一次打开新窗口，之后在这个窗口中加载。窗口目标是提供页面的打开的方式，比如本页面，还是新建。

第三个参数字符串

4.窗口的位置和大小

用来确定和修改 window 对象位置的属性和方法有很多。 screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置 （火狐浏览器不支持）。Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息。

窗口页面大小，Firefox、Safari、Opera 和 Chrome 均为此提供了 4 个属性：innerWidth和 innerHeight，返回浏览器窗口本身的尺寸；outerWidth 和 outerHeight，返回浏览器窗口本身及边框的尺寸。

5.间歇调用和超时调用

JavaScript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

超时调用需要使用 window 对象的 setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。

调用 setTimeout()之后，该方法会返回一个数值 ID，表示超时调用。这个超时调用的 ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用 clearTimeout()方法并将相应的超时调用 ID作为参数传递给它。

间歇调用与超时调用类似， 只不过它会按照指定的时间间隔重复执行代码， 直至间歇调用被取消或者页面被卸载。 设置间歇调用的方法是 setInterval()， 它接受的参数与 setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。

一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消 ID，并且可能造成同步的一些问题，我们建议不使用间歇调用，而去使用超时调用。

点关注，不迷路，欢迎关注，每日都更新大量前端知识

ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关.

bom 浏览器对象模型

bom可以使通过js来操作浏览器，在bom中为我们提供一组对象，用来完成浏览器的操作

bom中的主要对象

1.window对象 代表整个浏览器的窗口，同时window也是网页的全局对象

2.navigator对象 代表当前浏览器的信息，通过该对象可以识别不同的浏览器

由于历史原因，已经navigator的大部分属性不太能识别了。一般只会使用userAgent来判断浏览器信息

不同的浏览器会有不同的userAgent。

console.log(navigator.userAgent)

如果通过UserAgent不能判断，还可以通过浏览器的特有对象，来判断浏览器的信息，

比如ActivexObject，他是ie独有的一个属性，可以用来判断ie浏览器ie10以下。

window.ActivexObject如果有的话会返回true，可以用来判断ie浏览器ie10以下。

用('ActivexObject' in window)返回true，可以用来判断ie所有浏览器

3. location对象 封装了当前浏览器的地址栏信息，通过location，可以获得地址栏信息

也可以改变location的值，可以添加相对路径和绝对路径，像一个超链接。并且会生成历史记录

console.log(location)

location='www.baidu.com'

4.history对象 代表浏览器的历史记录，该对象不能获得具体的历史记录，只能操作浏览器向前或向后翻页

而且该操作只在当次访问时有效。

5.screen对象 代表用户的屏幕信息，通过该对象可以获得到用户显示器相关的信息

这些bom对象在浏览器中都是作为window对象的属性保存的，可以通过浏览器对象来使用也可以直接使用为全局对象。

6.定时器

js的程序执行速度是非常快的，如果希望一段程序，可以每隔一段时间执行一次，可以使用定时调用。但设置的定时器必须清除，利用click，可能会多次创建定时器，所以创建定时器之前清除定时器每个定时器会返回一个Number类型的数据，这个数字作为定时器的唯一标识