这是我参与更文挑战的第5天，活动详情查看：更文挑战
上文 系统学习DOM（一） 主要学些了 DOM 树节点的基本类型和常用方法，今天继续学习 DOM API。
一、选择符 API
即使用 CSS 选择器来选取 DOM 元素，有如下两个：
- querySelector：返回匹配 CSS 选择器的第一个 DOM 元素
- querySelectorAll：返回匹配 CSS 选择器的全部 DOM 元素
注意：这两个方法除了在 document 上调用，还可以在 element 上调用，表示 在该元素的后代元素范围内匹配选择器，例如：
const element = document.getElementById('xxx')
const item = element.querySelector('.item')
二、元素遍历方法
Element Traversal 规范 在 DOM 元素上定义了一组属性，用来做元素遍历：
- childElementCount：返回子元素个数（不包括文本节点和注释）
- firstElementChild：第一个子元素，即 firstChild
- lastElementChild：最后一个子元素，即 lastChild
- previousElementsibling：前一个兄弟元素，即 previousSibling
- nextElementSibling：后一个兄弟元素，即 nextSibling
三、HTML5 扩充
在 HTML5 中定义了大量 JavaScript API，其中与 DOM 相关的主要有：
1. 类操作
- getElementByClassName：根据 class 来选取元素
- classList：用于操作元素类名，主要方法如下：
- add：添加类名
- contains：判断类名是否存在
- remove：删除类名
- toggle：如果类名存在则删除它，如果不存在则添加它
2. 焦点管理
- document.activeElement：返回当前获得焦点的元素
- document.hasFocus：文档是否获得了焦点
- focus：元素获得焦点
3. HTMLDocument变化
- document.readyState：文档是否加载完，返回 'loading' 或 'complete'
4. 字符集属性
- document.charset：返回文档实际使用的字符集（例如：'UTF-8'）
- document.defaultCharset：返回文档默认字符集（根据默认浏览器和操作系统的设置）
5. 自定义属性
形如 'data-xxx' 的属性，其中 xxx 可以任意命名。
- dataset：获取或设置自定义属性值（例如
<input data-xxx="aaa">，则 input.dataset.xxx === 'aaa'）
6. 插入标记
- innerHTML：获取或设置元素子树
- outerHTML：和 innerHTML 类似，但是会包含该元素
- innerText：读时获取字数 Text 值，写时将子树替换成 Text 节点（会自动转义）
- outerText：和 innerText 类型，但是会包含该元素
7. 滚动
- scrollIntoView：元素上调用，将该元素滚动到视口中
- scrollIntoViewIfNeeded：只有该元素不可见时才滚动，可见时什么也不做
本文继续介绍了 DOM 操作常用 API，前端开发中免不了和 DOM 打交道，熟练掌握这些有助于我们灵活使用，快速开发业务需求。
