JavaScript BOM 知识点

BOM

浏览器对象模型（Browser Object Model）：
BOM是使用JavaScript开发web应用程序的核心。
BOM提供了与网业功能无关的浏览器功能对象。

1.window对象

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。
这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

a.Global作用域

因为window对象被复用为ECMAScript 的 Global 对象，
所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。比如：
<script>
  var name = 'zhangsan';
  var sayName = function () {
    console.log(this.name);
  }
  console.log(window.name); //zhangsan
  sayName();  //zhangsan
  window.sayName(); //zhangsan
</script>

b.Window窗口

## 窗口位置
screenLeft和screenTop
属性返回窗口相对于屏幕的x和Y坐标(火狐浏览器不支持)
screenX和screenY
属性返回窗口相对于屏幕的x和Y坐标。(ie浏览器不支持，火狐可以使用此属性)
pageXOffset
设置或者返回当前页面相对于窗口显示区左上角的x位置。
pageYOffset
设置或者返回当前页面相对于窗口显示区左上角的y位置。
注意：IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。

## 窗口大小
innerWidth ：页面视图区的宽度
innerHeight ：页面视图区的高度
outerWidth ：浏览器窗口的宽度
outerHeight ：浏览器窗口的高度
注意：IE8及更早IE版本不支持这些属性。

## screen对象
屏幕总宽度/高度(像素单位):
​screen.width
​screen.height
可用宽度/高度(像素单位):
​screen.availWidth
screen.availHeight
颜色深度:
​screen.colorDepth
颜色分辨率:
screen.pixelDepth

c.Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。
语法：
window.open(URL,name,specs,replace)
四个参数：
（1）URL：
要加载的URL
（2）name：目标窗口
指定target属性或窗口的名称。支持以下值：
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称
（3）specs：特性字符串
hannelmode=yes|no|1|0       是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0      是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0       浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels               窗口的高度。最小.值为100
left=pixels                 该窗口的左侧位置
location=yes|no|1|0         是否显示地址字段.默认值是yes
menubar=yes|no|1|0          是否显示菜单栏.默认值是yes
resizable=yes|no|1|0        是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0       是否显示滚动条.默认值是yes
status=yes|no|1|0           是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0         是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0          是否显示浏览器工具栏.默认值是yes
top=pixels                  窗口顶部的位置.仅限IE浏览器
width=pixels                窗口的宽度.最小.值为100
（4）replace：表示新窗口在浏览器历史记录中是否是否替代当前加载页面的布尔值（这个参数只有在不打开新窗口时才会使用）
true：URL 替换浏览历史中的当前条目。
false： URL 在浏览历史中创建新的条目。
<button οnclick="openWindow()">打开新窗口</button>
<button οnclick="closeWindow()">关闭窗口</button>
<script>
  function openWindow() {
    // 设置一个全局变量接收新窗口的打开
    w = window.open('https://www.baidu.com', '_blank', 'width=600,height=600', 'false');
    // 调整窗口大小 浏览器窗口的新高度和新宽度
    w.resizeTo(400,400);
    // 移动窗体 接受的是新位置的x和y坐标值
    w.moveTo(100, 100);
  }
  function closeWindow() {
    // 关闭窗口
    w.close()
  }
</script>

d.系统对话框

## alert()警告框
alert()接收一个要显示给用户的字符串。alert()只接收一个参数。
对话框只有一个“OK”（确定）按钮。
如果传给 alert()的参数不是一个原始字符串，则会调用这个值的 toString()方法将其转换为字符串。
警告框（alert）通常用于向用户显示一些他们无法控制的消息，比如报错。用户唯一的选择就是在看到警告框之后把它关闭。

## confirm()确认框
确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。
单击ok按钮：返回true
单击cancel按钮/单机打叉的图标：返回false
<script>
  var result = confirm('你确定吗?');
  if (result) {
    console.log('确定');
  }else{
    console.log('取消');
  }
</script>

## prompt()提示框
提示用户输入信息

有ok、cancel按钮、一个文本框
ok按钮：prompt()会返回文本框的值
Cancel 按钮/对话框被关闭： prompt()会返回 null。

prompt()方法接收两个参数：
*要显示给用户的文本
*文本框的默认值（可以是空字符串）
<script>
  var result = prompt("你叫什么名字?");
  if (result) {
    console.log(result);
  }else{
    console.log('取消');
  }
</script>

e.location

location对象:提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。
location是个神奇的对象，既是window的对象也是document的对象。经过我们的对比发现，直接使用location对象也可以。
<script>
  console.log(window.location === document.location); //true
  console.log(location === document.location);    //true
  console.log(location === window.location);    //true
</script>

## 属性
host                返回服务器名称和端口号
hostname      返回不带端口号的服务器名称
href                返回当前加载页面的完整URL
pathname      返回URL的目录和文件名
port            返回URL中指定的端口号
protoco     返回页面使用的协议
search        返回URL的查询字符串。这个字符串以问号开头

## 方法
assign()
递一个url参数，打开新url，并在浏览记录中生成一条记录。    
replace()
参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。
reload()  
重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。
如果参数为true，强制从服务器中重新加载。
<button>跳转页面</button>
<button>替换页面</button>
<button>刷新页面</button>
<script>
  var btn = document.getElementsByTagName('button');
  btn[0].onclick = function () {
    location.assign('./test2.html')
  }
  btn[1].onclick = function () {
    location.replace('./test2.html')
  }
  btn[2].onclick = function () {
    location.reload()
  }
</script>

f.history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，
不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,
注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。
## length         
返回历史列表中的网址数
注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。
## back()         
加载 history 列表中的前一个 URL
## forward()     
加载 history 列表中的下一个 URL
## go()         
加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

g.间歇调用和超时调用

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。
## setTimeout()
该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。
可以通过clearTimeout(ID);     延时
参数：
*要执行的代码
*以毫秒表示的时间
<script>
  var id = setTimeout(() => {
    console.log('Hello World');
  }, 1000);//一秒后输出
  console.log(id);
  // 清除超时调用
  clearTimeout(id);
</script>

## setInterval()
按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。
调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。
参数：
*要执行的代码
*以毫秒表示的时间
例子：动态地显示时间
<script>
  var div = document.createElement('div');
  // 间歇调用
  var id = setInterval(() => {
    div.innerHTML = new Date().toLocaleString();
  }, 1000);
  document.body.appendChild(div);
  // 清除计时器
  clearInterval(id);
</script>