首页 > 代码库 > JavaScript高级程序设计27.pdf

JavaScript高级程序设计27.pdf

第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属性