1、选择符API，selectors API
可以使用CSS选择符匹配查找节点
1) querySelector(selector)，接受一个CSS选择符，返回调用该函数的节点后代中第一个匹配的元素节点，没有匹配，返回null；
2) querySelectorAll(selector)，接受一个CSS选择符，返回调用该函数的节点后代中所有匹配的元素节点集合（NodeList），没有匹配，返回空的NodeList；
这两个方法可以通过Document 和 Element 类型的实例调用。
浏览器支持： IE8+ 、Firefox 3.5+ 、Safari 3.1+、Chrome、Opera 10+；
2、元素遍历
Element Traversal API 为 DOM，可以更方便地访问DOM元素
1）childElementCount ：返回子元素节点（不包括文本节点和注释节点）的个数；
2）firstElementChild : 第一个子元素节点
3）lastElementChild : 最后一个子元素节点
4）previousElementSibling ：前一个同胞元素
5）nextElementSibling ：后一个同胞元素
浏览器支持：IE9+、FireFox 3.5+、 Safari 4+、Chrome、 Opera 10+。
3、 HTML5 扩展
1）getElementsByClassName(class) ，
参数是包含一个或多个类名的字符串，传入多个类名时，顺序没关系。可以通过 document 对象和所有的HTML元素调用该方法，返回在其后代中匹配的元素集合（NodeList）。
浏览器支持：IE9+、FireFox 3+、 Safari 3.1+、Chrome、 Opera 9.5+。
2）元素节点的 classList 属性，值是一个DOMTokenList 实例对象。
元素节点本来有一个 className 属性，其值是一个字符串，操作不便。多个类名，需要拆分字符串: ele.className.split(/\s+/)
DOMTokenList 属性和方法：
| DOMTokenList.length | 包含个数 |
| DOMTokenList.item(index) | 返回特定项 |
| DOMTokenList[index] | 返回特定项 |
| DOMTokenList.add(str) | 将str添加到集合中，已存在，则不添加 |
| DOMTokenList.contains(str) | 是否包含指定str, true、false |
| DOMTokenList.remove(str) | 删除指定项 |
| DOMTokenList.toggle(str) | 集合存在就删除，不存在就添加 |
浏览器支持：IE10+、FireFox 3.6+、Chrome。
3）document.activeElement， DOM中当前获得焦点的元素，文档加载期间为null，刚加载完成时是document.body 。浏览器支持：IE4+、FireFox 3+、 Safari 4+、Chrome、 Opera 8+。
4）document.hasFocus() ,确定文档是否获得了焦点（只要文档中的元素获得焦点，true），可用于用户是不是在与页面交互。浏览器支持：IE4+、FireFox 3+、 Safari 4+、Chrome、 Opera 8+。
5）document.readyState ，文档加载状态， 值：“loading” （正在加载文档），“complete” （加载完成）。浏览器支持：IE4+、FireFox 3.6+、 Safari 、Chrome、 Opera 9+。
6）document.compatMode，页面渲染模式， 值：“CSS1Compat” （标准模式），“BackCompat” （混杂模式）。浏览器支持：IE6+、FireFox 、 Safari 3.1、Chrome、 Opera 。
7）document.head 属性，引用文档中的<head>元素。 浏览器支持：IE9+、FireFox 、 Safari 5、Chrome、 Opera 。
8）document.charset ，获取、设置文档实际使用的字符集。 //IE、Chrome、Firefox、Safari、Opera
9）document.defaultCharset，默认字符集，// IE、Safari
10）document.characterSet，字符集 // IE9+、Chrome、Firefox
11）元素节点的 dataset 属性，HTML5中，可以获取 在元素上自定义的的属性（以“data-”前缀）
类似 ele.getAttribute("attr")，
<div id="test" name="test" title="" class="a b c" data-id="8" data-name="somename" account= "account" ></div>
var div = document.getElementById("test");
var dataId = div.dataset.id; //
var dataName = div.dataset.name; // somename
浏览器支持：IE11、FireFox 6+、 Safari 、Chrome、 Opera 。
12）是元素节点的 innerHTML 属性
读模式：返回该元素所有的子节点（包括元素节点、注释节点、文本节点）的HTML，各个浏览器返回的值可能不一样，IE8-会将标签转换为大写形式
写模式：根据HTML字符串创建新的DOM树，并替换元素的原来的所有子节点。（系统会创建和销毁HTML解析器，会有资源消耗）
大多数浏览器都支持 innerHTML 属性，但对部分元素并不是完全支持innerHTML属性： <col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<tr>
在IE9-，只支持这些的读模式，写模式不支持（其他浏览器的早期版本可能也不支持）。在IE8-中<title>元素是没有innerHTML属性的。
innerHTML插入的<script>元素大多数浏览器（IE8- 可以）并不会执行其中的脚本，通过创建节点createElement("script")，appendChild()后可以立即执行。
innerHTML能够插入<style>和<link>元素，并能立即执行有效
testDiv.innerHTML = "_<style type='text/css'> body{background-color: yellowgreen}<\/style>"; // IE8- 需要在<style> <link>元素前添加一个有作用域元素，例如"_"
testDiv.innerHTML = '3<link rel="stylesheet" href="css/test.css">'; // 添加了数字3 作为作用域元素
testDiv.removeChild(testDiv.firstChild); //为了不影响页面布局，删除文本节点（下划线，“_”）
13）outerHTML，
读模式：返回该元素自身及其子节点的HTML标签代码，各个浏览器返回的值可能不一样，IE8-会将标签转换为大写形式
写模式：根据HTML字符串创建新的DOM树，并替换元素的该元素节点本身。（系统会创建和销毁HTML解析器，会有资源消耗）
浏览器支持：IE4+、FireFox 8+、 Safari 4+、Chrome、 Opera 8+。
14）insertAdjacentHTML(model,htmlString)，插入同胞元素，或子元素
model有四个可选值：
“beforebegin”：在当前元素之前插入同胞元素
“afterbegin”：在当前元素之下的第一个子元素之前插入
”beforeend“：在当前元素之下的最后一个子元素之后插入
“afterend”：在当前元素之后插入同胞元素
var testDiv = document.getElementById("test");
testDiv.insertAdjacentHTML("beforebegin","<p>Hello world</p>");
testDiv.insertAdjacentHTML("afterbegin","<p>Hello world</p>");
testDiv.insertAdjacentHTML("afterend","<p>Hello world</p>");
testDiv.insertAdjacentHTML("afterbegin","<p>Hello world1</p>");
testDiv.insertAdjacentHTML("beforeend",'<table border="1" cellpadding="0" cellspacing="0" id="table">\n' +
' <tr>\n' +
' <td>dsdfsfd</td>\n' +
' <td>dsfdsdf</td>\n' +
' <td>dsfsf</td>\n' +
' </tr>\n' +
'\n' +
' </table>');
浏览器支持：IE、FireFox 8+、 Safari 、Chrome、 Opera 。
15）scrollIntoView()，所有的HTML元素都可以调用，使元素出现在视口中。
传入true或者不传参数：元素顶部和视口顶部尽肯能齐平
false：元素底部和视口底部尽可能齐平
让元素获取焦点也会导致页面滚动，并显示出元素
浏览器支持：IE、FireFox 、 Safari 、Opera，Chrome不支持 。
16）children属性，返回某个元素节点的所有子元素节点（IE8- 也包括注释节点，nodeType是8），HTMLCollection集合
var childCount = ele.children.length;
var firstChild = ele.children[0];
浏览器支持：IE、FireFox 、 Safari 、Opera 、Chrome。
17）contains()，判断节点的后代中是不是有某个节点
document.documentElement.contains(document.body); // true, body元素是html元素的后代节点
浏览器支持：IE、FireFox 9+ 、 Safari 、Opera 、Chrome。
18）innerText 属性
读模式：由浅入深的顺序将文档数中的所有文本拼接起来返回
写模式：会删除所有子节点，插入包含文本的文本节点
浏览器支持：IE4+、 Safari 3+、Opera 8+、Chrome，Firefox（高版本）。
还有一个类似的属性 textContent，与innerText 功能一样，支持的浏览器：IE9+、Safari 3+、Opera 10+、Chrome、Firefox
function getInnerText(element){
return (typeof element.innerText == "string") ? element.innerText : element.textContent;
}
function setInnerText(element,text){
if(typeof element.innerText == "string"){
element.innerText = text;
}else{
element.textContent = text;
}
}
19）outerText 属性，将作用范围扩大到包含调用他的节点
读模式：由浅入深的顺序将文档数中的所有文本拼接起来返回，与 innerText 结果一样
写模式：用新文本节点替换整个元素，即整个元素就在文档中删除了
浏览器支持：IE4+、 Safari 3+、Opera 8+、Chrome，Firefox不支持。