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

第十章 DOM扩展

---

1. 选择符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")){
//执行操作
}

2. 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

3. 焦点管理

   • document.activeElement 属性，这个属性始终会引用DOM 中当前获得了焦点的元素
   • document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

4. HTML5 扩展了HTMLDocument，增加了新的功能
   Document 的readyState 属性有两个可能的值：
    loading，正在加载文档；
    complete，已经加载完文档。

5. 检测页面的兼容模式
   if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

6. 可以通过<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.”);
   }
   通过这两个属性可以得到文档使用的字符编码的具体信息，也能对字符编码进行准确地控制。运行
   适当的情况下，可以保证用户正常查看页面或使用应用。

7. HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的
   信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来看一个例子。
   <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>