第12章：BOM

语法糖含义：相当于汉语里面的成语，即用更加简练的言语表达较复杂的含义，在得到广泛接受的情况下，可以提升交流的效率。

window对象

window 对象在浏览器中有两重身份，一个是 ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

窗口关系

top 对象始终指向最上层（最外层）窗口，即浏览器窗口本身。

parent 对象则始终指向当前窗口的父窗口。

self 对象，它是终极 window 属性，始终会指向 window。

窗口位置

现代浏览器提供了 screenLeft 和 screenTop 属性，用于表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是 CSS 像素。

可以使用 moveTo()和 moveBy()方法移动窗口。这两个方法都接收两个参数，其中 moveTo()接收要移动到的新位置的绝对坐标 x 和 y；而 moveBy()则接收相对当前位置在两个方向上移动的像素数。

// 把窗口移动到左上角
window.moveTo(0,0); 
// 把窗口向下移动 100 像素
window.moveBy(0, 100);

窗口大小

outerWidth 和 outerHeight 返回浏览器窗口自身的大小，innerWidth 和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。

document.documentElement.clientWidth 和 document.documentElement.clientHeight 返回页面视口的宽度和高度。

可以使用resizeTo()和resizeBy()方法调整窗口大小。这两个方法都接收两个参数，resizeTo() 接收新的宽度和高度值，而 resizeBy()接收宽度和高度各要缩放多少。

// 缩放到 100×100 
window.resizeTo(100, 100); 
// 缩放到 200×150 
window.resizeBy(100, 50);

视口位置

度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window. scrollX 和 window.pageYoffset/window.scrollY。

可以使用 scroll()、scrollTo()和 scrollBy()方法滚动页面。这 3 个方法都接收表示相对视口距离的 x 和 y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。

// 相对于当前视口向下滚动 100 像素
window.scrollBy(0, 100); 
// 相对于当前视口向右滚动 40 像素
window.scrollBy(40, 0); 
// 滚动到页面左上角
window.scrollTo(0, 0);

导航与打开新窗口

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4 个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。

系统对话框

警告框 alert

确认框 confirm

提示框 prompt ：接收两个参数（要显示给用户的文本，以及文本框的默认值）

alert、confirm、prompt方法调用时代码会停止执行，关闭后才会显示。

location对象

window.location和document.location都指向location，location保存着当前加载文档的信息，也保存着把URL解析未离散片段后能够通过属性访问的信息。

location.search：返回了url中?开始的内容，URLSearchParams可以解析url参数

let qs = location.search; // "? q=javascript&num=10";
let searchParams = new URLSearchParams(qs);
alert(searchParams.toString());   // " q=javascript&num=10"
searchParams.has("num");           // true
searchParams.get("num");           // 10
searchParams.set("page", "3");
alert(searchParams.toString());   // " q=javascript&num=10&page=3"
searchParams.delete("q");
alert(searchParams.toString());   // " num=10&page=3"

location.assign(url)：导航到新URL的操作，同时在浏览器历史记录中增加一条记录，相当于

window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

修改location对象的属性也会修改当前加载的页面：

// 假设当前URL为http://www.wrox.com/WileyCDA/
// 把URL修改为http://www.wrox.com/WileyCDA/#section1
location.hash = "#section1";
// 把URL修改为http://www.wrox.com/WileyCDA/?q=javascript
location.search = "? q=javascript";
// 把URL修改为http://www.somewhere.com/WileyCDA/
location.hostname = "www.somewhere.com";
// 把URL修改为http://www.somewhere.com/mydir/
location.pathname = "mydir";
// 把URL修改为http://www.somewhere.com:8080/WileyCDA/
location.port = 8080;
// 上述除了hash之外，只要修改location的一个属性，就会导致页面重新加载新的URL，修改hash只会添加一条历史记录

location.reload() 它能重新加载当前显示的页面。

location.reload();      // 重新加载，可能是从缓存加载
location.reload(true); // 重新加载，从服务器加载

navigator对象

通常用于确定浏览器的类型

screen对象

客户端显示器的信息，比如像素宽度和像素高度。

history对象

表示当前窗口首次使用以来用户的导航历史记录。

history.go(index of string)

// 后退一页
history.go(-1);
// 前进一页
history.go(1);
// 前进两页
history.go(2);
// 导航到最近的wrox.com页面
history.go("wrox.com");
// 导航到最近的nczonline.net页面
history.go("nczonline.net");
// 后退一页
history.back();
// 前进一页
history.forward();

history.length 这个属性反映了历史记录的数量，包括可以前进和后退的页面。对于窗口或者标签页中加载的第一个页面，history.length == 1.

if(history.length == 1) &#123;
    // 这是用户窗口中的第一个页面
&#125;