### 1.选择符API ~~~ （完全支持IE8+ ） someNode.querySelector() // 获得匹配css选择规则的第一个元素 someNode.querySelectorAll() // 得到一个HTMLCollection类型的实例 ~~~  * * * * * ### 2.元素遍历 ~~~ (完全支持IE9+) Node类型的元素集里，会包含各种类型的node节点， 当我们只要Element类型的节点时候就会造成干扰。 childElementCount 返回子元素的个数（所有Element类型的节点个数） firstChild-->firstElementChild lastChild-->lastElementChild previousSibling-->previousElementSibling nextSibling -->nextElementSibling ~~~  * * * * * ### 3.HTML5 #### 3.1 与类相关 >[warning] 查询： `getElementsByClassName() ` 参数是一个包含一个或多个类型的字符串（类名顺序不影响），返回值为 `NodeList` 类型由于每次执行有 `NodeList` 类型返回的函数时，都会运行一次基于文档的查询， 性能有影响，所以尽量减少此类操作。选择将获取的 `NodeList` 类型结果缓存起来。 >[info] 操作类名 以前都是拿到类名字符串，然后解析成其他格式在做处理，现在是可以拿到一个 `DOMTokenList` 类型的 `class` 集 ~~~ add() 如果存在就不添加 contains() 如果存在返回true，不存在返回false remove() 如果存在就删除 toggle() 如果存在就删除，否则添加 ~~~ * * * * * #### 3.2. 焦点管理 `someNode.focus()` 使之获取焦点 * * * * * #### 3.3. `HTMLDocument` 的变化 ~~~ document.readyState 'loading' 文档正在加载中 'complete' 文档加载完成 ~~~ * * * * * #### 3.4 兼容模式 ~~~ document.compatMode 'CSS1Compat' 标准模式 'BackCompat' 混杂模式 ~~~ * * * * * #### 3.5 document.head ~~~ 以前只有 document.body 等，现在有了 document.head 但是要取得html元素的引用 document.documentElement ~~~ * * * * * #### 3.6 自定义数据属性 ~~~ 比如元素上设置了 <div data-a-attr="wdd" ></div> thisNode.dataset.aAttr==='wdd' ~~~ * * * * * #### 3.7 innerHTML, outerHTML * * * * * #### 3.8 children属性 ~~~ 可以得到一个HTMLCollection类型的的集合，相当于把NodeList集合做了个处理 ~~~  * * * * * #### 3.9 scrollIntoView() ~~~ someNode.scrollIntoView(true/false) 参数为: 空或者true，那么该节点的顶部会被滚动到与视口平齐; false，则该节点的底部与视口的底部平齐 ~~~ * * * * * #### 3.10 contains() ~~~ 判断某节点下是否存在另一个节点 document.html.contains(document.body) ~~~ * * * * *