【前端】JS——BOM常用知识点笔记

浏览器对象模型（BOM）

1、Window对象（不常用）

2、通过Window对浏览器窗口进行操作（不常用）

3、通过Window对屏幕进行操作（不常用）

4、通过Window.Loaction对URL进行操作

5、window.history 对象包含浏览器的历史。(不常用)

6、消息弹窗（常用）

(1) 警告框 alert("msg")

(2) 确认框 confirm("msg")

(3) 提示框 prompt("msg")

7、计时器（常用）

（1）setInterval(s,time)

（2）setTimeout(s,time)

8、页面加载事件(常用)

9、本地缓存（常用）

（1）window.sessionStorage

（2）window.localStorage

1、Window对象（不常用）

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

HTML DOM 的 document 是 window 对象的属性。

2、通过Window对浏览器窗口进行操作（不常用）

    //  打开新窗口window.open()// 关闭当前窗口window.close()// 移动当前窗口window.moveTo()// 调整当前窗口的尺寸window.resizeTo()

Window 获取浏览器窗口的尺寸（浏览器窗口大小进行调整是宽高会随着变化而变化）

<script>// window.innerWidth浏览器窗口的内部宽度(包括滚动条)var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;// window.innerHeight浏览器窗口的内部高度(包括滚动条)var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;console.log("浏览器的窗口宽、高分别是:",w,h);
</script>

监听窗口大小变化

方法1

<script>addEventListener('resize', function () {// window.innerWidth浏览器窗口的内部宽度(包括滚动条)var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;// window.innerHeight浏览器窗口的内部高度(包括滚动条)var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;console.log("浏览器的窗口宽、高分别是:", w, h);})
</script>

方法2

<script>onresize = function () {// window.innerWidth浏览器窗口的内部宽度(包括滚动条)var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;// window.innerHeight浏览器窗口的内部高度(包括滚动条)var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;console.log("浏览器的窗口宽、高分别是:", w, h);}
</script>

运行结果

3、通过Window对屏幕进行操作（不常用）

访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏

<script>w=screen.availWidth;h=screen.availHeight;console.log("可用的屏幕宽度、高度分别是：",w,h);
</script>

4、通过Window.Loaction对URL进行操作

Window.Loaction对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location.assign(url) ：加载 URL 指定的新的 HTML 文档。跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

window.location.reload() 重新加载页面，相当于刷新按钮或者f5

navigator对象可用于判断判断用户是使用什么客户端打开的

if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {   console.log("手机");
} else {   console.log("电脑");
}

5、window.history 对象包含浏览器的历史。(不常用)

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

history.go(n); 参数n表示跳转页面的个数 ;当n>0时，前进n个页面；当n=0,刷新当前页面；当n<0后退n个页面。

6、消息弹窗（常用）

弹窗里msg内容要换行使用“\n”

(1) 警告框 alert("msg")

<script>alert("警告框!");
</script>

(2) 确认框 confirm("msg")

<script>confirm("确认框");
</script>

(3) 提示框 prompt("msg")

<script>prompt("提示框");
</script>

7、计时器（常用）

（1）setInterval(s,time)

每间隔time时间执行函数s.

<script>var a=1// 每个1秒打印数字a++var time = setInterval(function(){console.log(a++);},1000)
</script>

运行结果

清理setInterval(s,time)要把计时器赋值为time，然后使用 clearInterval(time)

（2）setTimeout(s,time)

经过time时间执行函数s一次就不在执行函数s.

<script>var a = 1// 经过1秒打印数字a++var time = setTimeout(function () {console.log(a++);}, 1000)
</script>

运行结果

清理setTimeout(s,time)要把计时器赋值为time，然后使用 clearTimeout(time)

扩展：一般把setInterval和setTimeout组成一起使用

<script>var a = 1// 经过1秒打印数字a++var time = setTimeout(function () {console.log(a++);}, 1000)var timeout = setTimeout(function(){clearInterval(time)clearTimeout(timeout)},3*1000)
</script>

清除定时器：如果浏览器中有太多定时器，浏览器的性能会大大降低，会变得卡顿。（定时器作用完后，要进行清除。）

8、页面加载事件(常用)

属性绑定程序 ：Window.οnlοad=function(){} 【当文档内容加载完毕执行该函数。】

<body><div id="content"></div></body>
//以下代码放在文件头部也不影响
<script>onload=function(){document.querySelector("#content").innerHTML="页面加载事件"}
</script>

事件监听绑定程序：

<body><div id="content"></div></body>
<script>addEventListener('load',function(){document.querySelector("#content").innerHTML="页面加载事件"})
</script>

9、本地缓存（常用）

数据存储在用户浏览器（客户端本地），设置、读取方便，页面刷新不消失，容量较大，sessionStorage约5M，localStorage约20M，只能存储字符串，可以将对象JSON.stringify编码后存储

（1）window.sessionStorage

关闭浏览器窗口设置的数据消失

在同一个窗口（页面）数据可以共享

以键值对的形式存储使用

设置sessionStorage

sessionStorage.setItem(key,value)

获取sessionStorage

sessionStorage.getItem(key)

移出sessionStorage

sessionStorage.removeItem(key)

清除所有sessionStorage

sessionStorage.clear()

（2）window.localStorage

生命周期永久生效，除非手动删除，否则关闭页面也会存在，可以多窗口共享

以键值对的形式使用

设置localStorage

localStorage.setItem(key,value)

获取localStorage

localStorage.getItem(key)

移出localStorage

localStorage.removeItem(key)

清除所有localStorage

localStorage.clear()