《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