JavaScript(BOM)

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 614 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入探讨浏览器对象模型(BOM)，重点讲解window对象及其location属性用于操作地址栏，包括href、hash和search的使用，以及assign、replace和reload方法。此外，介绍了JavaScript的URL编码解码函数decodeURI和encodeURI。最后，阐述了定时器setInterval和setTimeout的运用及异步代码执行原理。

BOM - browser object model - 浏览器对象模型

顶层对象：window

我们最终是使用对象的模型(对象嵌套对象形成的结构)来操作浏览器

对象模型中最顶层的结构，最大的对象：window - 系统内置：代表浏览器窗口

console.log(window); // object

对于浏览器的多种操作，window会内置很多小对象分别负责某一种操作

location - 用于操作浏览器的地址栏

3个属性

href - 完整地址
跳转页面
sethref.onclick = function() {
    window.location.href = 'https://www.jd.com/' //京东
}
hash - 锚点
设置锚点不会跳转页面
setmaodian.onclick = function() {
    window.location.hash = '#mima'
}
search - 数据
设置数据
// setdata.onclick = function() {
//     window.location.search = '?name=zhangsan'
// }
3个方法

assign()        网页重定向

replace()        将当前地址替换成新地址

reload()        刷新

地址栏：当前页面的路径 + 数据部分 + 锚点

数据部分：文件路径?键=值&键=值&键=值 ...

扩展：

补充两个js置的函数，用于进行url编码或解码

解码：decodeURI(字符串)

var str = 'file:///C:/Users/Admin/Desktop/2201/day09-BOM%E5%92%8CDOM%E4%B8%8A/4-%E8%AF%BE%E5%A0%82%E4%BB%A3%E7%A0%81/11-location.html'

var res = decodeURI(str)

console.log(res);

var str = '我爱你'

编码：encodeURI(被编码的字符串)

var res = encodeURI(str)

console.log(res);

定时器

让一段代码每隔一段时间就执行

window.setInterval(function(){}, 毫秒数)

让一段代码延迟多长时间去执行 - setTimeout()

window.setTimeout(function() {}, 毫秒数)

setInterval与setTimeout相同点：

参数：函数、毫秒数

返回值：都代表当前页面中的第几个定时器可以用来停止定时器

停止定时器：clearInterval(返回值) clearTimeout(返回值)

异步代码：

js执行代码在调用栈中
调用栈将代码按照顺序放进来
同步代码直接执行，异步代码交给浏览器
调用栈会一口气将所有同步代码都先执行结束，然后到队列中找是否有需要执行的代码
浏览器接收到异步代码后，就开始计时，当时间到了代码该执行了，会将代码放在队列中排队等待调用栈执行他

js中异步代码永远在所有同步代码后面执行

定时器给出的时间不精准