JavaScript WebAPI
WebAPI 背景知识
什么是 WebAPI
JavaScript 技术栈主要包含三部分:
- ECMAScript:基础语法部分
- DOM API:操作页面结构
- BOM API:操作浏览器
WebAPI 包含了 DOM 和 BOM。这是由 W3C 组织制定的标准,独立于 ECMAScript 标准。
学习 JavaScript 基础语法主要是为了建立编程思维,而编写复杂的交互式页面则需要 WebAPI 的支持。
什么是 API
API 是一个广义概念,WebAPI 特指 DOM 与 BOM。API 本质上是现成的函数或对象,供开发者直接使用,类似于工具箱。

API 参考文档
可通过 MDN 文档搜索相关 API:https://developer.mozilla.org/zh-CN/docs/Web/API
DOM 基本概念
什么是 DOM
DOM(Document Object Model)是 W3C 标准提供的一系列接口,用于操作网页内容、结构和样式。

DOM 树
页面结构呈树形结构,称为 DOM 树。可以简单理解为类似家谱的层级关系。
如何使用 JavaScript 操作网页内容? 如何使用 JavaScript 操作网页结构? 如何使用 JavaScript 操作网页样式?

获取元素
这部分功能类似于 CSS 选择器。
querySelector
HTML5 新增方法,IE9 及以上版本支持。可复用 CSS 选择器知识,精准获取元素对象。
var element = document.querySelector(selectors);
selectors:有效的 CSS 选择器字符串。- 返回匹配的第一个元素的 Element 对象。
- 若需获取所有匹配元素列表,使用
querySelectorAll()。


