DOM 扩展——JavaScript高级程序设计笔记（9）

第十章 DOM扩展

选择符API

querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

//取得body 元素

var body = document.querySelector("body");

//取得ID 为"myDiv"的元素

var myDiv = document.querySelector("#myDiv");

//取得类为"selected"的第一个元素

var selected = document.querySelector(".selected");

//取得类为"button"的第一个图像元素

var img = document.body.querySelector("img.button");

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

matchesSelector()方法 如果你想使用这个方法，最好是编写一个包装函数。

function matchesSelector(element, selector){

if (element.matchesSelector){

return element.matchesSelector(selector);

} else if (element.msMatchesSelector){

return element.msMatchesSelector(selector);

} else if (element.mozMatchesSelector){

return element.mozMatchesSelector(selector);

} else if (element.webkitMatchesSelector){

return element.webkitMatchesSelector(selector);

} else {

throw new Error("Not supported.");

}

}

if (matchesSelector(document.body, "body.page1")){

//执行操作

}

HTML5 添加的getElementsByClassName()方法是最受人欢迎的一个方法，可以通过document

对象及所有HTML 元素调用该方法。

//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓

var allCurrentUsernames = document.getElementsByClassName("username current");

//取得ID 为"myDiv"的元素中带有类名"selected"的所有元素

var selected = document.getElementById("myDiv").getElementsByClassName("selected");

HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList 属性。这个classList 属性是新集合类型DOMTokenList 的实例。DOMTokenList 有一个表示自己包含多少元素的length 属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。

 add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。

 contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

 remove(value)：从列表中删除给定的字符串。

 toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

//删除”disabled”类

div.classList.remove(“disabled”);

//添加”current”类

div.classList.add(“current”);

//切换”user”类

div.classList.toggle(“user”);

//确定元素中是否包含既定的类名

if (div.classList.contains(“bd”) && !div.classList.contains(“disabled”)){

//执行操作

)

//迭代类名

for (var i=0, len=div.classList.length; i < len; i++){

doSomething(div.classList[i]);

}支持classList 属性的浏览器有Firefox 3.6+和Chrome

焦点管理

document.activeElement 属性，这个属性始终会引用DOM 中当前获得了焦点的元素

document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

HTML5 扩展了HTMLDocument，增加了新的功能

Document 的readyState 属性有两个可能的值：

 loading，正在加载文档；

 complete，已经加载完文档。

检测页面的兼容模式

if (document.compatMode == "CSS1Compat"){

alert("Standards mode");

} else {

alert("Quirks mode");

}

可以通过

<meta>

元素、响应头部或直接设置charset 属性修改这个值。来看一个例子。

alert(document.charset); //”UTF-16”

document.charset = “UTF-8”;

另一个属性是defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集

应该是什么。如果文档没有使用默认的字符集，那charset 和defaultCharset 属性的值可能会不一

样，例如：

if (document.charset != document.defaultCharset){

alert(“Custom character set being used.”);

}

通过这两个属性可以得到文档使用的字符编码的具体信息，也能对字符编码进行准确地控制。运行

适当的情况下，可以保证用户正常查看页面或使用应用。

HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的

信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来看一个例子。

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