JavaScript快速入门-BOM对象
作者：@skyflask
转载本文请注明出处：https://www.cnblogs.com/skyflask/p/9027358.html
目录
一、什么是BOM
二、BOM结构图
三、常用对象
四、window对象
五、history对象
六、location对象
一、什么是BOM
概念
BOM（Browser Object Model）即浏览器对象模型。BOM提供了独立于内容，而与浏览器窗口进行交互的对象；
核心
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
不足
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
二、BOM结构图
BOM主要是对窗口的操作，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。从上图可以看出Window的子对象主要有如下几个：
JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象
JavaScript screen 对象
三、常用对象
window对象
history对象
location对象
四、window对象
1、window对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <script> var num = Math.round(Math.random()*100); console.log(num);function acceptInput(){ //2.让用户输入(prompt)并接受 用户输入结果,默认值为10. var userNum = prompt("请输入一个0~100之间的数字!","10"); //3.将用户输入的值与 随机数进行比较 if(isNaN(+userNum)){ //用户输入的无效(重复2,3步骤) alert("请输入有效数字!"); acceptInput(); } else if(userNum > num){ //大了==> 提示用户大了,让用户重新输入(重复2,3步骤) alert("您输入的大了!"); acceptInput() }else if(userNum < num){ //小了==> 提示用户小了,让用户重新输入(重复2,3步骤) alert("您输入的小了!"); acceptInput() }else{ //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm). var result = confirm("恭喜您!答对了,是否继续游戏?"); if(result){ //是 ==> 重复123步骤. num = Math.round(Math.random()*100); acceptInput() }else{ //否==> 关闭窗口(close方法). close(); } } } acceptInput()</script> |
2、window对象应用（2）【setInterval（）和clearInterval（）】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html><html lang="UTF8"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body></body><input id="ID1" type="text" onclick="begin()"><button onclick="end()">停止</button><button onclick="comeon()">继续</button><script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var clock; function begin(){ if (clock==undefined){ showTime(); clock=setInterval(showTime,1000); } } function end(){ clearInterval(clock); } function comeon(){ showTime(); clock=setInterval(showTime,1000); }</script></html> |
3、setTimeout 和clearTimeout
1 2 3 4 5 6 7 | function abc(){ alert('aaa'); }var ID = setTimeout(abc,2000); // 2s后调用调用一次对应函数，注意：只调用一次！！clearTimeout(ID); //清除 |
五、history对象
History 对象属性
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
history.length // 3
History 对象方法
history对象提供了一系列方法，允许在浏览历史之间移动。
back()：移动到上一个访问页面，等同于浏览器的后退键。forward()：移动到下一个访问页面，等同于浏览器的前进键。go()：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。
六、location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
注意：assign和replace方法的区别
assign（URL）：跳转到指定URL，可以后退
replace（URL）：直接替换成指定URL，无后退可言
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」