又是一个很多人都已沉沉睡去的夜晚，我又掀开电脑开始啃书了。
孔子曰：“温故而知新_，可以为师矣。”
华丽的分割线-------------让我们开始吧----------------------
第11章 DOM扩展
Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。它的核心是两个方法：querySelector()和querySelectorAll()。
querySelector()方法：接受一个CSS选择符，返回与该模式匹配的第一个元素，如果没有返回null。
querySelectorAll()方法接收的参数与querySelector()方法一样，但是返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。
var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var ems = document.getElementById("myDiv").querySelectorAll("em");
var selecteds = document.querySelectorAll(".selected");通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
getElementsByClassName()方法，返回带有指定类的所有元素的NodeList。
var allCurrentUsernames = document.getElementsByClassName("username current");
var selected = document.getElementById("myDiv").getElementByClassName("selected");classList属性，是HTML5新增的一种操作类名的方式。
div.classList.remove("disabled"); //删除"disabled"类
div.classList.add("current"); //添加"current"类
div.classList.toggle("user"); //切换"user"类，如果列表存在给定的值，删除它；如果列表中没有给定的值，添加它。支持classList属性的浏览器有Firefox3.6+和Chrome。
焦点管理：首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。
元素获得焦点的方式有页面加载、用户输入（通常按Tab键）和在代码中调用focus()方法。
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。
查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点，这两个功能最重要的用途是提高Web应用的无障碍性。
无障碍Web应用的一个主要标志就是恰当的焦点管理，而确切地知道哪个元素获得了焦点是一个极大的进步。
readState属性有两个可能的值：loading-正在加载文档，complete-已经加载完文档。
使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。
if(document.readyState == "complete"){
//执行操作
}HTML5规定可以为元素添加非标准的属性，但要添加前缀data- ， 目的是为元素提供与渲染无关的信息，或者提供语义信息。
添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。
var div = document.getElementById("myDiv");
var appId = div.dataset.appId; //取得自定义属性的值
var myName = div.dataset.myname;
div.dataset.appId = 23456; //设置值
div.dataset.myname = "Micheal";
if(div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}插入标记-innerHTML属性
在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。
在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
不同浏览器返回的文本格式会有所不同，IE和Opera会将所有标签转换为大写形式，而其他的会返回原本的格式。
使用innerHTML属性也有一些限制。比如，在大多数浏览器中，通过innerHTML插入