JS BOM 常见操作

ares5k

已于 2022-06-22 10:11:25 修改

阅读量651

点赞数 5

分类专栏： # ECMAScript 文章标签： javascript js

于 2021-07-22 16:07:05 首次发布

本文链接：https://blog.csdn.net/Ares5kong/article/details/118933424

版权

ECMAScript 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

文章目录

BOM 概念
BOM 常用对象

BOM 概念

BOM - 浏览器对象模型。BOM 并不是一个具体的对象, 而是一组对象的统称, 这些对象都具备一个特征, 就是对浏览器的属性，行为进行封装从而可以用操作对象的方式操作浏览器。
在这里插入图片描述

BOM 常用对象

1. window 对象

BOM 中最核心的对象, 所有内置的和自定义的全局变量都会被加到 window 对象中，window 对象内东西太杂了, 在此只记录几个 window 对象中比较有代表性的功能。

弹窗

① 普通对话框 - alert

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  window.alert("对是一个普通对话框!")
</script>
</body>
</html>

② 带确认的对话框 - confirm

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  if (window.confirm("带确认的对话框!")) {
    console.log('选择了确认')
  } else {
    console.log('选择了取消')
  }
</script>
</body>
</html>

③ 可接收用户输入的对话框 - prompt

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  console.log(window.prompt('请输入您的姓名:'))
</script>
</body>
</html>

定时器

① 只执行一次 - setTimeout

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  console.log(`当前时间是：${new Date()}`)
  window.setTimeout(function () {
    console.log(`执行定时器，当前时间是：${new Date()}`)
  }, 2000)
</script>
</body>
</html>

② 重复执行 - setInterval

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  console.log(`当前时间是：${new Date()}`)
  window.setInterval(function () {
    console.log(`执行定时器，当前时间是：${new Date()}`)
  }, 2000)
</script>
</body>
</html>

③ 定时器的参数与清除

(1) 不管是 setTimeout 还是 setInterval 都具有两个参数。

参数1: 回调处理函数。可以是匿名函数, 也可以是函数变量, 还可以是函数名。
当使用函数名和函数变量时, 建议用引号括起来, 并且不要忘了函数名或函数变量后面的小括号。

参数2: 延迟时间, 单位是毫秒。不传默认是零。

(2) 定时器的返回值是定时器编号, 删除定时器, 就是使用这个编号, 所以一定要接收定时器的返回值

clearInterval( timerNo )：清除 setInterval 定时器

clearTimeout( timerNo )：清除 setTimeout 定时器

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  console.log(`当前时间是：${new Date()}`)
  let timerNo = window.setInterval(() => {
    console.log(`执行定时器，当前时间是：${new Date()}`)
  }, 2000)

  // 十秒后清除定时器
  setTimeout(() => {
    console.log('准备清除定时器')
    clearInterval(timerNo)
  }, 10000)
</script>
</body>
</html>

2. location 对象

对象内存储了地址栏信息, 可以对地址栏操作。

① 常用属性

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  let addressInfo = `
  端口: ${location.port}
  协议: ${location.protocol}
  主机地址（带端口）: ${location.host}
  主机地址（不带端口）: ${location.hostname}
  访问的主机内路径:    ${location.pathname}
  地址栏的完整地址:        ${location.href}
  查询参数:      ${location.search}`
  console.log(addressInfo)
</script>
</body>
</html>

② 常用方法

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<input type="button" onclick="href()" value="页面跳转(会保存历史记录)"/>
<input type="button" onclick="replace()" value="页面跳转(不保存历史记录)"/>
<input type="button" onclick="reload()" value="页面重载"/>
<script>
  // 页面跳转(会保存历史记录)
  function href() {
    location.href = '//jd.com'
  }

  // 页面跳转(不保存历史记录)
  function replace() {
    location.replace('//jd.com')
  }

  // 页面重载
  function reload() {
    location.reload()
  }
</script>
</body>
</html>

3. navigator 对象

对象内存储了用户浏览器信息和系统信息。但不是很准确具有一定误导性。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<div id="browser_info"></div>
<script>
  let innerHtml = `<p>用户浏览器是否开启cookies: &nbsp;&nbsp;&nbsp; ${navigator.cookieEnabled}</p>
                   <p>用户浏览器本地语言: &nbsp;&nbsp;&nbsp; ${navigator.language}</p>
                   <p>用户代理(浏览器信息, 系统信息等): &nbsp;&nbsp;&nbsp; ${navigator.userAgent}</p>`
  document.querySelector("#browser_info").innerHTML = innerHtml;
</script>
</body>
</html>

经典用法：判断用户是手机访问还是电脑访问

① 仿京东写法（基于正则表达式判断）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  // 移动端地址
  let mobileUrl = "//m.ares5k.com"
  // 用户浏览器及系统信息, 简称 UA
  let ua = navigator.userAgent.toLocaleLowerCase()
  // 判断是否是移动端的正则
  let mobileRegExp = /iphone|ipad|android|symbianos|windows\sphone/g
  // 判断是否是微信内置浏览器的正则
  let c = /micromessenger|qq\/[\d.]+/i

  // 检测是否需要跳转到移动端
  if (c.test(ua) || mobileRegExp.test(ua)) {
    location.href = mobileUrl;
  }
</script>
</body>
</html>

② 仿苏宁写法（基于数组判断）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<script>
  // 函数： 判断客户端设备是否为电脑
  function isPc() {
    let flag = true;
    // 用户浏览器及系统信息, 简称 UA
    let userAgentInfo = navigator.userAgent;
    // 移动端系统数组
    let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod", 'iPad'];
    // 遍历移动端系统数组
    for (let i = 0; i < Agents.length; i++) {
      // 判断是否是移动端
      if (userAgentInfo.indexOf(Agents[i]) >= 0) {
        flag = false;
        break;
      }
    }
    return flag;
  }

  // 判断客户端设备是否为电脑
  if (!isPc()) {
    window.location.href = '//m.ares5k.com';
  }
</script>
</body>
</html>

4. history 对象

① back: 对应浏览器中的回退按钮

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<input type="button" value="与浏览器后退按钮功能相同">
</body>
<script>
  let btn = document.querySelector('input[type="button"]')
  btn.addEventListener('click', () => {
    history.back();
  })
</script>
</html>

② forward: 对应浏览器中的前进按钮

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<input type="button" value="与浏览器前进按钮功能相同">
</body>
<script>
  let btn = document.querySelector('input[type="button"]')
  btn.addEventListener('click', () => {
    history.forward();
  })
</script>
</html>

③ go: 参数为正数时等同于 forward 效果, 为负数时等同于 back 效果

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BOM</title>
</head>
<body>
<input id="back" type="button" value="与浏览器回退按钮功能相同">
<input id="forward" type="button" value="与浏览器前进按钮功能相同">
</body>
<script>
  let back = document.querySelector('#back')
  let forward = document.querySelector('#forward')
  // 后退
  back.addEventListener('click', () => {
    history.go(-1);
  })
  // 前进
  forward.addEventListener('click', () => {
    history.go(1);
  })
</script>
</html>