第十一章 DOM扩展
一.选择符API
1.querySelector()方法
接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
2.querySelectorAll()方法
返回所有名为xxx的元素。
3.matchesSelector()方法
二.元素遍历
三.HTML5
1.与类相关的扩充
1).getElementByClassName()方法
//取得所有类中包含“username”和“current”的元素，类名的先后顺序无所谓
var allCurrentUsernames = document .getElementByClassName("username current");
//取得ID为“myDiv”的元素中带有类名“selected”的所有元素
var selected = document.getElementById("myDiv").getElementByClassName("selected");
2).classList属性
add(value):将给定的字符串值添加到列表中
contains(value):表示列表中是否存在给定值
remove(value):删除给定字符串
toggle(value):如果有，删除，没有就添加
2.焦点管理
元素获得焦点的方式有页面加载、用户输入、在代码中调用focus（）
document.activeElement属性
document.hasFocus()方法
-通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互
3.HTMLDocument的变化
1）readyState属性
loading 正在加载文档
complete 已经完成加载
2）兼容模式
compatMode属性
3）head属性
var head=document.head||document.getElementsByTagName("head")[0];
//如果可用，就用head属性，否则使用后者
4.字符集属性
charset属性表示文档中实际使用的字符集
defaultCharset表示根据默认浏览武器及操作系统设置，当前文档的默认字符集应该是什么
5.自定义数据属性
html5规定可以为元素添加非标准的属性，但要添加data-，
谈加厚可以用元素的dataset访问
6.插入标记
1）innerHTML属性
标签的innerHTML为标签内所包含的内容（不同浏览器返回的大小写有所区别）
通过innerHTML插入<script>无效
可插入style元素
2）outerHTNL属性
替换元素
3）insertAdjacentHTML()方法
包含两个参数，一个是要插入的位置，另一个是要插入的文本
第一个参数:
"beforebegin",在当前元素之前插入一个紧邻的同辈元素
"afterbegin",在当前元素的下一辈插入子元素，子元素在之前存在的子元素之前
"beforeend",在当前元素的下一辈插入子元素，子元素在之前存在的子元素之后
"afterend",在当前元素之后插入一个紧邻的同辈元素
4）内存与性能问题
避免：
for（var i=0,len=values.length;i<len;i++）{
ul.innerHTML+="<li>"+values[i]+"</li>";
}
推荐方法：
var itemsHTML=“”；
for（var i=0,len=values.length;i<len;i++ ）
{
itemsHTML+="<li>"+values[i]+"</li>";
}
ul.innerHTML=itemsHTML;//一次性添加
7.scrollIntoView()方法
通过滚动浏览器窗口或某个元素内容，调用元素就可以出现在视口中。
四.专有扩展
1.文档模式
2.children属性
见上一章
3.contains()方法
检查节点是否为另一个节点的后代
4.插入文本
1）innerText属性
返回标签内的文本（不同浏览器空白符不同）
使用innerText设置值
div.innerText="hello world";
2)outerText属性
除了作用范围扩大到了包含调用它的节点之外，outerText与innerText基本上没区别。
新文本节点替换旧文本节点
5.滚动（以下仅支持Safari和Chrome）
scrollIntoViewIfNeeded():在元素不可见的情况下，滚动至该元素，设置为TRUE为让元素显示在视窗中央
scrollByLines(lineCount):将元素滚动指定行高，参数可正可负
scrollByPages（pageCount）:将元素的内容滚动到指定页面高度，具体高度有元素的高度决定