DOM扩展
DOM的两个主要扩展：选择符API和HTML5
一.选择符API
通过CSS选择符查询DOM文档取得元素的引用（jQuery的核心）
1.querySelector()方法
接受一个CSS选择符，返回与该模式匹配的第一个元素
var myDiv=document.querySelector(“#myDiv”); //取得ID为myDiv的元素 var selected=document.querySelector(“.selected”); //取得类为selected的第一个元素 var img=document.body.querySelector(“img.button”); //取得类为button的一个图像元素 Document类型调用querySelector()方法会在文档元素的范围内查找匹配的元素。通过Element类型调用，会在该元素的子元素范围内查找
2.querySelectorAll()
返回所有匹配的元素，是一个NodeList对象，底层实现类似于一组元素的快照
var selecteds=document.querySlectetorAll(".selected"); //取得类为“selected”的所有元素
var strongs=document.querySelectorAll("p strong"); //取得p元素中所有<strong>元素
可以使用方括号语法或item()方法，访问NodeList中的每一个元素
var i,len,strong;
for(i=0,len=strongs.lengeh;i<len;i++){
strong=strongs[i];
strong.className="important";
}
3.matchesSelector()方法
接受CSS选择符，如果调用的元素与该选择符匹配，返回ture
if(document.body.matchesSelector("body.page1")){
//true
}
不是所有浏览器都支持此方法,但有类似的方法,所以可以编写一个函数:
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element,msMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.webkitMatchesSeletor){
return element.webkitMatchesSeletor(selector);
}else{
throw new Error("not supported");
}
}
if(matcheesSelctor(document.body,"body.page1")){
//执行
}
二.元素遍历
浏览器对处理元素间的空格有差异，IE9不返回文本节点，而其他浏览器返回文本节点。
Element Traversal API为DOM元素添加了5个属性：（不用担心空白文本节点）
childElementCount:返回子元素（不包含文本节点和注释）的个数
firstElementChild
lastElementChild
perviousElementSibling
nextElementSibling
跨浏览器遍历某元素的所有元素
var child=element.firstElementChild;
while(child!=element.lastElmentChild){
processChild(child);
child=child.nextElementSibing;
}
三.HTML5
1.与类相关的扩充
用于简化CSS类的用法
(1)getElementsByClassName()
接受一个或多个类名的字符串，返回带有指定类的所有元素的NodeList
var all=document.getElementsByClsaaName("username current"); //取得类中包含“username”和“current”的元素
在document对象上调用会返回与类名匹配的所有元素，在元素上调用会返回后代元素中匹配的元素
(2)classList属性
不用classList属性修改className：
//删除一个类名
<div class="bd user disabled">...</div>
var className=div.className.split(/\s+/);
var i,len
for(i=0,len=className.length;i<len;i++){
if(className[i]=="user"){
className.split(i,1);
}
}
div.className.join(" ");
classList属性是DOMTokenList的实例，类似于一个数组，有length属性，可以使用[]或item（）
有的方法：
add(): div.add(“current”);//添加“current”类
contains()： 列表中有给定的类，返回true
remove()： 删除
toggle()： 如果存在则删除，没有则添加
2.焦点管理
元素获得焦点的方式：页面加载，用户输入，代码中调用focus()方法
(1)document.activeElement：始终指向DOM中获得了焦点的元素
var button=document.getElementById("myButton");
button.focus();
alert(document.achiveElement==button); //true
默认情况下,文档刚刚加载完成时,document.achiveElement中指向document.body，加载过程值为null
(2)document.hsaFocus()方法
用于确定文档是否获得了焦点:(知道用户是不是正在于页面交互)
var button=document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true
3.HTMLDocment的变化
(1)readyState属性:多用于只是页面加载完成后的操作
两个可能的值：loading(正在加载文档) complete(已经加载完成文档)
if(document.readystate=="complete"){
//操作
}
(2)兼容模式
compatMode属性：告诉开发人员浏览器采用了哪种渲染模式
if(document.complete=="CSS1Compat"){
//标准模式
}else if(document.complete=="BackCompat"){
//混杂模式
}
(3)head属性
document.head //Chrome Safiri5支持 相当于：
document.getElementsByTagName(“head”)[0]
4.字符集属性
document.charset //可以访问，也可以指定
5.自定义数据属性:用于跟踪链接等
以data-开头,可以通过dataset属性访问
<div id=”myDiv” data-appId=”12345”></div>
var div=document.getElmentById(“myDiv”);
alert(div.dataset.appId);
6.插入标记
给文档插入大量新的HTML标记时，通过DOM操作非常麻烦，所以使用插入标记的技术，直接插入HTML字符串
(1)innerHTML属性
读取模式下：返回调用它的元素的子节点
写入模式下：字符串解析为DOM树，替换调用元素原来的所有子节点，要用字符转义
注意：
①通过innerHTML插入<script>元素并不会执行其中的脚本,因为<script>是“无作用域元素”，类似于注释
必须要在前边添加一个“有作用域元素”,并指定defer属性
div.innerHTML=”<input type=\”hidden\”><script defer>alert(“hi”);<\/script>"; //隐藏的input域
②<style>可以以直观的方式插入（IE8和之前的不行）
div.innerHTML=”_<style type=\”text/css\”>body{background-color:red;}</style>”
div.removeChild(div.firstChild); //移除前边添加的文本节点
(2)outerHTML属性
读取模式下：返回调用它的元素及所有子节点的HTML标签
写入模式下：替换调用它的节点，并插入节点
(3)insertAdjacentHTML()方法
接受插入位置:"beforebegin””afterbegin””beforeend””afterend”
要插入的HTML文本
element.insertAdjacentHTML(“beforebegin”,"<p>hello worid</p>”)
(4)内存与性能问题
在使用上述方法将元素从文档树中删除后，元素与事件处理程序之间的绑定关系在内存中并没有一并删除。导致内存数量增加，最好手动删除要被替换的元素的所有事件处理程序和JavaScript对象属性
(5)scrollIntoView()方法
可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就出现在视口中。
四.专有扩展
还没有写入标准，只得到了少数浏览器的支持
1.文档模式
强制以某种模式渲染页面：
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7”> //IE7文档模式
document.documentMode :给定页面使用的是哪种文档模式
2.children属性
只包含元素的子节点(忽略了空白符)，其他和childNode没什么区别
3.contains()方法：检测一个节点是不是一个节点的子节点
祖先节点调用contains，接受要检测的后代节点
alert(document.documentElement.contains(document.body)); //true 测试<body>是不是<html>元素的后代
DOM3中类似contains的方法：compareDocumentPosition()
4.插入文本
(1)innerText
读取模式：删除元素的所有节点，返回文本
写入模式：删除调用元素的所有子节点，插入相应文本值的文本节点
div.innerText=div.innerTexu; //确保只生成一个子文本节点
类似的属性：textContent
编写函数检测支持哪种属性：
function getInnerText(element){
return (typeof element.textContent=="string")?element.textContent:element.innerText;
}
function setInnerText(element,text){
if(typeof element.textContent=="string"){
element.textContent=text;
}else{
element.innerText=text;
}
}
(2)outerText属性
读取模式：和innerText一样
写入模式：替换调用它的元素和其子元素
5.滚动
scrollIntoViewIfNeeded()
scrollByLines():将元素内容滚动到指定行高
scrollByPages()：将元素的内容滚动指定的页面高度
