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