1. 浏览器对象 BOM
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的 Window 对象是BOM的顶层对象，其他对象都是该对象的子对象（如 Screen、Location、History、Navigator 等）。
1.1 Window 对象
// 打开窗口
window.open(url,target,param)
// 关闭窗口
window.close()
1.2 Location 对象
Location 对象提供 URL 相关的信息和操作方法。通过 window.location 和 document.location 属性得到对象。
// 当前网址为http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol
// "http:"
document.location.host
// "www.example.com:4097"
document.location.hostname
// "www.example.com"
document.location.port
// "4097"
document.location.pathname
// "/path/a.html"
document.location.search
// "?x=111"
document.location.hash
// "#part1"
document.location.username
// "user"
document.location.password
// "passwd"
document.location.origin
// "http://user:passwd@www.example.com:4097"
// 跳转到新网址
document.location.href = 'http://www.example.com';
// 滚动到新的锚点
document.location.href = '#top';
document.location.assign('http://www.example.com'); // 跳转到新的网址
document.location.replace('http://www.example.com'); // 跳转到新的网址,并在浏览历史删除当前网址
window.location.reload(true); // 向服务器重新请求当前网址
1.3 History 对象
window.history 指向 History 对象，表示当前窗口的浏览历史。
// 访问过的网址长度
window.history.length
// 移动到上一个网址，等同于点击浏览器的后退键
history.back()
// 移动到下一个网址，等同于点击浏览器的前进键
history.forward()
// 接受一个整数作为参数，移动到参数指定的网址
history.go(-1) // back
history.go(1) // forward
history.go() //相当于默认为0，刷新页面
// 在历史中添加一条记录
window.history.pushState(state, title, url)
// 修改当前记录
window.history.replaceState(state, title, url)
每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。注意，仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
// 添加监听函数
window.addEventListener('popstate', callback)
1.4 Screen 对象
1.5 Navigator 对象
2. Document 对象
Document Object Model（DOM），文档对象模型，其由节点组成的。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
DOM 节点分类：
文本节点（文本）：HTML标签中的文本内容（包括空格/换行）
DOM 节点获取：
获取直接节点
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelectorAll()
获取关系节点
下一个兄弟节点：节点.nextElementSibling || 节点.nextSibling
前一个兄弟节点：节点.previousElementSibling || 节点.previousSibling
任意兄弟节点：节点.parentNode.children[index]
第一个子节点：节点.firstElementChild || 节点.firstChild
最后一个子节点：节点.lastElementChild || 节点.lastChild
DOM 节点操作：
创建节点：document.createElement("标签名")
末尾插入节点：节点.appendChild(新的子节点)
定位插入节点：节点.insertBefore(新的子节点, 作为参考的子节点)
DOM 节点属性操作：
获取属性：节点.属性名或节点.getAttribute("属性名称")
设置属性：节点.属性名=XXX或节点.setAttribute("属性名", "属性值")
删除属性：节点.removeAttribute(属性名)
3. URL 对象
url的合法对象分为：
URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）
语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）
url编码和解码即合法与不合法之间的转换：
encodeURI()方法用于转码整个 URL，转码元字符和语义字符之外的字符
encodeURIComponent()方法用于转码 URL 的组成部分，转码语义字符之外的所有字符
decodeURI()方法用于整个 URL 的解码
decodeURIComponent()方法用于URL 片段的解码
URL接口是一个构造函数，通过window.URL可以拿到构造函数。
var url = new URL('http://www.example.com/index.html');
url.href // "http://www.example.com/index.html"
实例属性：
var url = new URL('http://user:passwd@www.example.com:4097/path/a.html?x=111#part1');
url.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
url.protocol // "http:"
url.hostname // "www.example.com"
url.host // "www.example.com:4097"
url.port // "4097"
url.origin // "http://www.example.com:4097"
url.pathname // "/path/a.html"
url.search // "?x=111"
url.searchParams // URLSearchParams {}
url.hash // "#part1"
url.password // "passwd"
url.username // "user"
4. URLSearchParams 对象
URLSearchParams 对象用来构造、解析和处理 URL 的查询字符串（即 URL 问号后面部分）。
// 方法一：传入字符串
var params = new URLSearchParams('?foo=1&bar=2');
// 方法二：传入数组
var params = new URLSearchParams([['foo', 1], ['bar', 2]]);
// 方法三：传入对象
var params = new URLSearchParams({'foo' : 1 , 'bar' : 2});
var params = new URLSearchParams({'foo': 1 , 'bar': 2});
// 追加一个查询参数
params.append('baz', 3);
// 删除指定的查询参数
params.delete('bar');
// 查询字符串是否包含指定的键名，返回布尔值
params.has('bar') // false
// 设置查询字符串的键值
params.set('foo', 2);
// 读取查询字符串里面的指定键
params.get('foo') // "2"
// 读取查询字符串里面的指定键的所有键值，返回数组
var params = new URLSearchParams('?foo=3&foo=2&foo=1');
params.get('foo') // "3"
params.getAll('foo') // ["3", "2", "1"]
// 对查询字符串里面的键进行排序，规则是按照 Unicode 码点从小到大排列。
params.sort();
// for...of遍历
params.keys()
params.values()
params.entries()
5. XMLHttpRequest 对象
AJAX 通信
// 创建实例，不含参数
var xhr = new XMLHttpRequest();
// 指定建立 HTTP 连接的细节，方法类型、服务器地址、是否异步
xhr.open('GET', '/endpoint', true);
// 回调函数 - 监听通信状态
xhr.onreadystatechange = function () {
// 通信成功时，状态值为4
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
// 回调函数 - 发生错误
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
// 使用send()方法，实际发出请求
xhr.send(null);
<form action="/handling-page" method="post">
<div>
<label for="name">用户名：</label>
<input type="text" id="name" name="user_name" required/>
</div>
<div>
<label for="passwd">密码：</label>
<input type="password" id="passwd" name="user_passwd" />
</div>
<div>
<input type="submit" id="submit" name="submit_button" value="提交" />
</div>
</form>
表单提交以键值对的形式，键名是控件的name属性，键值是控件的value属性。
表单以 GET 形式提交，所有键值对会以 URL 的查询字符串形式，提交到服务器，例如/handling-page?user_name=张三&user_passwd=123&submit_button=提交
表单以 POST 形式提交，所有键值对会连接成一行，作为 HTTP 请求的数据体发送到服务器，例如user_name=张三&user_passwd=123&submit_button=提交
FormData() 构造函数的参数是一个表单元素，如果参数为空，则默认为空表单。
const formdata = new FormData(form);
表单实例方法（以上述表单为例）：
const myForm = document.getElementById('myForm');
const formData = new FormData(myForm);
// 获取指定键名对应的键值，参数为键名
formData.get('user_name');
// 返回一个数组，表示指定键名对应的所有键值
formData.getAll();
// 设置指定键名的键值
formData.set('user_name','Envision');
// 删除一个键值对
formData.delete('user_name');
// 添加一个键值对。注意，如果键名重复，则会生成两个相同键名的键值对！！！
formData.append('user_name','Shen');
// 返回一个布尔值，表示是否具有该键名的键值对
formData.has('user_name');
// 返回一个遍历器对象，用于for...of循环遍历。
formData.keys(); formData.values();formData.enties();
<!-- 文件上传实例 -->
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">选择图片文件</label>
<!-- multiple属性可以指定可以一次选择多个文件；如果没有这个属性，则一次只能选择一个文件。-->
<input type="file" id="file" name="myFile" multiple>
</div>
<div>
<input type="submit" id="submit" name="submit_button" value="上传" />
</div>
</form>
<script>
var fileSelect = document.getElementById('file');
var files = fileSelect.files;
// 新建一个 FormData 实例对象，模拟发送到服务器的表单数据
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 只上传图片文件
if (!file.type.match('image.*')) {
continue;
}
formData.append('photos[]', file, file.name); // 一般两个参数，但如果第二个参数是文件，还可使用第三个参数，表文件名。
}
// 使用 Ajax 向服务器上传文件
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.php', true);
xhr.onload = function () {
if (xhr.status !== 200) {
console.log('An error occurred!');
}
};
xhr.send(formData);
</script>
7. ArrayBuffer 对象
8. Blob 对象
// 构建对象 - options 为类型，如 {type : 'text/html'}
const blob = new Blob(array [, options])
// 举例 - 保存 json 数据
const obj = { hello: 'world' };
const blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});
Blob 对象不能直接下载成文件，需要通过 URL.createObjectURL() 转化成一个临时 URL。这个 URL 以blob://开头，表明对应一个 Blob 对象，协议头后面是一个识别符，用来唯一对应内存里面的 Blob 对象。
// 举例 - 通过为拖放的图片文件生成一个 URL，产生缩略图
var droptarget = document.getElementById('droptarget');
droptarget.ondrop = function (e) {
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var type = files[i].type;
if (type.substring(0,6) !== 'image/')
continue;
var img = document.createElement('img');
img.src = URL.createObjectURL(files[i]);
img.onload = function () {
this.width = 100;
document.body.appendChild(this);
URL.revokeObjectURL(this.src);
}
}
}
9. File 对象
File 对象代表一个文件，用来读写文件信息，可以说是一种特殊的 Blob 对象。
// 最常见的使用场合是表单的文件上传控件（<input type="file">），用户选中文件以后，浏览器就会生成一个文件数组，元素都是File对象
const file = document.getElementById('fileItem').files[0]; // File对象
// 通过构造对象new File(array, name [, options])生成File对象，array文件内容，name表示文件名或文件路径
const file = new File(['foo'], 'foo.txt', {type: 'text/plain',})
实例属性：
实例方法：
FileList 对象是一个类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。FileList 对象主要出现的两个场合：
文件控件节点的 files 属性，返回一个 FileList 实例。
拖拉一组文件时，目标区的 DataTransfer.files 属性，返回一个 FileList 实例。
FileList 的实例是一个类似数组的对象，可以直接用[]运算符，即 myFileList[0] 表示第一个 File 对象。
10. FileReader 对象
FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。
var reader = new FileReader();
实例属性：
FileReader.error：读取文件时产生的错误对象
FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
FileReader.onabort：abort事件（用户终止读取操作）的监听函数。
FileReader.onerror：error事件（读取错误）的监听函数。
FileReader.onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。
FileReader.onloadstart：loadstart事件（读取操作开始）的监听函数。
FileReader.onloadend：loadend事件（读取操作结束）的监听函数。
FileReader.onprogress：progress事件（读取操作进行中）的监听函数。
实例方法：
FileReader.abort()：终止读取操作，readyState属性将变成2。
FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。
FileReader.readAsBinaryString()：读取完成后，result属性将返回原始的二进制字符串。
FileReader.readAsDataURL()：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于<img>元素的src属性。注意，这个字符串不能直接进行 Base64 解码，必须把前缀data:*/*;base64,从字符串里删除以后，再进行解码。
FileReader.readAsText()：读取完成后，result属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8。
