第十章 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")){
//执行操作
}
- querySelector()方法接收一个CSS 选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。
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>