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

【前端系列】一文看懂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)
图片[1]-【前端系列】一文看懂JavaScript中的常用BOM对象及如何使用
  • setTimeout():在指定的毫秒数后调用函数或计算表达式(一段时间后只调用一次)
//定时器-setTimeout--延迟指定时间只执行一次
setTimeout(() => {
   alert("过了三秒")
}, 2000);

Location地址栏对象

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

  • href:设置或返回完整的url
setTimeout(() => {
   location.href="https://docn.net";//3秒后自动跳转零一物语,哈哈哈
}, 3000);例如:<code>location.href="https://docn.net";</code><br>​

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

© 版权声明
THE END
喜欢就支持一下吧
点赞16 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容