又是一个很多人都已沉沉睡去的夜晚，我又掀开电脑开始啃书了。
孔子曰：“温故而知新_，能够为师矣。”
富丽的分割线-------------让咱们开始吧----------------------
第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- ， 目标是为元素提供与渲染无关的信息，或者提供语义信息。<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
增加了自定义属性之后，能够通过元素的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插入<script>元素并不会执行其中的脚本。如果想插入这段脚本，必须在后面增加一个"有作用域的元素"，能够是一个文本节点，也能够是一个没有完结标签的元素如<input>。div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>"; //不举荐
插入标记-outerHTML属性
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。
在写模式下，outerHTML会依据指定的HTML字符串创立新的DOM子树，而后用这个DOM子树齐全替换调用元素。
插入标记-insertAdjacentHTML()办法
insertAdjacentHTML()办法接管两个参数：插入地位和要插入的HTML文本。
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>"); //作为前一个同辈元素插入element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>"); //作为第一个子元素插入element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>"); //作为最初一个子元素插入element.insertAdjacentHTML("afterend", "<p>Hello world!</p>"); //作为后一个同辈元素插入留神：应用以上介绍的办法替换子节点，可能会导致浏览器的内存占用问题。
scrollIntoView()办法，通过滚动浏览器窗口或某个容器元素，调用元素就能够呈现在视口中。
如果传true作为参数，或不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传false作为参数，调用元素会尽可能全副呈现在视口中。顶部不肯定平齐。
document.forms[0].scrollIntoView(); //让元素可见
children属性：只蕴含元素中同样还是元素的子节点。除此之外，children属性与childNodes没有区别，即在元素只蕴含元素子节点时，这两个属性的值雷同。
contains()办法，不通过在DOM文档树中查找即可取得这个信息，调用contains()办法的应该是先人节点，也就是搜寻开始的节点。
alert(document.documentElement.contains(document.body)); //true 这个例子测试了<body>元素是不是<html>元素的后辈