DOM/BOM/Web APIS 学习总结

重点
DOM 即文档对象模型，一种允许操作文档节点、元素节点，访问和修改当前文档的API（for HTML, XML, SVG）；
BOM 即浏览器对象模型，提供访问、操作浏览器窗口及框架的方法和接口，含所有针对浏览器的 JavaScript 扩展；
Fetch API 提供了一个获取资源的接口（包括跨域请求）；
Ajax(XHR)-(XMLHttpRequest) 使网页应用能快速将增量更新呈现在用户界面上，不需要重载（刷新）整个页面。

参考：通信与存储
HTTP-(Hypertext Transfer Protocol) 即超文本传输协议，一般用于Web浏览器和Web服务器之间的通信；
CORS-(Cross-origin resource sharing) 即跨域资源共享，允许 Web 应用服务器进行跨域访问控制；
WebSockets 用于浏览器和服务器之间交互式全双工通信，无需通过轮询服务器的方式以获得响应的协议及API；Web Storage API 提供机制，使浏览器能以一种比使用Cookie更直观的方式存储键/值对;
IndexedDB 一个用于在浏览器中储存大量结构化数据的 Web API，并提供索引功能以实现高性能查找。

HTML DOM文档

HTML DOM事件和表单

BOM

Fetch API/XHR

Networks Communication

HTTP(Including CORS)

WebSockets

Data Storage

Web Storage API

IndexedDB

BroadCast Channel

Broadcast Channel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

创建或加入某个频道

通过创建一个 BroadcastChannel 对象，一个客户端就加入了某个指定的频道。

let bc = new BroadcastChannel('test_channel');

发送消息

调用 BroadcastChannel 对象上的postMessage() 方法。该方法的参数可以是任意对象。此 API 不会将消息与任何的语义相关联，因此通道的参与者有必要知道预期的消息类型和消息的消费方式

bc.postMessage('This is a test message.');

接收消息

当消息被发送之后，所有连接到该频道的 BroadcastChannel 对象上都会触发 message 事件。该事件没有默认的行为，但是可以使用 onmessage 事件处理程序来定义一个函数来处理消息。

bc.onmessage = function (ev) { console.log(ev); }

与频道断开连接

通过调用 BroadcastChannel 对象的 close() 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。

bc.close()