DOM扩展

1.选择符API

（1）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");

通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素

通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素

 

（2）querySelectorAll()方法

返回所有匹配的元素，返回的是NodeList 的一个实例

// 取得某<div>中的所有<em>元素

var ems = document.getElementById("myDiv").querySelectorAll("em");

// 取得类为“selected”的所有元素

var selecteds = document.querySelectorAll(".selected");

// 取得所有<p>元素中的所有<strong>元素

var strongs  = document.querySelectorAll("p strong");

 

2.HTML5

（1）与类相关的扩充

  1.getElementByClassName()方法

　　接收一个参数，即一个包含一个或多个类名的字符串

　　返回带有指定类的所有元素的NodeList

  2.classList属性，类列表

（2）焦点管理

   document.activeElement 属性 始终引用DOM中当前获得了焦点的元素

　focus()方法能帮助元素获得焦点

（3）HTMLDocument的变化

  HTML5新增了document.head属性

　　var head = document.head || document.getElementsByTagName("head")[0];  // Chrome 和 Safari5 实现了该属性

（4）自定义数据属性

  HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息

  可以通过dataset属性来访问自定义的值，dataset是一个名值对的映射。

  每个data-name形式的属性都会有一个对应的属性，不过属性名没有data-前缀

  <div id="myDiv" data-appId="12345"  data-myname="Nicholas"></div>

  var div = document.getElementById("myDiv");

  var appId = div.dataset.appId;

  var myName = div.dataset.myname;