DOM扩展
一，选择符API
1，querySelector()方法
接收一个CSS选择符，返回与该模式匹配的第一个元素，没有匹配则返回null
var body = document.querySelector("body") 查找到body元素
var myDiv = document.querySelector("#myDiv") 查找ID为myDiv元素
var selected = document.querySelector(".selected") 查找类为selected的元素
var img = document.querySelector("img.button") 查找类为button的一个img元素
2，querySelectorAll()方法
接收一个css选择符，返回所有匹配元素，返回的是一个NodeList的实例
返回的值是带有所有属性和方法的NodeList，如果没有找到则NodeList是空的
var ems = document.getElementById("div1").querySelector("em") 查找ID为div1中的所有em元素
var selecteds = document.querySelector(".selected") 获取所有类为selected的元素
var strongs = document.querySelector("p strong") 获取p元素中的所有strong元素
要取得NodeList中的每一个元素，可以用item()方法，也可以使用方括号语法
strong = strongs[i] 或者 strong = strongs.item(i)
3，matchesSelector()方法
接收一个css选择符，调用元素与该选择符匹配返回true
IE9通过msMatchesSeclector()支持
Firefox3.6+通过mozMatchesSelector() 支持
safari和chrome通过webkitMatchesSelector()支持
function matchesSeclector(element,selector){
if(element.matchesSelector){
return element.matchesSelector;
}else if(element.msMatchesSelector){
return element.msMatchesSelector;
}else if(element.mozMatchesSelector){
return element.mozMatchesSelector;
}else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector;
}else{
throw new Error("Not supported");
}
}
二，元素遍历
childElementCount:返回子元素（不包括文本节点和注释）的个数
firstElementChild：返回第一个子元素，
lastElementChild：返回最后一个子元素
previousElementSibling：指向前一个同辈元素
nextElementSibling：指向下一个同辈元素
利用这些属性不用担心空白文本节点
IE9以上才支持
三，HTML5
1，与类相关的扩充
1）getElementsByClass()方法
接收一个包含一个或多个类名的字符串参数，返回带有指向类的所有元素的NodeList
var class = document.getElementsByClassName("username current") 取得类为username 和current的元素，与类名的先后顺序无关
var selected = document.getElementById("myDiv").getElementsByClassName("selector"); 获取Id为myDiv中的类为selector的元素
IE9以上才支持
2）classList属性
一个类可以有多个类名，通过classList保存着多个类名，classList有length属性保存着类名的个数，用item()方法或者[]取得每个元素
新类型有如下方法
add() 将给定的字符串添加到classL列表中
containes(value) 表示列表中是否存在给定的值，存在返回true
remove(value) 从列表中删除给定的字符串
toggle(value) 如果列表中已经存在给定的值，删除它，如果不存在给定的值，添加他
仅firefox和和chrome支持
2，焦点管理
document.activeElement属性，始终指向DOM中当前获得了焦点的元素
默认情况下，文档刚刚加载完成document.activeElement保存的是document.body元素的引用，文档加载结束保存null的值
document.hasFocus() 判断文档是否获得了焦点，可以判断用户是不是正在与页面交互
3，HTMLDocument的变化
1）readyState属性
有两个属性值 loading表示正在加载，complete表示已经加载完文档
一般用于判断文档是否加载完成 if(document.readyState == 'complete'){}
2）兼容模式
document添加了一个名为compatMode的属性，这个属性就是为了告诉大家浏览器采用了哪种渲染模式（标准还是混杂）
document.compatMode = CSS1Compat表示标准模式
document.compatMode = BackCompat表示混杂模式
3）head属性
var head = document.head || document.getElementsByTagName("head")[0];
4，字符串属性
charset属性表示文档中实际使用的字符集，通过meta标签设置
defaultCharset表示根据默认浏览器及操作系统的设置，当前文档应该默认的字符集
如果当前文档没有使用默认字符集 则document.charset != document.defaultCharset
5，自定义数据属性
自定义属性加前缀data- <div id="myDiv" data-appId="12135" data-myname="Nicholas"></div>
通过dataset属性来获取和设置自定义属性的值，此时不用加前缀data-
var div = document.getElementById("myDiv");
var appId = div.dataset.appId;
var myname = div.dataset.myname;
div.dataset.appId = 325;
div.dateset.myname = "adgs";
6，插入标记
1）innerHTML属性
读模式下 返回与调用元素的所有子节点(包括元素，注释和文本节点)对应的HTML标记，读的时候返回HTML标记
写模式下 根据指定的值创建新的DOM树，利用这个DOM树完全替换调用元素原先的所有子节点，写的时候会被浏览器解释显示解释后的内容
限制：一些浏览器通过innerHTML插入script标签不会执行其中的代码，
IE8以上可以执行其中的代码是要有条件的1，script元素中指定defer属性，2，script必须位于有作用域的元素之后，可以是文本节点，也可以是没有结束标签 的input元素
如：div.innerHTML = "<input type=\"hidden\"><script defer><\/script>"
大多数浏览器都支持以直观的方式通过innerHTML插入style元素
如:div.innerHTML = "<style type=\"text/css\">body{background:ref;}<\/style>";
不支持innerHTML的元素有col，colgrounp，frameset，head，html，style，table，tbody，thead，tfoot，tr，IE8前的title也不支持
IE8提供了window.toStaticHTML()方法接收一个html字符串参数，返回一个经过无害处理后的版本，删除所有脚本节点和事件处理程序
window.toStaticHTML("<a hrf=\"#\" onclick=\"alert('hi')\">click me</a>") 处理后返回<a hrf=\"#\">click</a>
2）outerHTML属性
读模式下，返回调用它的元素及所有子节点的HTML标签
写模式下，根据指定的HTML字符串创建新的DOM子树，然后替换调用元素
3）insertAdjacentHTML()方法
接收两个参数：插入位置和要插入的HTML文本
第一个参数可以是beforebegin ，当前位置之前插入紧邻的同辈元素
afterend，当前位置之后插入紧邻的同辈元素
afterbegin，当前元素之下插入新的子元素，或第一个元素之前插入新的子元素，即插入第一个子元素
beforeend，当前元素之下插入新的子元素，或最后一个元素之后插入新的子元素，即插入最后一个子元素
4）内存与性能问题
使用innerHTML，outerHTML，insertAdjacentHTML() 方法时，先手工删掉被替换元素
插入大量新HTML标记时，使用innerHTML属性比通过多次DOM创建节点效率要高很多
7，scrollIntoView()方法
可以在所有HTML上调用，通过滚动浏览器窗口或者某个容器元素，调用元素就会出现在视口中
参数传人true，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能的平齐
参数传人false，那么调用元素会极可能全部出现在视口中，或许是调用元素的底部与视口顶部平齐
四，专有扩展
1，文档模式
IE5：默认以混杂模式渲染页面
IE7：默认标准模式渲染页面
IE8：默认标准模式渲染页面
IE9：以IE9标准模式渲染页面
通过使用http头部文件X-UA-Compatible或meta标签设置浏览器以某种模式渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
IEVersion为IE的模式，可以取值如下：EmulateIE9，EmulateIE8，EmulateIE7，9,8,7,5
document.documentMode属性，可以知道给定页面使用的是什么文档模式
2，children属性
只包含元素中同样还是元素的子节点
var childCount = element.children.length
var firstChild = element.children[0]
3，contains()方法
1）祖先节点.contains(要检测的后代节点)，搜索开始的祖先节点调用此方法，参数为要检测的后代节点
如果被检测的后代节点属于调用的祖先节点返回true，否则返回false
2）compareDocumentPosition() 返回一个表示关系的位掩码，1无关，2居前，4居后，8包含，16被包含
传递的参数同上
3）通用的contains函数
function contains(refNode,otherNode){
if(typeof refNode.contains == 'function' && (!client.engine.webkit || client.engine.webkit >= 522)){
return refNode.contains(otherNode);
}else if(typeof refNode.compareDocumentPosition == 'function'){
return !!(refNode.compareDocumentPosition(otherNode) & 16);
}else{
var node = otherNode.parentNode;
do{
if(node == refNode){
return true;
}else{
node = node.parentNode;
}
}while(node != null);
return false;
}
}
4，插入文本
1）innerText属性
读取值时，按照由浅到深的顺序，将子文档中的所有文本拼接起来
写入值时，会删除原元素的所有子节点，插入包含相应文本值的文本节点
设置innerText永远只会生成当前节点的一个子文本节点
同样的还有一个textContent属性，会返回行内的样式和脚本代码
2）outerText属性
与innerText的区别就是会连同返回调用它的父节点
5，滚动
1）scrollIntoViewIfNeeded(alignCenter)
只有在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终可见,参数alignCenter可以设置为true
2）scrollByLines(linecount)
将元素的内容滚动指定的行高，行高可以正值或负值
3）scrollByPages(pageCount)
将元素的内容滚动指定的页面高度，具体的高度由元素的高度决定
scrollIntoView()和scrollIntoViewIfNeeded() 作用对象是元素的容器，
scrollByLines()和scrollByPages()作用的对象时元素自身
