第七章：浏览器环境

本章主要包含以下内容：

• BOM (Browser Object Model，即浏览器对象模型)
• DOM (Document Object Model，即文档对象模型)
• 浏览器事件
• XMLHttpRequest对象

7.3 BOM

window

BOM是页面以外事物所拥有的对象集合（即浏览器窗口和桌面屏幕）我们可以通过全局对象window来访问这些对象

• window.navigator
  • navigator 是一个用于反映浏览器及其功能信息的对象
  • navigator.userAgent 用于识别不同的浏览器 （用户代理检测法）
  • 我们一般不用上面的方法判断浏览器版本，因为用户可以对该字符串进行修改
  • 用下面的方法判断功能在浏览器中是否可用

if (typeof window.addEventListener === 'function') {
    // 可用
} else {
    // 不可用
}

• window.location : 用于存储当前载入页面URL信息的对象

  • reload() : 重新载入
    • window.location.href = window.location.href;
    • location = location;
  • assign() : 加载链接，有历史记录
  • replace() : 加载链接，无历史记录

• window.history : 允许我们以有限的权限操作同一个浏览器会话中的已访问页面

  • window.history.length : 查看之前访问了多少页面
  • history.forward(); : 前进
  • history.back(); : 后退
  • history.go(-1); : 正数为前进，负数为后退

• window.frames : 当前页面中所有框架的集合

window.frames === window;
// true

• frames 中每个元素都包含了一个页面，都有各自的window全局对象
• 如果想访问iframe元素的window对象，如下：

window.frames[0];
window.frames[0].window;
window.frames[0].window.frames;
frames[0].window;
frames[0];

• window.top : 可以访问到当前最顶层页面
• window.screen : 提供浏览器以外的环境信息

availHeight:1093
availLeft:0
availTop:23
availWidth:1920
colorDepth:24
height:1200
orientation:ScreenOrientation
pixelDepth:24
width:1920

• 其中，height指的是总分辨率，而 availHeight指的是出去系统菜单以外的子区域

• window.open()/close() : 打开/关闭新的浏览器窗口

• 弹窗

  • alert() : 提示，只有一个确定按钮
  • confirm() : 有两个选项 OK和Cancel，根据选择返回对应布尔值的结果
  • prompt() : 允许用户输入
    • 点Cancel 或 x图标 或 ESC退出，返回null
    • 没有输入点OK 或回车，返回""
    • 有输入点OK 或回车，返回输入的字符串

• 计时器

  • window.setTimeout(a,2000) : 2秒后执行a , 返回id
    • clearTimeout(id); 取消计时器
  • window.setInterval(a,2000) : 每2秒执行一次a ，返回id
    • clearInterval(id); 取消计时器

7.4 DOM

• 节点

  • nodeType : 节点类型，有12种，分别用证书表示

    • 1 ：元素
    • 2 ：属性
    • 3 ：文本
    • 9 ：document

  • nodeName : 节点名称

  • nodeValue : 节点值

  • 根节点 ：document.documentElement

  • hasChildNodes() : 检查是否有子节点

  • hasAttributes() : 检查是否有属性

  • 访问标签中的内容：

    • textContent : 只返回文本
    • innerHTML : 返回标签内的所有内容

  • 快速访问

    • getElementsByTagName()
    • getElementsByName()
    • getElementById()
    • getElementByClassName()
    • querySelector() : 通过css选择器的方式寻找元素
    • querySelectorAll()

  • 兄弟节点，body元素及收尾子节点

document.body;
document.body.nextSibling; // 下一个节点
document.body.previousSibling; // 上一个节点
document.body.firstChild; // 第一个节点
document.body.lastChild; // 最后一个节点

- 遍历`DOM`

function walkDOM(n) {
do {
console.log(n);
if (n.hasChildNodes()) {
walkDOM(n.firstChild);
}
} while (n = n.previousSibling);
}