JavaScript Web API
Web API 是什么
JavaScript 技术栈里,通常会把内容分成三块:
- ECMAScript:语法和基础能力
- DOM API:处理页面结构
- BOM API:处理浏览器窗口和环境
Web API 说的就是 DOM 和 BOM。这部分由 W3C 制定标准,和 ECMAScript 不是一回事。
学 JavaScript 语法,是为了把编程思维立起来;真要做页面交互,还是得靠 Web API。
API 是什么
API 是一个更大的概念,简单理解就是'现成可用的接口'。Web API 里最常见的就是 DOM 和 BOM 相关接口。平时查文档、找方法,基本都在跟这些接口打交道。

查文档
常用的参考文档是 MDN:
https://developer.mozilla.org/zh-CN/docs/Web/API
遇到不熟的方法,先搜这里,效率比翻零散教程高得多。
DOM 的基本概念
什么是 DOM
DOM(Document Object Model)是一组用于操作网页内容、结构和样式的接口。网页被浏览器解析后,不再只是 HTML 文本,而是可以被 JavaScript 直接读写的一棵对象树。

DOM 树
页面结构本来就是层级关系,浏览器会把它组织成树,通常叫 DOM 树。你可以把它理解成一张从上到下展开的关系图:父节点、子节点、兄弟节点都能顺着查。
这也是为什么下面这几个问题都能落到 DOM 上:
- 怎么改页面内容
- 怎么改页面结构
- 怎么改页面样式

获取元素
这部分最常用的思路,和 CSS 选择器很像。
querySelector
querySelector 是 HTML5 新增的方法,IE9 及以上支持。它可以直接复用 CSS 选择器,适合拿第一个匹配到的元素。
var element = document.querySelector(selectors);


