module3-04-BOM

BOM

一、BOM的概念和window对象

1.1 BOM的概念

• BOM是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象就是BOM的顶层对象，其它对象都是该对象的子对象

• 如document对象就是window的一个子对象

• 我们在浏览器中的一些操作都可以进行编程处理。如：刷新浏览器、后退、前进、在浏览器中输入URL

1.2 window对象

• window对象是BOM中的一个顶层对象，其它对象都是window的子对象

  • 如document就是它的子对象

  • console.log.dir(window.document

• window对象在调用属性和方法时，可以省略window不写

  • alert(1) / window.alert(2)

• 在全局作用域定义的全局变量都是window的一个属性

  • window.name是一个特殊的属性

    • 最好不要在全局定义name的这个变量，若定义即使输出也会是字符串形式

    • window.name = 123
      // 输出name的时候是 '123'

  • widnow.top是一个只读的对象，只会指向window本身，即使修改了

二、BOM一些方法的应用

2.1 对话框

• alert

• prompt

  • 返回输入的内容（字符串）

• confirm

  • 返回选中的值（布尔值）

2.2 onload事件

• 我们可以给window对象或者<img>等元素添加onload加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数

• 其中window对象加载完毕(onload)：指的是所有HTML结构加载完，并且外部引入资源（js、css、img、视频）也加载完毕

• window.onload

  • 其中window.onload事件，可以将js代码提前到html结构之前

  • 一个页面中只能有一个window.onload事件，后面写的会覆盖掉前面的

2.3 延时器与定时器

（1）延时器

• 延时器是window对象的一个方法

• 语法：window.setTimeout(func, time)

• 参数

  • 第一个参数，匿名函数或者函数引用变量，不要加（）

  • 第二个参数，延迟的时间，单位毫秒

• 返回值：返回一个数字，代表第几个定时器

• 功能：在指定的事件后，延迟执行一个函数，但是是异步操作

清除延时器

• window对象的一个方法

• 语法：window.clearTimeout(timeout)

• 参数：指定的掩饰其变量名引用（其实就是一个数字）

作用

• 可以做节流、防抖等操作

（2）定时器

• 定时器是window对象的一个方法，相当于定时闹钟，每隔固定的时间响一次

• 语法：window.setInterval(func, interval)

• 参数：与延时器相同

• 返回值：与延时器相同

第一次执行是在时间间隔之后才会执行，不会立即执行

清除定时器

• 与延时器相似

作用

• 可以用来做简单运动

三、location、URL、history

3.1 location

• location对象是window对象下的一个属性

• location可以获取或者设置浏览器地址栏的URL

• MDN

属性

• href

  • 可以读取也可以改写，会记录历史

方法

• assign()：委派

  • 相当于使用href更改url，会记录历史

• reload()：重新加载

  • 相当于在浏览器按F5，可传入参数true / false为true的话强行从服务器重新获取数据。

  • ctrl + F5相当于传入参数为true

  • F5相当于false

• replace()：替换

  • 替换当前网页，不会记录历史

3.2 URL

• 统一资源定位符

• URL组成：scheme://host:port/path?query#fragment

• scheme：通讯协议，常用的http，ftp，maito等

• host：主机，服务器（计算机）域名系统（DNS）主机名或IP地址

• port：端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80

• path：路径，由零或多个'/'符号隔开的字符串，一般用来表示hi主机上的一个mukluk或文件地址

• query：查询，可选，用于给动态网页传递参数，可有多个参数，用’&‘符号隔开，每个参数的名和值用’=‘符号隔开。如name=zs&age=18

• fragment：信息片段，字符串，描点

3.3 history对象

• history对象是window对象下的一个属性，使用的时候可以省略window对象

• history对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存

方法

• back()

• foward()

• go()

  • 需要输入参数，为1则前进一次，2则前进两次，负数则后退