浏览器对象模型BOM的基本使用

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

BOM

浏览器对象模型它允许 JavaScript 与浏览器对话

Window 对象

• 所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。
• document 对象也是 window 对象属性

窗口尺寸

1. window.innerHeight - 浏览器窗口的内高度（以像素计）

2. window.innerWidth - 浏览器窗口的内宽度（以像素计）

窗口方法

1. window.open() 打开新窗口

2. window.close() 关闭当前窗口

3. window.moveTo() 移动当前窗口

4. window.resizeTo() 重新调整当前窗口

Screen对象

包含用户屏幕的信息

属性

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

Location对象

用于获取当前页面地址（URL）并把浏览器重定向到新页面

方法

• window.location.href 返回当前页面的 href (URL)
• window.location.hostname 返回 web 主机的域名
• window.location.pathname 返回当前页面的路径或文件名
• window.location.protocol 返回使用的 web 协议（http: 或 https:）
• window.location.assign 加载新文档

history 对象

方法

• history.back() - 等同于在浏览器点击后退按钮
• history.forward() - 等同于在浏览器中点击前进按钮

定时器

1. 对象方法：

• setInterval

  setInterval(function(){alert("Hello")},3000);
  //间隔三秒执行函数
  复制代码

• clearInterval()

  clearInterval(function)
  复制代码

• settimeout

  window.setTimeout(function, milliseconds);
  //function为执行的函数 milliseconds为毫秒数
  复制代码

• clearTimeout

  clearTimeout(function)
  //function为被停止的函数
  复制代码

Cookie

什么是Cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息

Cookie 的作用就是用于解决 "如何记录客户端的用户信息"

操作cookie

我们使用document.cookie来对cookie进行读取，创建，删除

创建cookie

document.cookie="username=mxr; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
复制代码

1. 第一个参数为要设置的cookie键值对
2. 第二个参数为设置过期时间
3. path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面

读取cookie

var x = document.cookie;
复制代码

修改cookie

重新为cookie赋值将会覆盖旧的cookie即完成修改

document.cookie="username=cxy; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
复制代码

删除cookie

将日期改为之前的日期即可完成删除

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
复制代码