《JavaScript高级程序设计》笔记：DOM扩展（十一）

选择符api

queryselector()方法

// 取得body元素
var tbody = 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()方法

// 取得某<div>中的所有<em>元素(类似于getelementsbytagname("em"))
var ems = document.getelementbyid("mydiv").queryselectorall("em");

// 取得类为"selected"的所有元素
var selecteds = document.queryselectorall(".selected");

// 取得所有<p>元素中的所有<strong>元素
var strongs = document.queryselectorall("p strong");

html5

与类相关的扩充

1.getelementsbyclassname()方法
该方法可以通过document对象及所有html元素调用该方法。

// 取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓
var allcurrentusernames = document.getelementsbyclassname("username current");

// 取得id为"mydiv"的元素中带有类名"selected"的所有元素
var selected = document.getelementbyid("mydiv").getelementsbyclassname("selected");

焦点管理

html5也添加了辅助管理dom焦点的功能。首先就是document.activeelement属性，这个属性始终会引用dom中当前获得了焦点的元素。

var button = document.getelementbyid("mybutton");
button.focus();
alert(document.activeelement === button); // true

默认情况下，文档刚刚加载完成时，document.activeelement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeelement的值为null。
另外就是新增了document.hasfocus()方法，这个方法用于确定文档是否获得了焦点。

var button = document.getelementbyid("mybutton");
botton.focus();
alert(document.hasfocus()); // true