• “这是我参与「第四届青训营 」笔记创作活动的的第4天”

BOM

• 浏览器对象模型

• 通过JS操作浏览器

• BOM对象

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

  1. Navigator：代表当前浏览器的信息，通过该对象识别不同浏览器

  2. Location：代表当前浏览器地址栏信息，通过该对象获取地址信息或者操作浏览器跳转页面

  3. History：代表浏览器历史记录，通过该对象来操作浏览器的历史记录

     注：由于隐私原因，该对象不能获取具体的历史记录，只能操作浏览器向前向后翻页，且该操作只能在当此访问时有效

  4. Screen：代表用户屏幕信息，通过该对象获取用户的显示器相关信息

  使用：作为window对象属性保存，可以通过window对象使用，也可以直接使用

Navigator

• 一般只使用userAgent来判断浏览器信息：navigator.userAgent

  • userAgent即用户代理，等价于浏览器
  • userAgent是一个字符串，包含有用来描述浏览器信息的内容

History

History 对象属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

History 对象方法

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

• history.go()

  • 接收一个整数作为参数
  • 正数表示向前跳转页面（n个forward()）
  • 负数表示向后跳转页面（n个back()）

Location

• 直接打印loaction，获取当前地址栏信息
• 直接修改location为一个新路径，页面会自动跳转，并且会生成相应历史记录

Location 对象方法

属性	描述
assign()	加载新的文档，参数为路径，有历史记录
reload()	重新加载当前文档，刷新
replace()	用新的文档替换当前文档，无历史记录

• location.reload()：参数为true时，强制清空缓存刷新

window

定时器

方法	描述
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式

定时调用

每隔一段时间调用一次函数，多次执行

• setInterval()

  • 参数：回调函数、调用间隔时间（单位毫秒）
  • 返回一个Number类型的数据，作为定时器的唯一标识

• clearinterval()

  • 参数：定时器标识

注意：相同元素在创建计时器时要先删除原来的计时器

btn01.onclick = () => {
                    clearInterval(timer)
                    timer = setInterval(() => {
                        index = (index+1) % 5
                        img1.src = imgs[index]
                    }, 1500)
                } 

延时调用

在一段时间后调用一次函数，只执行一次

• setTimeout()
• clearTimeout()