共计 3505 个字符，预计需要花费 9 分钟才能阅读完成。
又是一个很多人都已沉沉睡去的夜晚，我又掀开电脑开始啃书了。
孔子曰：“温故而知新_，能够为师矣。”
富丽的分割线 ————- 让咱们开始吧 ———————-
第 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> 元素的后辈
