BOM和DOM的简介
JavaScript是一种网络脚本（客户端）语言，实际上包含了三部分的内容：ECMAScript，BOM和DOM。
ECMAScript，描述该语言的语法和对象；- 浏览器对象模型（
BOM），描述与浏览器进行交互的方法和接口； - 文档对象模型（
DOM），描述处理网页内容的方法和接口。
BOM汇总
BOM（浏览器对象模型）提供了很多东西（对象），用于访问浏览器的功能，这些对象与具体的网页内容无关。
window对象
BOM的核心对象是window对象，表示的是浏览器的一个实例。在浏览器中，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。因此，全局定义的变量、对象或函数，window都有权访问。
测试的JS代码如下：
var name = "zhenye"
function sayHi(){
console.log("Hi," + this.name + "!")
}
console.log(window.name)
console.log("---分隔线---")
window.sayHi();
测试效果图如下：
与窗口相关的方法汇总如下：
| 方法表达式 | 含义 |
|---|---|
| open(url) | 打开一个新窗口，url为新窗口的地址栏 |
| close() | 关闭当前窗口 |
| setTimeOut(fun,time) | 超时调用，延迟time后调用方法fun |
| clearTimeOut(fun) | 清除该超时调用 |
| setInterval(fun,time) | 定时调用，每隔time后调用方法fun |
| clearInterval(fun) | 清除该定时调用 |
| confirm(message) | 打开系统对话框，提示内容为message |
测试定时和延时方法的代码如下：
var intervalFun = setInterval(function(){
console.log("这是定时方法，每隔3秒打印当前时间：" + new Date().toLocaleTimeString())
},3000);
var setTimeOutFun = setTimeout(function(){
console.log("这是延时方法，10秒后的时间是：" + new Date().toLocaleTimeString());
console.log("即将清除定时方法---" + clearInterval(intervalFun))
},10000);
定时和延时方法的测试效果图如下：
location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。它既是window对象的属性，也是document对象的属性。
location中常用的汇总方法如下：
| 方法表达式 | 含义 |
|---|---|
| assign(String url) | 改变当前页面的url |
| replace(String url) | 改变当前页面的url,无法跳回前一页 |
| reload(Boolean force) | 重新加载页面，force表示强制重新加载 |
navigator对象
navigator对象，是所有支持JavaScript的浏览器所共有的对象，用来可以识别客户端浏览器。常用属性或方法汇总如下：
| 属性或方法 | 含义 |
|---|---|
| appName | 完整的浏览器名称 |
| cookieEnabled | 是否启用了cookie |
| plugins | 浏览器中安装的插件数组 |
| hasPlugin(pluginName) | 浏览器是否安装了该插件 |
navigator对象测试代码如下：
console.log("浏览器名称：" + navigator.appName);
var count = navigator.plugins.length;
console.log("浏览器的插件有：" + count + "个");
for (var i = 0;i < count;i++) {
console.log("该插件的名称为：" + navigator.plugins[i].name);
}
navigator对象测试效果图如下：
screen对象
screen对象，是用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。常用属性汇总如下：
| 属性 | 含义 |
|---|---|
| height | 屏幕的像素高度 |
| width | 屏幕的像素宽度 |
history对象
history对象保存着用户上网的历史记录，是从窗口被打开的那一刻算起的。常用属性或方法汇总如下:
| 属性或方法 | 含义 |
|---|---|
| length | 保存着所有页面历史记录的数量 |
| go(num) | 表示前进num页—num为负数时后退 |
| back() | 后退一页，相当于go(-1) |
| forward() | 前进一页，相当于go(1) |
DOM汇总
DOM的含义及类型
DOM（文档对象模型），是针对HTML和XML文档的一个API汇总。DOM是将页面看成一个层次化的节点树，我们对页面进行的操作，可以看成是对这个节点树的增删改操作。
所有的网页内容，实际都是类似如下结构的HTML文件：
<html>
<head>
<title>我是标题</title>
</head>
<body>
<p>我是正文</p>
</body>
</html>
这个HTML文件，经过浏览器解析后的效果图如下：
在HTML中，每一个标签对应是文档元素中的一个节点，如上面的<html>标签就是文档元素的根节点。
XML与HTML的不同点，就是HTML文档的根节点，必须是<html>。
XML和HTML中标签的类型有：Node,Document,Element,Text,Comment,CDATASection,DocumentType,DocumentFragment,Attr。
它们的含义汇总如下：
| 类型名称 | 含义 |
|---|---|
| Node | 节点，JavaScript的基本类型 |
| Document | 文档，document对象是HTMLDocument的一个实例，表示整个页面 |
| Element | 元素，提供对元素的标签名、子节点及特性的访问功能 |
| Text | 文本，标签内部的纯文本内容 |
| Comment | 注释，<!--注释内容-->中的注释内容 |
| CDATASection | XML中的CDATA区域，<!CDATA[不编译的内容]> |
| DocumentType | <!DOCTYPE HTML>中定义的内容 |
| DocumentFragment | 轻量级文档，可包含和控制节点 |
| Attr | 属性，用来操作节点的属性 |
DOM操作技术
在前面的HTML示例中实践DOM操作技术，具体代码如下：
<html>
<head>
<title>我是标题</title>
</head>
<body>
<p>我是正文</p>
<script>
var body = document.getElementsByTagName("body")[0];
// 给body添加3个div
for (var i = 0;i < 3;i++){
var div = document.createElement("div");
div.id = "div-" + i;
div.textContent = "自定义div的内容(" + i + ")";
body.appendChild(div);
}
// 给body中的div1，添加一个注释
var div2 = document.getElementById("div-1");
var comment = document.createComment("这是注释的内容");
div2.appendChild(comment);
</script>
</body>
</html>
这段代码的实际效果图如下：
DOM的选择符API
类似于前面样例中方法getElementById()和getElementsByTagName()可以选取特定元素，还有一种更加通用的方法，就是通过CSS选择符查询DOM文档取得特定元素的引用。
| 方法名称 | 方法作用 |
|---|---|
| querySelector() | 返回与传入参数（CSS选择符）定义的模式匹配的第一个元素 |
| querySelectorAll() | 返回与传入参数（CSS选择符）定义的模式匹配的元素数组 |
| matchesSelector() | 调用元素与传入参数（CSS选择符）定义的模式匹配时返回true |
CSS选择符API的测试代码如下：
<html>
<head>
<title>CSS选择符API测试</title>
</head>
<body>
<div id="div-1" class="div-class">div-1的内容</div>
<div id="div-2" class="div-class">div-2的内容</div>
<div id="div-3" class="div-class">div-3的内容</div>
<div id="div-4" class="div-class">div-4的内容</div>
<div id="div-5" class="div-class">div-5的内容</div>
<script>
// querySelectorAll()的实践
// 查找所有标签名为div的元素
var divs = document.querySelectorAll("div");
console.log("div元素的个数为：" + divs.length);
//取得id为"div-3"的元素
var div3 = document.querySelector("#div-3");
console.log("id为div-3的元素，其文本内容为：" + div3.textContent);
// 取得类名为"div-class"的第一个元素
var firstDiv = document.querySelector(".div-class");
console.log("类名为div-class的第一个元素，其文本内容为：" + firstDiv.textContent);
</script>
</body>
</html>
测试效果图如下：
