1.**querySelector()**方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。与getElementsById()类似，这个方法可以通过Document类型或Element类型调用。
2.**querySelectorAll()**方法返回的是一个NodeList实例，而**其底层实现则类似一组元素的快照，而非不断对文档进行搜索的动态查询**。
3.matches()接收一个CSS选择符，如果调用元素与该选择符匹配，返回true。IE/edge需加前缀ms，安卓需加前缀webkit。如果想使用这个方法需要编写一个包装函数：
function matches(element,selector){
if (element.matches) {
return element.matches(selector);
} else if (element.msMatches){
return element.msMatches(selector);
} else if (element.webkitMatches) {
return element.webkitMatches(selector);
} else {
throw new Error('Not supported.');
}
}
4.Element Traversal API为DOM元素添加了以下5个属性：
* childElementCount：返回子元素（不包括文本节点和注释）的个数。
* firstElementChild
* lastElementChild
* previousElementChild
* nextElementChild
5.**getElementsByClassName()**接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。当传入多个类名的时候（先后顺序不重要q），只返回同时包含这几个类名的元素。其余特性（集合动态性和性能问题）与getElementsByTagName()类似。
6.HTML5新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList属性（有length属性，可使用方括号语法访问）。这个新类型还定义了如下方法：
* add()：讲给定字符串值添加到类名列表中，如果已经存在就不添加了。
* contains()：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
* remove()：从列表中删除给定的字符串。
* toggle()：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
避免一次性传入多个类名，这样可能会导致IE11抛出错误。
7.**document.activeElement**属性始终会引用DOOM中当前获得了焦点的元素。元素获得焦点的方式又页面加载、用户输入（通常通过按TAB键）和在代码中调用**focus()**方法。默认情况下，文档刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。
另外，HTML5新增了document.hasFocus()方法，这个方法用于确定**文档**是否获得了焦点。通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。
8.使用document.readyState属性的最强当方式，就是通过它来实现一个指示文档已经加载完成的指示器。
if (document.readyState == 'complete') {
//执行操作
}
9. 在大多数浏览器中，通过innerHTML插入<scriipt>元素并不会执行其中的脚本。并不是所有元素都支持innerHTML属性（不支持的元素中包括了表格相关元素）。
10.**outerHTML**属性在读模式下返回调用它的元素及所有子节点的HTML标签。在写模式下，会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
11.insertAdjacentHTML()方法用于在元素内或元素外前后插入HTML。
12.在使用innerHTML、outerHTML、insertAdjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
13.**children**属性返回子节点中的元素节点，除此之外他和childNodes没有什么区别。IE9+及所有现代浏览器都支持这个属性。
14.元素节点的contains()方法可以检测传入元素是否调用元素的后代节点。
15.srollIntoView()方法可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，掉哟个元素就可以出现在视口当中。如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用的元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口当中，（可能的话，调用元素的底部会与是视口底部平齐）不过顶部不一定平齐。
`document.forms[0].scrollIntoView();`
当页面发生变化时，一般会用这个方法来吸引用户的注意力。实际上，为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。
