JavaScript高级程序设计9--DOM扩展

一、选择符API
Selectors API Level1的核心是两个方法：querySelector()和querySelectorAll()，在兼容的浏览器中可以通过Document及Element类型的实例调用它们。
1.querySelector()方法
querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

//取得body元素
var body = document.querySelector("body");

//取得ID为"myDiv"的元素
var body = document.querySelector("#myDiv");

//取得类为"selected"的第一个元素
var body = document.querySelector(".selected");

//取得类为"button"的第一个图像元素
var body = document.querySelector("img.button");

2.querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素组成的一个NodeList的实例。

//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
//取得返回的NodeList中的每一个元素
var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
	strong = strongs[i];	//或者strongs.item(i)
	strongs.className = "important";
}

3.matchesSelector()方法
Selector API Level 2 规范为Element类型新增了一个方法matchesSelector()，这个方法接收一个参数，即CSS选择符，如果调用元素与该元素匹配，返回true；否则，返回false。
二、元素遍历
Element Traversal API为DOM元素添加了以下五个属性。

• childElementCount：返回子元素（不包括文本节点和注释）的个数；
• firstElementChild：指向第一个子元素；
• lastElementChild：指向最后一个子元素；
• previousElementSibling：指向前一个同辈元素；
• nextElementSibling：指向后一个同辈元素；

//跨浏览器遍历某元素的所有子元素
var i,
	len,
	child = element.firstElementChild;
while(child != element.lastElementChild){
	processChild(child);	//已知其是元素
	child = child.nextElementSibling;
}

三、HTML5
1.与类相关的扩充
getElementsByClassName()方法：接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。

//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

//取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

classList属性：HTML5为所有元素添加了ClassList属性，这个类型具有如下方法。

• add(value)：将给定的字符串值添加到列表中，如果值已经存在，就不添加了。
• contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
• remove(value)：从列表中删除给定的字符串。
• toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

注意：支持classList属性的浏览器有Firefox3.6+和Chrome。
2.焦点管理
HTML5也添加了辅助管理DOM焦点的功能。
document.activeElement属性：这个属性始终会引用DOM中当前获得了焦点的元素。
ps：元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab键）和在代码中调用focus()方法。
document.hasFocus()方法：这个方法用于确定文档是否获得了焦点。
ps：通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。
注意：实现了这两个属性的浏览器的包括IE4+、Firefox3+、Safari4+、Chrome和Opera8+。
3.HTMLDocument的变化
readyState属性
Document的readyState属性有两个可能的值：

• loading：正在加载文档；
• complete：已经加载完文档；

兼容模式
document.compatMode有两个可能的值：
"CSS1Compat"：标准模式；
"BackCompat"：混杂模式；
head属性
document.head属性：引用文档的head元素。
注意：实现document.head属性的浏览器包括Chrome和Safari5。
4.字符集属性
charset属性：表示文档中实际使用的字符集。
defaultCharset属性：表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。
注意：支持document.charset属性的浏览器有IE、Safari、Chrome和Opera。Firefox支持document.Characterset。支持document.defaultCharset属性的浏览器有IE、Safari、Chrome。
5.自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，添加了自定义属性后，可以通过元素的dataset属性来访问自定义属性的值。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myName;

6.插入标记
innerHTML属性

• 在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。
• 在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

注意：并不是所有元素都支持innerHTML属性。
outerHTML属性

• 在读模式下，outerHTML属性返回调用它的元素及所有子节点的HTML标签。
• 在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

注意：支持outerHTML属性的浏览器有IE4+、Safari4+、Chrome和Opera8+。Firefox7及之前版本都不支持outerHTML属性。
insertAjacentHTML()方法
它接收两个参数：插入位置和要插入的HTML文本，第一个参数必须是下列值之一：

• "beforebegin"：在当前元素之前插入一个紧邻的同辈元素；
• "afterbegin"：在当前元素之后插入一个新的子元素或在第一个子元素之前再插入新的子元素；
• "beforeend"：在当前元素之前插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
• "afterend"：在当前元素之后插入一个紧邻的同辈元素；

内存与性能问题
在删除带有事件处理程序或引用了其他JavaScript对象子树时，就有可能导致内存占用问题，因此，在使用innerHTML、outerHTML属性和insertAjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
7.scrollIntoView()方法
scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在市口中，接收一个参数：true（效果等同于不传入参数）和false。
注意：支持scrollIntoView()方法的浏览器有IE、Firefox、Safari和Opera。