又是一个很多人都已沉沉睡去的夜晚，我又掀开电脑开始啃书了。
孔子曰：“温故而知新_，可以为师矣。”
华丽的分割线-------------让我们开始吧----------------------
第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>元素的后代
第12章 DOM2和DOM3
DOM2级和3级的目的在于扩展DOM API,以满足操作XML的所有需求，同时更好的错误处理及特性检测能力。
在HTML中定义样式的方式有3种：通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式，以及使用style特性定义针对特定元素的样式。
任何支持style特性的HTML元素在Javascript中都有一个对应的style属性。
多数情况下，都可以通过简单地转换属性名的格式来实现转换。其中一个不能直接转换的CSS属性就是float。由于float是Javascript中的保留字，因此不能用作属性名。
只要取得一个有效的DOM元素的引用，就可以随时使用Javascript为其设置样式。
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";//以这种方式改变样式时，元素的外观会自动更新。
通过cssText属性可以访问style特性中的css代码。在读取模式下，cssText返回浏览器对style特性中CSS代码的内部表示。在写入模式下，赋给cssText的值会重写整个style特性的值；也就是说以前通过style特性指定的样式信息都将丢失。
myDiv.style.cssText = "width:25px;height:100px;background-color:green";
alert(myDiv.style.cssText);虽然style对象能够提供支持style特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。
getComputedStyle()方法，接受两个参数：要取得计算样式的元素和一个伪元素字符串(如:"after")。如果不需要伪元素，第二个参数可以是null。
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"IE不支持getComputedStyle()方法，但它有一种类似的概念。这个属性就是currentStyle属性。var computedStyle = myDiv.currentStyle;
不同浏览器的document.styleSheets返回的样式表也不同。
所有浏览器都会包含<style>元素和rel特性被设置为"stylesheet"的<link>元素引入的样式表。
要想在不同浏览器中都能取得样式表对象，可以使用以下代码。
function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第一个<link/>元素引入的样式表
var link = document.getElementByTagName("link")[0];
var sheet = getStylesheet(link);这里的getStylesheet()返回的样式表对象与document.styleSheets集合中的样式表对象相同。
元素大小
1、偏移量，包括元素在屏幕上占用的所有可见的空间。
- offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。
- offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
- offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
- offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。
要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以德奥一个基本准确的值。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current != null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}上面函数利用offsetParent属性在DOM层次中逐渐向上回溯，将每个层次中的偏移量属性合计到一块。
所有这些偏移量属性都是只读的，而且每次返回它们都需要重新计算。因此应该尽量避免重复访问这些属性。
2、元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。
- clientWidth属性是元素内容区宽度加上左右内边距宽度；
- clientHeight属性是元素内容区高度加上上下内边距高度。
字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。
最常用到这些属性的情况，就是确定浏览器视口大小的时候，可以使用document.documentElement或document.body的clientWidth和clientHeight。
function getViewport(){
if(document.compatMode == "BackCompat"){
return{
width: document.body.clientWidth,
height: document.body.clientHeight
};
}else{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}}
这个函数首先检查document.compatMode属性，以确定浏览器是否运行在混杂模式。
3、滚动大小，指的是包含滚动内容的元素的大小。
- scrollHeight: 在没有滚动条的情况下，元素内容的总高度。
- scrollWidth: 在没有滚动条的情况下，元素内容的总宽度。
- scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
- scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
小结
“DOM2级样式”模块主要针对操作元素的样式信息而开发，其特性简要总结如下。
- 每个元素都有一个关联的style对象，可以用来确定和修改行内的样式。
- 要确定某个元素的计算样式(包括应用给它的所有CSS规则)，可以使用getComputedStyle()方法。
- IE不支持getComputedStyle()方法，但为所有元素都提供了能够返回相同信息currentStyle属性。
- 可以通过document.styleSheets集合访问样式表。
- 除IE之外的所有浏览器都支持针对样式表的这个接口，IE也为几乎所有相应的DOM功能提供了自己的一套属性和方法。
“DOM2级遍历和范围”模块提供了与DOM结构交互的不同方式，简要总结如下。
- 遍历即使用NodeIterator或TreeWalker对DOM执行深度优先的遍历。
- NodeIterator是一个简单的接口，只允许以一个节点的步幅前后移动。而TreeWalker在提供相同功能的同时，还支持在DOM结构的各个方向上移动，包括父节点、同辈节点和子节点等方向。
- 范围是选择DOM结构中特定部分，然后再执行相应操作的一种手段。
- 使用范围选区可以再删除文档中某些部分的同时，保持文档结构的格式良好，或者复制文档中的相应部分。
- IE8及更早版本不支持”DOM2级遍历和范围”模块，但它提供了一个专有的文本范围对象，可以用来完成简单的基于文本的范围操作，IE完成支持DOM遍历。
今天就啃到这儿啦，晚安，各位。。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。