【JS红宝书学习】11DOM扩展

对DOM的扩展，主要有Selector API和HTML5。

1、选择符API

众多JavaScript库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。
实际上，jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById()和getElementsByTagName()。
Selector API Level1的核心是两个方法，querySelector()和querySelectorAll()，可以通过Document和Element类型的实例调用它们。
1、querySelector()
参数接受一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素则返回null
参数可以是"body"、"#myId"、".selected"、“img.button”
选择Document类型对象调用这个方法时，会在文档范围内查找，使用Element类型对象调用这个方法时，会在元素的后代元素的范围内查找匹配的元素。
2、querySelectorAll()
接受的和querySelector()一样的参数，但是返回的是一个NodeList对象，准确地说是带有所有属性和方法的NodeList，并且是一个快照，而非动态的列表。如果没有找到匹配的元素，那么NodeList就是空的。
3、matchesSelector()
Selectors API Level2 规范为Element类型新增了一个方法matchesSelector()，这个方法接受一个参数，即CSS选择符，如果第哦啊用元素与该选择符匹配则返回true，否则返回false。
但是大多数浏览器暂时只是实验性地提供了这个方法，IE9+提供了msMatchesSeletor()，Firefox 3.6+提供了mozMatchesSelector()方法，Safari5+和Chrome提供了webkitMatchesSelector()方法，因此在具体使用时，最好写一个包装函数，统一一下这些函数。

2、元素遍历

Element Traversal API为DOM元素添加了以下5个属性
childElementCount：返回子元素（不含注释节点和文本节点）的个数
firstElementChild：指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。
遍历元素，有点像链表的遍历方式

var i,len,child=element.firstElementChild;
while(chile!=element.lastElementChild){
	process(child);
	child = child.nextElementSibling;
}

3、HTML5

HTML5为JavaScript定义了大量的API。其中有些与DOM重叠，定义了浏览器应该支持的DOM扩展。HTML4导致了一个很大的变化，就是class属性用得越来越多，同时JavaScript也会更多地使用来操作css类，HTML5提供了很多新的API，致力于简化CSS类的用法。
1、getElementByClassName()方法
getElementByClassName()方法接受一个参数，即一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。

//取得所有类名中包含username和current的元素
var allCurrentUsername = document.getElementByClassName("username current");
//取得所有id为myId的元素中带有类名selected的所有元素
var selected = document。getElementById("myId").getElementByClassName("selected");

2、classList属性
在操作类名时，需要通过className属性添加、删除和替换类名。因为className是一个字符串，所以即使只修改字符串的一部分也必须每次都设置整个字符串的值。比如遇到一个有多个类的元素，只想替换一个类，那也要把所有的类都写明,比如class=”bd user disabled“。
如果单独处理一个类名，还要用split、slice等方法来操作，而classList属性则是一个DOMTokenList实例，和其他DOM集合类似，提供了方括号语法、length属性、item()方法。
DOMTokenList提供了以下的方法：
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：标识列表中是否存在给定的值。如果存在返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果不存在，则添加它。
所以如果希望删除类class=”bd user disabled“中的disabled，只需要使用div.remove(“disabled”)

3、焦点管理
HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用当前DOM中获得焦点的元素。
补充：元素获取焦点的方式：页面加载、用户输入（经常是tab键）、在代码中调用focus()方法。
其次，新增了document.hasFocus()方法，用于确定当前文档是否获得了焦点。

4、HTMLDocument的变化
A、readyState
最早是IE4为document对象引入了这个属性，后来其他浏览器都陆续添加了这个属性。
document的readyState属性可能有两个值，一个是loading，表示正在加载文档，一个是complete，表示已经加载了文档。
B、兼容模式（compatMode）
最早是IE6开始区分渲染页面的模式是标准的还是混杂的，因而检测兼容模式也是浏览器必要的功能。因此IE给document添加了一个名为compatMode的属性。标准模式下，值为CSS1Compat，混杂模式下，值为BackCompat。
C、head
document.head保存了文档head标签的引用。
等同于document.getElementsByTagName(“head”)[0];
D、字符集属性
document.charset保存了当前文档实际使用的字符集。默认情况下，值为"UTF-16",但是可以通过meta元素，响应头部或者直接设置charset属性来修改这个值。
E、自定义数据属性。
HTML5规定可以为元素添加非标准的属性，但必须要添加前缀data-
F、插入标记
innerHTML，在读模式下，innerHTML会返回与调用元素的所有子节点（包括元素、注释、文本节点）标签（就是尖括号也要带着），在写模式下innerHTML会根据提供的值创建新的DOM树，然后用这个DOM树完全替换掉调用元素原先的所有子节点。
outerHTML，在读模式下，oyterHTML会返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
G、scrollIntoView()方法
scrollIntoView()方法可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true或者不传入参数，窗口会滚动到尽可能与元素顶部平齐。如果传入false，调用元素会尽可能出现在视口中。

4、专有扩展