重点
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文档

DOM/BOM/Web APIS 学习总结 - 图1


HTML DOM事件和表单

DOM/BOM/Web APIS 学习总结 - 图2


BOM

DOM/BOM/Web APIS 学习总结 - 图3


Fetch API/XHR

DOM/BOM/Web APIS 学习总结 - 图4


Networks Communication


HTTP(Including CORS)

DOM/BOM/Web APIS 学习总结 - 图5


WebSockets

DOM/BOM/Web APIS 学习总结 - 图6


Data Storage


Web Storage API

DOM/BOM/Web APIS 学习总结 - 图7


IndexedDB

BroadCast Channel

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

DOM/BOM/Web APIS 学习总结 - 图8

创建或加入某个频道

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

  1. let bc = new BroadcastChannel('test_channel');

发送消息

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

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

接收消息

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

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

与频道断开连接

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

  1. bc.close()