第一章 1.6 HTML5 的新功能(二)

時間 2019-11-11

原文原文鏈接

1.6.4 使用 Selectors API 簡化選取操做javascript

除了語義化元素外，HTML5 還引入了一種用於查找頁面 DOM 元素的快捷方式。 1-3 列出表了在 HTML5 出現以前，用來在頁面中查找特定元素的函數。css

函數	描述	示例
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 中的元素。html

函數	描述	示例	結果
querySelector()	根據指定的選擇規則，返回在頁面中找到的第一個匹配元素	querySelector(「input.error」);	返回第一個CSS類名爲
querySelectorAll	根據指定規則返回頁面中全部相匹配的元素	querySelectorAll(「#results td」);	返回id值爲results的元素下全部的單元格

能夠爲 Selectors API 函數同時指定多個選擇規則，例如：
// 選擇文檔中類名爲 highClass 或 lowClass 的第一個元素java

var x = document.querySelector(「.highClass」, 「.lowClass」);對於 querySelector() 來說，選擇的是滿足規則中任意條件的第一個元素。對於querySelector- All()來講，頁面中的元素只要知足規則中的任何一個條件，都會被返回。多條規則是用逗號分隔的。之前在頁面上跟蹤用戶操做很困難，但新的 Selectors API 提供了更爲便捷的方法。好比，頁面上有一個表格，咱們想獲取鼠標當前在哪一個單元格上。從代碼清單 1-3 中能夠看到使用 SelectorsAPI 實現有多簡單。這份源代碼也能夠從 code/intro 路徑下找到。編程

代碼清單 1-3 使用 Selector API json

<!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 them
            using 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更快。爲了實現快速樣式表，瀏覽器對選擇器匹配進行了高ide

不難理解爲何 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 的捐贈促進了各家瀏覽器對新腳本引擎的研發，而這些引擎的名字就如同他們聲稱的性能同樣有意思。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。