1. 选择符API
querySelector()
返回匹配的第一个元素，接收一个 CSS 选择符。没有找到返回 null.
querySelectorAll()
返回所有匹配的一个 NodeList, 这是一个快照不会动态改变。接收一个 CSS 选择符。
mathesSelecttor()
如果调用元素与该选择符匹配，返回true, 否则返回 false. 接收一个 CSS 选择符。
2. 与类相关的扩充
getElementsByClassName()
接收一个字符串
classList
所有元素都有的属性，它是 DOMTokenList 的实例，有 length 属性和以下方法：
add(value) : 将给定的字符串添加到列表中，如果已经存在，就不添加了
contains(value) : 表示列表中是否存在给定的值
remove(value) : 从列表中删除给定的字符串
toggle(value) : 如果存在删除它；如果不存在添加它。
3. 焦点管理
document.activeElement 这个属性始终会引用 DOM
中当前获取焦点的元素。
元素获取焦点的方式有页面加载、用户输入（通常是通过按 Tab
键）和在代码中调用 focus() 方法。
document.hasFocus();
检测文档是否获取了焦点。
4. 自定义数据类型
<div id=‘myDiv‘ data-appId=‘12345‘
data-myName=‘Nicholad‘></div>
var addpId = div.dataset.appId;
// 获取自定义数据
div.dataset.appId = 2345;
// 设置自定义数据
5. 插入标记
element.innerHTML
// 在写模式下，innerHTML
的值（字符串）替换元素原来的所有子节点， 在读模式下，读取所有子节点
element.outerHTML
//
在读模式下，返回调用它的元素及所有子节点的 HTML 标签，在写模式下，会根据指定的 HTML
字符串创建新的DOM子树，替换调用的元素。
6. 元素大小
6.1 偏移量
6.2 客户区大小
6.3 确定元素大小
element.getBoundingClientRect();
返回一个矩形对象。这个对象包含4个属性：left, top, right, botom。这些属性都给出了元素在页面中相对于视口的位置。
6.4 遍历
var div = document.getElementById(‘#div1‘);
var filter = function(node){
retrun node.tagName.toLowerCase() ==
‘li‘ ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
var iterater = document.createNodeIterator(div,
NodeFilter.SHOW_ELEMENT, filter, false);
// 第三个参数表示过滤节点，不过滤传入 null
var node = iterator.nextNode();
while(node != null){
alert(node.tagName);
node =
iterator.nextNode();