前面学习了标准库，实际上标准库就是 JS 官方提供的，用于做一些操作的方法，比如操作数组，操作字符串，这些都是 JS 官方提供的 API，当我们再要使用这些功能的时候，直接调用标准库里面的方法即可，但是这里有一些问题，我们要做的是浏览器开发，我们只知道如何如何让浏览器运行 JS，那如何让 JS 来操作页面上的元素呢？
实际上，JS 本身是无法操作浏览器中的元素的，浏览器中的元素都是浏览器来渲染的，所以浏览器提供了一些方法，我们通过浏览器提供的这些方法就可以操作页面中的元素，这些方法实际上就是 WEBAPI。
WEBAPI 是浏览器提供的接口，是依赖于浏览器环境的，所以如果以后要在 node 环境下使用 JS，WEBAPI 将失效，如果读者并不理解什么是 node 环境，那现在就不用管。
所以 WEBAPI 实际上就是浏览器给你提供的很多对象和函数，这些对象和函数是专属于浏览器的，也只能在浏览器环境下使用。并且，WEBAPI 这个东西，由于是浏览器提供的，所以不同的浏览器提供的可能都不一样，可能有一些 API 在这浏览器上可以用，在另一个浏览器上就没用了，这都是有可能的。
WEBAPI 提供的接口非常非常多，我们不需要全部学习，我们只需要学习常用的，能够满足我们日常需求即可。如果有一些需求用已经学习过的 API 无法实现，那就需要查其他的解决方案。如果有遇到了未知的 WEBAPI，也可以去 MDN 查询。同时，在真正的开发中，我们更多使用框架，不太会使用原生 JS，所以不需要刻意记忆。
WEBAPI 由于内容过多，所以大致可以分为两部分，DOM 和 BOM，其中 DOM 其实就是 document object model，即文档对象模型，也就是用于操作文档的，这里的文档当然就是网页啦，比如获取某个元素，修改某个元素的属性，这些都可以做到。而 BOM 就是 browser object model，就是浏览器对象模型，就是可以用于操纵浏览器的 API，比如关闭当前页面，得到当前网页地址。
最早只有 BOM，DOM 是后来从 BOM 中分离出去的。
实际上，WEBAPI 和标准库是两个东西，标准库实际上是 ECMAScript，是 ECMA 这个组织发布的标准，而 WEBAPI 实际上是 W3C 发布的标准。W3C 发布了 WEBAPI 的标准，然后各大浏览器厂商就负责实现这些接口，虽然不同的浏览器实现细节上可能不太一样，但接口肯定都是一样的，当然，IE 除外。
我们学习 WEBAPI 主要是学 DOM，DOM 本质上就是将 HTML/XML 文档用对象模型表示，也就是把一个一个 HTML 元素看做是一个对象，包括注释，文本，属性都是对象，把这些对象形成一个特定的结构联系起来，这就是对象，每个对象都称为 DOM 对象。
DOM 对象又称为 Node 节点，所以 DOM 对象也可以称为 DOM 节点。这里尤其注意区分元素和节点的关系，节点里面包含了元素节点，但节点不止有元素节点。
节点的类型：
- 文档类型节点（document type）：在 HTML 5 中，这个文档类型节点是
<!DOCTYPE html> - 文档节点（document）：表示整个文档
- 注释节点（comment）：注释内容
- 元素节点（Element）：页面上的元素，都是元素节点
- 文本节点（text）：页面上所有的文本内容，都是文本节点
- 属性节点（attribute）：每个元素的每一个属性，都是一个属性节点
- 文档片段节点（document fragment）：先别管
一个 HTML/XML 文档，可以全部拆分为以上的所有节点
以上的所有节点可以包含网页的所有内容，也就是一个网页的所有内容都可以划分为这些节点，这些节点都是有关系的，这些节点之间的关系就是 DOM 树
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<p>lorem</p>
</body>
</html>
DOM 树的根节点为 document