紅皮書（10）：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