【前端系列】一文看懂JavaScript中的常用BOM对象及如何使用

BOM对象介绍

浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象。 BOM对象的组成：

1. Window：浏览器窗口对象
2. Navigator：浏览器对象
3. Screen：屏幕对象
4. History：历史记录对象
5. Location：地址栏对象

Window对象详细介绍：

如何使用：直接使用window.来获取属性和使用方法其中window.可以省略 例如：window.alert("hello");或alert("hello"); 属性：

• history：对history对象的只读引用
• location：用于窗口或框架的location对象
• navigator：对navigator对象的只读引用

方法：

• alert()：显示带有一段消息和一个确认按钮的警告框

//获取对象
window.alert("hello");//完全写法
alert("hello window");//省略写法

• confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框

   //confirm方法
   var flag = confirm("确认？");//用户点击确认flag为true，点击取消flag为false
   alert(flag);

• setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式（一定周期内重复调用）

   //定时器-setInterval--周期性执行某一个函数
   var i =0;
   setInterval(function(){
       i++;
       console.log("过去了"+i+"秒");
  },1000)

• setTimeout()：在指定的毫秒数后调用函数或计算表达式（一段时间后只调用一次）

//定时器-setTimeout--延迟指定时间只执行一次
setTimeout(() => {
   alert("过了三秒")
}, 2000);

Location地址栏对象

使用： window.location.属性;或location.属性; 属性：

• href：设置或返回完整的url

setTimeout(() => {
   location.href="https://www.docn.net";//3秒后自动跳转零一物语，哈哈哈
}, 3000);例如：<code>location.href="https://www.docn.net";</code><br>​

BOM对象中较为重要而且比较常用的已经介绍完毕，其他内容同学们可查阅官方文档或中文社区哦！