1.6.4 ?使用 Selectors API 簡化選取操作
除了語義化元素外，HTML5 還引入了一種用于查找頁面 DOM 元素的快捷方式。 1-3 列出表了在 HTML5 出現之前，用來在頁面中查找特定元素的函數。
| 函數 | 描述 | 示例 |
|---|---|---|
| getElementById() | 根據指定的id特性值查找并返回元素 | <div id=”foo”> getElementById(“foo”); |
| getElementsByName() | 返回所有name特性為指定值的元素 | <input type=”text” name=”foo”> getElementsByName(“foo”); |
| getElementsByTagName() | 返回所有標簽名稱與指定值相匹配的元素 | <input type=”text”> getElementsByTagName(“input”) |
有了新的 Selectors API 之后，可以用更精確的方式來指定希望獲取的元素，而不必再用標準DOM 的方式循環遍歷。Selectors API 與現在 CSS 中使用的選擇規則一樣，通過它我們可以查找頁面中的一個或多個元素。例如，CSS 已經可以基于嵌套（nesting）、兄弟節點（sibling）和子模式（child pattern）進行元素選擇。CSS 的最新版除添加了更多對偽類(pseudo-classe)的支持（例如判斷一個對象是否被啟用、禁用或者被選擇等），還支持對屬性和層次的隨意組合疊加。使用表 1-4 中的函數就能按照 CSS 規則來選取 DOM 中的元素。
| 函數 | 描述 | 示例 | 結果 |
|---|---|---|---|
| querySelector() | 根據指定的選擇規則，返回在頁面中找到的第一個匹配元素 | querySelector(“input.error”); | 返回第一個CSS類名為 |
| querySelectorAll | 根據指定規則返回頁面中所有相匹配的元素 | querySelectorAll(“#results td”); | 返回id值為results的元素下所有的單元格 |
可以為 Selectors API 函數同時指定多個選擇規則，例如：
// 選擇文檔中類名為 highClass 或 lowClass 的第一個元素
var x = document.querySelector(“.highClass”, “.lowClass”);對 于 querySelector() 來 說 ， 選 擇 的 是 滿 足 規 則 中 任 意 條 件 的 第 一 個 元 素 。 對 于querySelector- All()來說，頁面中的元素只要滿足規則中的任何一個條件，都會被返回。多條規則是用逗號分隔的。以前在頁面上跟蹤用戶操作很困難，但新的 Selectors API 提供了更為便捷的方法。比如，頁面上有一個表格，我們想獲取鼠標當前在哪個單元格上。從代碼清單 1-3 中可以看到使用 SelectorsAPI 實現有多簡單。這份源代碼也可以從 code/intro 路徑下找到。
代碼清單 1-3 使用 Selector API?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Query Selector Demo</title><style type="text/css">td { border-style: solid; border-width: 1px; font-size: 300%; }td:hover { background-color: cyan; }#hoverResult { color: green; font-size: 200%; }</style></head><body><section> <!-- create a table with a 3 by 3 cell display --><table><tr><td>A1</td><td>A2</td><td>A3</td></tr><tr><td>B1</td><td>B2</td><td>B3</td></tr><tr><td>C1</td><td>C2</td><td>C3</td></tr></table><div>Focus the button, hover over the table cells, and hit Enter to identify themusing querySelector('td:hover').</div><button type="button" id="findHover" autofocus>Find 'td:hover' target</button><div id="hoverResult"></div><script type="text/javascript">document.getElementById("findHover").onclick = function() {// 找到鼠標當前懸停的單元格var hovered = document.querySelector("td:hover");if (hovered)document.getElementById("hoverResult").innerHTML = hovered.innerHTML;}</script> </section> </body> </html>
從以上示例可以看到，僅用一行代碼即可找到用戶鼠標下面的元素：
var hovered = document.querySelector(“td:hover”);
提示 Selectors API不僅僅只是方便，在遍歷DOM的時候，Selectors API通常會比以前的子節點搜索API更快。為了實現快速樣式表，瀏覽器對選擇器匹配進行了高
不難理解為什么 W3C 中的 Selectors API 標準規范會從 CSS 規范中單獨分離出來，從上面的代碼也可以看出來，Selectors API 在樣式應用以外同樣大有作為。雖然本書不會深入講解 SelectorsAPI 的全部細節，但是對于希望優化 DOM 操作方式的 Web 開發人員來說，建議使用新的 SelectorsAPI 以便快速查詢應用架構。度優化。
1.6.5?JavaScript 日志和調試
JavaScript 日志和瀏覽器內調試從技術上講雖然不屬于 HTML5 的功能，但在過去的幾年里，相關工具的發展出現了質的飛躍。第一個可以用來分析 Web 頁面及其所運行腳本的強大工具是一款名為 Firebug 的 Firefox 插件。
現在，相同的功能在其他瀏覽器的內嵌開發工具中也可以找到：Safari 的 Web Inspector、Google 的 Chrome 開發者工具（Developer Tools） IE 的開發者工具、（Developer Tools） 以及 Opera，的 Dragonfly。圖 1-3 是 Google 的 Chrome 開發者工具截圖，顯示了大量與當前 Web 頁面相關的信息（使用快捷鍵 Ctrl+Shift+J 可以看到），包括調試控制臺、資源視圖、存儲視圖等。
很多調試工具支持設置斷點來暫停代碼執行、分析程序狀態以及查看變量的當前值。
console.log API 已經成為 JavaScript 開發人員記錄日志的事實標準。為了便于開發人員查看記錄到控制臺的信息，很多瀏覽器提供了分欄窗格的視圖。console.log API 要比 alert()好用很多，因為它不會阻塞腳本的執行。
1.6.6window.JSON
JSON 是一種相對來說比較新并且正在日益流行的數據交換格式。作為 JavsScript 語法的一個子集，它將數據表示為對象字面量。由于其語法簡單和在 JavaScript 編程中與生俱來的兼容性，JSON 變成了 HTML5 應用內部數據交換的事實標準。典型的 JSON API 包含兩個函數，parse()和 stringify()（分別用于將字符串序列化成 DOM 對象和將 DOM 對象轉換成字符串）。
如果在舊的瀏覽器中使用 JSON，需要 JavaScript 庫（有些可以從http://json.org 找到）。在JavaScript中執行解析和序列化效率往往不高，所以為了提高執行速度，現在新的瀏覽器原生擴展了對 JSON 的支持，可以直接通過 JavaScript 來調用 JSON 了。這種本地化的 JSON 對象被納入了ECMAScript 5 標準，成為了下一代 JavaScript 語言的一部分。它也是 ECMAScript 5 標準中首批被瀏覽器支持的功能之一。所有新的瀏覽器都支持 window.JSON，將來 JSON 必將大量應用于HTML5 應用中。
1.6.7DOM Level 3
事件處理是目前 Web 應用開發中最令人頭疼的部分之一。除了 IE 以外，絕大多數瀏覽器都支持處理事件和元素的標準 API。早期 IE 實現的是與最終標準不同的事件模型， IE9 將會支持而DOM Level 2 和 DOM Level 3 的特性。如此，在所有支持 HTML5 的瀏覽器中，我們終于可以使
用相同的代碼來實現 DOM 操作和事件處理了，包括非常重要的 addEventListener()和dispatchEvent()方法。
1.6.8 Monkeys、Squirrelfish 和其他 JavaScript 引擎
最新一輪的瀏覽器創新不僅僅是增加了新的標簽和 API。最重要的變化之一是主流瀏覽器中JavaScript/ECMAScript 引擎飛快的升級。新的 API 提供了很多上一代瀏覽器無法實現的功能，因而腳本引擎整體執行效率的提升，不論對現有的，還是使用了最新 HTML5 特性的 Web 應用都有好處。還記得瀏覽器在顯示復雜圖像、處理數據或者編輯長篇文章時，明顯變得遲鈍的情景嗎？再好好想一想。
最近幾年，瀏覽器廠商爭相比拼，看誰能開發出更快的 JavaScript 引擎。過去的 JavaScript
純粹是被解釋執行，而最新的引擎則直接將腳本編譯成原生機器代碼，相比 2005 年前后的瀏覽器，速度的提升已經不在一個數量級上了。
大約從 2006 年 Adobe 將其 JIT 編譯引擎和代號為 Tamarin 的 ECMAScript 虛擬機捐贈給Mozilla 基金會開始，競爭的序幕就拉開了。盡管新版的 Mozilla 中 Tamarin 技術已經所剩無幾，但 Tamarin 的捐贈促進了各家瀏覽器對新腳本引擎的研發，而這些引擎的名字就如同他們聲稱的性能一樣有意思。
')
