JavaScript | BOM讲解

泡面泡牛奶
104 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

前言

JavaScript是基础并且是非常重要的一部分，现在项目基本都靠框架开发，很多原生方法得不到使用就会慢慢忘记，所以借着6月更文好好复习一下基础知识，开始BOM的基础知识讲解。

BOM介绍

BOM也就是 Browser Object Modle 浏览器对象模型

从Window开始（window 也是 BOM 的一个对象）

  • window对象：
    • 代表窗口，作为BOM对象的核心
    • 替代ECMAScript规定的顶层对象global的功能，作为全局对象，包含所有的全局方法和全局属性
    • 全局变量和全局函数都是window对象的方法和属性
  • window对象包含：
    • document:代表整个文档
    • screen：代表屏幕信息
    • history：代表历史记录
    • navigator:代表浏览器信息
    • location：代表浏览器的url地址

对象方法具体介绍

  • 系统弹窗
    • window.alert("message") 只有一个确认按钮的弹窗
    • window.confirm("are you sure") 方法有返回值布尔值，代表用户选择确定还是取消
    • window.prompt("what your name") 有输入功能和确认取消按钮的弹窗,如果取消则返回null 否则返回文本框的内容
  • 打开关闭窗口
    • 打开窗口 window.open("url地址","跳转方式","宽高自定义:width='100',height='100'")
      • 跳转方式：_self:自身跳转 / "_blank":新窗口跳转
    • 关闭窗口 window.close()
  • 超时调用计时器
    • window.setTimeout() 只执行一次
    • 清除定时器 clearTimeout()
  • 间歇调用计时器
    • window.setInterval() 每隔一段时间执行一次代码
    • 清除间歇定时器 clearInterval()

做一个间歇定时器的倒计时demo

动画.gif

  <body>
    <h1 class="box">敌军还有5秒到达战场</h1>
</body>

<script>
     var oBox = document.querySelector('.box')
     var num = 5;
     var time = setInterval(function(){
         num--;
         if(num<=0){
         //清除计时器之后，并不会直接退出计时器，而是要把当前计时器的代码全部执行完成
           clearInterval(time);
           oBox.textContent = '全军出击';
           return
         }
         oBox.textContent = '敌军还有'+num+'秒到达战场'
     },1000)
</script>

navigator浏览器对象（常用）

  • navigator.onLine 是否连接网络
  • navigator.platform 查看当前操作系统
  • navigator.userAgent 浏览器识别码，用户代理信息

location对象

  • location.protocol 协议/http
  • location.host 主机和端口名
  • location.hostname 主机
  • location.port URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080
  • location.pathname URL中主机名后的部分，如/index.html
  • location.search 执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx
  • location.hash 如果URL包含#，返回该符号之后的内容，如#p
  • location.assign('url') location的方法 -assign 和href一样 设置重定向
  • location.replace('要替换的url地址') 同location.assign 替换当前url地址(替换之前页面的历史记录)，不能通过back和forward访问
  • location.reload(true | false) 重新加载文档 为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false

解析offsetWidth、clientWidth、scrollWidth

以下宽与高同理

  • offsetWidth
    • 获取元素的宽度，包含 内容 + 内边距 + 边框的总宽度
    • 当元素是display：none隐藏的时候 就获取的是0
    • 如果是图片或其他资源没有加载的时候，并且没有设置宽的时候，获取的大小就是0
  • clientWidth
    • 获取元素的宽度， 包含 内容 + 内边距
    • 行内标签clientWidth属性是0
    • 当元素是display：none隐藏的时候 就获取的是0
    • 如果是图片或其他资源没有加载的时候，并且没有设置宽的时候，获取的大小就是0
  • scrollWidth
    • 元素包含的完整内容和自身的padding（无论是否超出 无论超出是否隐藏）
  • 获取浏览器的宽度
    • 在主流浏览器中：窗口的宽高是通过html标签的clientWidth和clientHeight获取的document.documentElement.clientHeight/clientWidth

history对象

  • history.forward() 向前进1页

  • history.back() 向后退1页

  • history.go() 无论进退都可以使用，里边书写数字，正数代表进 负数代表退 数字代表进退的数量

    好了，以上就是本篇文章的分享，感谢阅读！

avatar
文章
阅读
粉丝