【前端学习笔记】Web API——BOM与DOM

前置知识

JavaScript = ECMAscript + BOM + DOM

ECMAscript：相当于JS的执行标准。
BOM：浏览器对象模型。BOM 提供了与浏览器窗口交互的接口，这些接口独立于网页内容。BOM的对象允许JavaScript访问和操作浏览器窗口，是所有JavaScript对象、方法和属性的根。BOM的核心对象有：

• window：表示浏览器的一个实例，是JavaScript中的全局对象，所有在全局作用域中声明的变量、函数都是window对象的成员。
• navigator：包含有关浏览器的信息。
• location：提供了当前URL的信息，并允许将浏览器重定向到新的URL。
• screen：提供关于用户屏幕的信息。
• history：允许操作浏览器的会话历史（即浏览器的前进、后退按钮）。

DOM：文档对象模型。DOM 是浏览器提供的一个接口，用于访问和操作网页的内容。当浏览器加载一个网页时，它会创建一个文档对象模型，即一个包含整个页面内容的结构化节点树。这允许开发者使用JavaScript动态访问和改变页面的结构、样式和内容。DOM定义了节点和对象的属性、方法，这些属性、方法可以动态地更新页面内容，响应用户的交互。

BOM (浏览器对象模型)

• BOM 是浏览器功能的接口：BOM 提供了一组与浏览器功能直接相关的对象，允许开发者控制和访问浏览器的窗口、标签、导航历史、位置、屏幕、定时器等功能。
  浏览器窗口的组件：BOM 的主要组成部分包括 window、location、history、navigator 等对象，这些都是用来与浏览器的窗口和其他非页面内容功能交互的工具。

DOM (文档对象模型)

• DOM 是操作 HTML（和XML）的接口：DOM 将 HTML 和 XML 文档呈现为一个树形结构，每个节点代表文档中的一个部分（如元素、属性、文本等）。DOM 允许通过 JavaScript 动态访问和修改这些节点，进而改变文档的结构、内容和样式。
  内容的动态访问和修改：DOM 提供了方法和属性来动态创建、删除、修改文档的节点，从而实现页面内容的动态更改。这是现代动态网页应用的基础。

基于 JavaScript

• JavaScript 作为编程语言：BOM 和 DOM 都可以通过 JavaScript 访问和操纵。事实上，JavaScript 是与这些对象模型交互的主要工具。通过 JavaScript，开发者可以写脚本来响应用户事件，如点击、滚动、键盘输入等，以及修改 DOM 或使用 BOM 提供的浏览器功能。

浏览器的角色

• 浏览器作为展示平台：浏览器的核心功能是解析 HTML 和 CSS，执行 JavaScript，渲染页面，展示给用户。浏览器通过实现 BOM 和 DOM 接口，使得网页不仅可以展示静态内容，还能进行丰富的交互和动态功能。

一、浏览器对象模型 BOM

浏览器对象模型，Browser Object Model（BOM），可以理解为封装浏览器功能的接口，它提供操作浏览器/使用浏览器功能的方法。BOM 是指所有与浏览器窗口相关的对象，除了文档对象模型（DOM），它还包括浏览器窗口和框架、导航器、位置和历史记录等一系列对象。BOM 提供了与浏览器交互的接口，为了能够让JavaScript能控制浏览器的行为，允许开发者控制浏览器的行为以及访问浏览器窗口之外的数据。

1.JS执行机制

总的来说：JS是单线程语言，一个任务结束才能执行下一个任务，因而会造成阻塞，所以提出同步异步解决方案。

事件循环 Event Loop：后面再学吧。。。。