Java Web——JS中的BOM

1. Web API概述

Web API 是指浏览器提供的一套接口，这些接口允许开发人员使用 JavaScript（JS）来操作浏览器功能和页面元素。通过 Web API，开发人员可以与浏览器进行交互，以实现更复杂的功能和效果。

1.1. 初识Web API

JavaScript语言有三部分组成，分别是ECMAScript、BOM、DOM，其中ECMAScript是JavaScript语言的核心，它的内容就是前面学到的基本语法、函数、对象这些。总的关系图如下

---

1.2. Web API 和 API 的关系

1. API

API（Application Programming Interface，应用程序编程接口）是一种预先定义的函数或接口，由某个软件开放给开发人员使用，帮助开发者实现某种功能。API是给程序员提供的第一种工具，以便能更轻松的实现想要完成的功能。它隐藏了软件系统的内部工作机制细节，只暴露有限的接口给外部调用。

举个简单的例子：

假设你是一名开发人员，想要开发一个手机应用程序，让用户能够查询天气信息。你可以使用某个天气预报网站或API提供的接口，这样你就可以在应用程序中调用该接口来获取天气信息。这个天气预报网站或API提供了一个预先定义的函数或接口，例如“获取天气信息”（getWeatherInfo），它隐藏了内部工作机制的细节，只暴露了一个接口给外部调用。在你的应用程序中，你可以调用这个“获取天气信息”的接口，并提供一个城市名称作为参数。当你的应用程序调用这个接口时，它会返回该城市的天气信息，例如温度、天气状况等。通过使用这个天气预报网站或API的接口，你就可以轻松地实现获取天气信息的功能，而不需要自己编写所有的代码来查询天气信息。这样，你就可以将更多的时间和精力集中在开发应用程序的其他功能上。

---

1. Web API

Web API 是针对浏览器的 API，它是由浏览器提供的接口，用于在 JavaScript 中与浏览器进行交互，以实现各种浏览器功能和页面元素的操作。

Web API 被封装成了对象，通常是全局对象，例如 `window` 或 `navigator` 等。这些对象具有一系列的属性和方法，开发人员可以通过调用这些属性和方法来使用 Web API。

例如，`window` 对象提供了一些与窗口和文档相关的属性和方法，例如 `alert()` 方法用于显示警告框，`document` 对象提供了一些与文档结构相关的属性和方法，例如 `getElementById()` 方法用于获取指定 ID 的元素。通过使用 Web API，开发人员可以控制浏览器的行为、操作页面元素、进行网络请求等各种功能。因此，Web API 是 JavaScript 在 Web 开发中非常重要的工具，它使得开发人员能够轻松地实现各种功能和效果。

---

2. DOM

2.1. DOM概念

DOM（Document Object Model）是一种编程接口，它将HTML文档中的每个标签元素都视为一个对象。这些对象具有许多属性和方法，可以通过编程操作这些属性或调用这些方法来动态更新HTML文档的内容、结构和样式，从而为网页特效和用户交互提供技术支持。

简单来说，DOM是一种用于修改HTML的动态技术，它的目的是在网页中实现交互式效果和用户交互。通过使用DOM，开发人员可以创建和修改网页中的元素，改变它们的属性、内容和样式，以及添加或删除网页中的节点和元素。这些操作可以动态地改变网页的内容和外观，从而实现各种交互式效果和用户界面设计。

比如下面这个例子：

上述的例子中当用户分分别点击【开始】或【结束】按钮后，通过右侧调试窗口可以观察到 html 标签的内容在不断的发生改变，这便是通过 DOM 实现的。

---

2.2. DOM树

DOM树（Document Object Model Tree）是指网页文档中所有元素的层次结构。在这个结构中，每个HTML标签、文本节点和属性都作为一个节点表示，形成一个树状结构。DOM树从网页的根节点（对应于HTML文档的``标签）开始，逐级向下表示网页的结构。每个节点都是一个对象，可以通过JavaScript或其他脚本语言进行访问和操作。

通过DOM树，网页开发者可以使用JavaScript和其他脚本语言来操作和修改网页中的各个元素，例如修改文本、属性、样式等。因此，DOM树在网页开发中扮演着非常重要的角色，它是网页的基础架构，为网页开发提供了强大的操作性和灵活性。

---

1. DOM节点

DOM节点是文档树中的基本组成部分，每个节点都是一个DOM对象。在HTML文档中，节点可以包括元素节点、属性节点和文本节点等。

1. 元素节点：这些节点对应于HTML标签，例如、
   、等。它们表示HTML文档中的不同部分，如头部、主体和特定元素。
2. 属性节点：这些节点是HTML标签属性的表示，如标签的href属性或
   标签的class属性。属性节点提供了关于元素的额外信息，例如元素的样式或行为。
3. 文本节点：这些节点代表HTML标签中的文本内容，如