第11章 DOM扩展
W3C将一些已经成为事实标准的专有扩展标准化并写入规范当中。对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5
选择符API
就是根据CSS选择符选择与某个模式匹配的DOM元素,SelectorsAPI是W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询,极大改善了性能
Selectors API Level 1的核心是两个方法querySelector()和querySelectorAll()
querySelector()方法
它接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没找到则返回null
var body=document.querySelector("body"); //取得body元素
var myDiv=document.querySelector("#myDiv"); //取得ID为"myDiv"的元素
通过Document类型调用querySelector()方法会在文档元素范围内查找匹配的元素,通过Element类型调用querySelector()方法只会在该元素后代元素范围内查找匹配的元素,如果传入了不被支持的选择符,querySelector()会抛出错误
querySelectorAll()
该方法与querySelector()类似,不过它返回的是带有所有属性和方法的NodeList对象,其底层是类似一组元素的快照,而非对文档进行搜索的动态查询,这样可以避免大多数性能问题
//取得某<div>中所有的<em>元素
var ems=document.getElementById("myDiv").querySelectorAll("em");
方括号和item()方法取得NodeList里的某个元素
matchesSelector()方法
Selectors API Level 2规范为Element类型新增了matchesSelector()方法,这个方法接收一个参数,即css选择符,如果调用元素与该选择符匹配,返回true,否则返回false
if(document.body.matchesSelector("body.page1")){
//true
}
元素遍历
对于元素间的空格,IE9及之前版本不会返回文本节点,其他浏览器都会返回文本节点,这样导致使用childNodes和firstChild等属性时的行为不一致,Element Traversal新定义了一组属性,只可以在IE9之后的版本使用......
HTML5
getElementsByClassName()方法
它接收一个参数即包含一个或者多个类名,返回带有指定类的所有元素的NodeList,传入多个类名时,类名的先后顺序不重要
var item1=document.getElementsByClassName("mydiv class1");
classList属性