《JavaScript高級程序設計》（第3版）讀書筆記第11章 DOM拓展

時間 2019-12-05

標籤 javascript 高級程序設計讀書筆記 dom 拓展欄目 JavaScript 简体版

原文原文鏈接

儘管DOM做爲API已經很是完善了，但爲了實現更多功能，仍然會有一些標準或專有的拓展。2008年以前，瀏覽器中幾乎全部的拓展都是專有的，此後W3C着手將一些已經成爲事實標準的專有拓展標準化，並寫入規範中。
對DOM的兩個主要拓展是Selectors API (選擇API)和HTML5。這兩個拓展都源自開發社區，而將某些常見作啊及API標準化，一直是衆望所歸。

選擇符API

jQuery的核心就是經過CSS選擇符查詢DOM文檔取得元素的引用，從而拋開了getElementById() 和 gettElementByTagName()。
Selectors API 是又W3C發起制定的一個標準，致力於讓瀏覽器原生支持CSS查詢。全部實現這一功能的JavaScript庫都會寫一個基礎的CSS解析器，而後再使用已有的DOM方法查詢文檔並找到匹配的節點。而把這個功能變成原生API以後，解析和樹查詢操做能夠在瀏覽器內部經過編譯後的代碼完成，極大改善了性能。

`querySelector()`方法

querySelector()方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，若是沒有找到匹配的元素，返回null。

// 取得body元素
var body = document.querySelector("body");

// 取得ID爲「myDiv」的元素
var myDiv = document.querySelector("#myDiv");

// 取得類爲"selected"的第一個元素
var selected = document.querySelector(".selected");

// 取得類爲"button"的第一個圖像元素
var selected = document.querySelector("img.button");

若是傳入了不支持的選擇符，會拋出錯誤。

`querySelectorAll()`方法

和上面相似，但返回的不只僅是匹配的第一個元素，而是一個NodeList的實例，若是沒有匹配，NodeList就是空的。

// 取得某div中全部em元素
var ems = document.getElementById("myDiv").querySelectorAll("em");

// 取得類爲「selected」的全部元素
var selected = document.querySelectorAll(".selected");

// 取得全部p元素中的全部strong元素
var strongs = document.querySelectorAll("p strong");

取得返回NodeList中的每個元素，可使用item()方法，也可使用方括號語法。

`matchesSelector()`方法

Selector API Level2 規範爲Element類型新增了一個matchesSelector()方法。接收一個參數，即CSS選擇符，若是調用元素與該選擇符匹配返回true，不然返回false。
截止2011年年中，尚未瀏覽器支持該方法，不過有一些實驗性的實現。所以若是你想使用這個方法，最好編寫一個包裝函數：

function matchesSelector(element, selector) {
  if (element.matchesSelecotr) {
    return element.matchesSelecotr(selector)
  } else if (element.msMatchesSelecotr) {
    return element.msMatchesSelecotr(selector)
  } else if (element.mozMatchesSelecotr) {
    return element.mozMatchesSelecotr(selector)
  } else if (element.webkitMatchesSelecotr) {
    return element.webkitMatchesSelecotr(selector)
  } else {
    throw new Error("Not supported.");
  }
}

元素遍歷

對於元素間的空格，IE9及以前版本不會返回文本節點，而其餘全部瀏覽器都會返回文本節點。爲了彌補這一差別，而又同時保持DOM規範不變，Element Traversal 規範新定義了一組屬性。javascript
- childElementCount: 返回子元素（不包括文本節點和註釋）的個數
- firstElementChild: 指向第一個子元素；firstChild的元素版
- lastElementChild: 指向最後一個子元素；lastChild的元素版
- previousElementSibling: 指向前一個同輩元素；previousSibling的元素版
- nextElementSibling: 指向前一個同輩元素；nextSibling的元素版

// 跨瀏覽器遍歷某元素的全部子元素

// 老版的兼容性代碼
var i,
    len,
    child = element.firstChild;
while(child != element.lastChild) {
  // 檢查是否是元素
  if (child.nodeType == 1) {
    processChild(child);
  }
  child = child.nextSibling;
}

// 使用新版的方法
var i,
    len,
    child = element.firstChild;
while(child != element.lastElementChild) {
  processChild(child);
  child = child.nextElementSibling;
}

支持Element Traversal 規範的瀏覽器有 IE9+ Firefox3.5+ Safari4+ Chrome Opera10+

HTML5

HTML5全部以前的版本對JavaScript接口的描述不過三言兩語，主要篇幅都用於定義標記，與JavaScript相關的內容一律交由DOM規範去定義。
HTML5規範則圍繞如何使用新增標記定義了大量JavaScript API。其中一些API與DOM重疊，定義了瀏覽器應該支持的DOM拓展。
因爲HTML5涉及的面很是廣，本節只討論與DOM節點相關的內容。

與類（class）相關的擴充

HTML5 新增了不少API，致力於簡化CSS類的用法。

`getElementsByClassName()`方法

// 取得全部類中包含"username"和"current"的元素
// 類名的前後順序無所謂
var allCurrentUsernames = docment.getElementsByClassName("username current");

// 取得ID爲"myDiv"的元素中帶有類名"selected"的全部元素
var selected = document.getElementById("myDiv").getElemenstByClassName("selected");

支持getElementsByClassName()方法的瀏覽器 IE9+ Firefox3+ Safari3.1+ Chrome Opera9.5+

classList屬性

在操做類名時，須要經過className屬性添加、刪除和替換類名。由於className中是一個字符串，因此即便只是修改字符串一部分，也必須每次都設置整個字符串的值。
HTML5 新增了一種操做類名的方式，可讓操做更簡單也更安全，那就是爲全部元素添加了classList屬性。
classList屬性是新集合類型 DOMTokenList的實例。與其餘DOM集合相似，DOMTokenList 有一個表示本身包含多少元素的length屬性，而要去的每一個元素可使用item()方法，或者方括號語法。此外，這個新類型還定義以下方法：html
- add(value): 將給定的字符串值添加到列表中。若是值已經存在，就不添加了。
- contains(value): 表示列表中是否存在給定的值，若是存在返回true，反之false。
- remove(value): 從列表中刪除給定的字符串。
- toggle(value): 若是列表中已經存在給定的值，刪除它；若是沒有，添加它。
有了classList屬性，除非你須要刪除全部類名，或者徹底重寫元素的class屬性，不然就用不到className屬性了。
支持classList的瀏覽器 Firefox3.6+ Chrome

焦點管理

HTML5添加了輔助DOM焦點的功能。
document.activeElement屬性，始終會引用DOM中當前得到了焦點的元素。元素得到焦點的方式有頁面加載、用戶輸入（一般是經過Tab鍵）和在代碼中調用focus()方法。

var button = document.getElementById("myButton");
button.focus();
console.log(document.activeElement === button);     // true

默認狀況下，文檔剛剛加載完成時，document.activeElement中保存的是document.body元素的引用。文檔加載期間，document.activeElement的值爲null
document.hasFocus()方法，這個方法用於肯定文檔是否得到了焦點。

var button = document.getElementById("myButton");
button.focus();
console.log(document.hasFocus());        // true

支持的瀏覽器 IE4+ Firefox3+ Safari4+ Chrome Opera8+

HTMLDocument的變化

readyState屬性

Document.readyState屬性有兩個可能的值：java
- loading正在加載文檔
- complete已經加載完文檔
支持的瀏覽器 IE4+ Firefox3.6+ Safari Chrome Opera9+

if (document.readyState == "complete") {
  ...
}

兼容模式

自從IE6開始區分渲染頁面的模式是標準的仍是混雜的，檢測頁面的兼容性就成爲瀏覽器的必要功能。IE爲此給document添加了一個名爲compatMode的屬性，告訴開發人員瀏覽器採用了哪一種渲染模式。
document.compatMode標準模式下等於"CSS1Compat",混雜模式下等於"BackCompat"。
最終HTML5將這個屬性歸入標準
支持的瀏覽器 IE Firefox Safari3.1 Chrome Opera

if (document.compatMode == "CSS1Compat") {
  console.log("Standards mode");
} else {
  console.log("Quirks mode");
}

head屬性

HTML5新增了document.head屬性，與docuemnt.body對應
支持的瀏覽器 Chrome Safari 5+

var head = document.head || document.getElementsByTagName("head")[0];

字符集屬性

HTML5新增了幾個與文檔字符集有關的屬性
charset屬性表示文檔中實際使用的字符集，也能夠用來指定新字符集。默認值是"UTF-16"，能夠經過<meta>元素、響應頭部或直接設置charset屬性修改這個值。
支持的瀏覽器 IE Safari Opera Chrome 。 Firefox 支持 document.Characterset。

console.log(document.charset);     // "UTF-16"
document.charset = "UTF-8";

defaultCharset表示根據默認瀏覽器及操做系統的設置，當前文檔默認的字符集應該是什麼。若是文檔沒有使用默認的字符集，那charset和defaultCharset屬性值可能會不同。

if (document.charset != document.defaultCharset) {
  console.log("Custom character set being used.");
}

支持的瀏覽器 IE Safari Chrome 。

自定義數據屬性

HTML5 規定能夠爲元素添加非標準的屬性，但要添加前綴data- ，目的是爲元素提供與渲染無關的信息，或者提供語義信息。這些屬性能夠任意添加、隨便明明，只要以data-開頭便可。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

添加了自定義屬性以後，能夠經過元素的dataset屬性來訪問自定義屬性的值。dataset屬性的值時DOMStringMap的實例，也就是一個名值對的映射。在這個映射中，每一個data-name形式的屬性都會有一個對應的屬性，只不過屬性沒有data-前綴。

var div = document.getElementById("myDiv");

// 取得自定義屬性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;

// 設置值
div.dataset.appId = 2345;
div.dataset.myname = "Michael";

// 有沒有"myname"值呢？
if (div.dataset.myname) {
  console.log("Hello, " + div.dataset.myname);
}

插入標記

雖然DOM爲操做節點提供了細緻入微的控制手段，但在須要給文檔插入大量HTML標記的狀況下，經過DOM操做仍然很是麻煩，由於不只要建立一系列DOM節點，還要當心按照正確的順序把它們鏈接起來。
相對而言，直接插入HTML字符串不只更簡單，速度也更快。如下插入標記的DOM拓展已經歸入了HTML5規範。

innerHTML屬性

在讀模式下，innerHTML屬性返回與調用元素的全部子節點（包括元素、註釋和文本節點）對應的HTML標記。
在寫模式下，innerHTML會根據指定的值建立新的DOM樹，而後用這個DOM樹徹底替換調用元素原先的全部子節點。

<div id="content">
  <p>This is a <strong>paragraph</strong> with a list following it.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<!-- 對於上面的div來講 innerHTML屬性會返回以下字符串 -->
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

不一樣瀏覽器返回的文本格式不會有所不一樣。IE和Opera會將全部標籤轉換爲大小寫形式，而Safari、Chrome、Firefox則會原本來本的按照原先文檔中（或指定這些標籤時）的格式返回HTML，包括空格和縮進。
在寫模式下，傳入innerHTML的值都會按照瀏覽器處理HTML的標註方式轉換爲元素（一樣因瀏覽器而異）。若是設置的值僅是純文本而沒有HTML標籤，那麼結果就是設置純文本。

div.innerHTML = "Hello world!";
div.innerHTML = "Hello & welcom, <b>\"reader\"!</b>";
// 以上操做獲得： <div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div>

使用innerHTML屬性也有一些限制，大多數瀏覽器中經過innerHTML插入<script>元素並不會執行其中的腳本。IE8及更早的版本是惟一可以在這種狀況下執行腳本的瀏覽器，但必須知足2個條件：node
- <script>元素指定defer屬性
- <script>元素必須位於（微軟所謂的）「有做用域的元素」（scoped element）以後。<script>元素被認爲是「無做用域的元素」（NoScoped element），也就是在頁面中看不到的元素，與<style>元素或註釋相似。
沒有(不支持)innerHTML屬性的元素有：web
- <col>
- <colgroup>
- <frameset>
- <head>
- <html>
- <style>
- <table>
- <tbody>
- <thead>
- <tfoot>
- <tr>
- IE8及更早版本 <title>元素也沒有
Firefox在內容類型爲application/xhtml+xml的XHTML文檔中設置innerHTML有嚴格的限制。在XHTML文檔中使用innerHTML時，XHTML代碼必須徹底符合要求。

outerHTML屬性

在讀模式下，outerHTML返回調用它的元素及全部子節點的HTML標籤。
在寫模式下，outerHTML會根據指定的HTML字符串建立新的DOM子樹，而後用這個DOM子樹徹底替換調用元素。
在元素上調用outerHTML會返回相同的代碼，包括元素自己。因爲瀏覽器解析和解釋HTML標記的不一樣，結果可能會有所不一樣。

<div id="content">
  <p>This is a <strong>paragraph</strong> with a list following it.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<!-- 在div上調用outerHTML會返回相同的代碼，包括div自己 -->
<div id="content">
  <p>This is a <strong>paragraph</strong> with a list following it.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

使用outerHTML屬性，會替換調用的元素自己

div.outerHTML = "<p>This is a paragraph.</p>";

// 上面的代碼等價於下面的代碼
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);

支持的瀏覽器 IE4+ Safari4+ Chrome Opera8+ Firefox8+

insertAdjacentHTML() 方法

insertAdjacentHTML()接收兩個參數：插入位置和要插入的HTML文本。
第一個參數必須是下列之一：瀏覽器
- "beforebegin" 在當前元素以前插入一個緊鄰的同輩元素
- "afterbegin" 在當前元素之下插入一個新的子元素或在第一個子元素以前再插入新的子元素
- "beforeend" 在當前元素之下插入一個新的子元素或在最後一個子元素以後再插入新的子元素
- "afterend" 在當前元素以後插入一個緊鄰的同輩元素
第二個參數是HTML字符串，若是瀏覽器沒法解析該字符串，就會拋出錯誤。

// 做爲前一個同輩元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");

// 做爲第一個子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");

// 做爲最後一個子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");

// 做爲後一個同輩元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

支持的瀏覽器 IE Firefox8+ Safari Opera Chrome

內存與性能問題

使用本節介紹的方法替換子節點可能會致使瀏覽器的內存佔用問題，尤爲是IE，問題更加明顯。
在刪除帶有時間處理程序或引用了其餘JavaScript對象子樹時，就有可能致使內存佔用問題。假設某個元素有一個時間處理程序（或者引用了一個JavaScript對象做爲屬性），在使用前述某個屬性將該元素從文檔樹刪除後，元素與事件處理程序（或JavaScript對象）之間的綁定關係在內存中並無一併刪除。若是這種狀況頻繁出現，頁面佔用的內存數量就會明顯增長。
所以，在使用innerHTML outerHTML insertAdjacentHTML() 時，最好先手工刪除要被替換的元素的全部事件處理程序和JavaScript對象屬性（第13章將進一步討論事件處理程序）。
不過使用這幾個屬性，特別是innerHTML仍然仍是能夠爲咱們提供不少遍歷的。插入大量HTML標記時，設置innerHTML或outerHTML時就會建立一個HTML解析器，這個解析器是在瀏覽器級別的代碼（一般是C++編寫的）基礎上運行的，所以比執行JavaScript快的多。
建立和銷燬HTML解析器也會帶來性能損失，因此最好可以將設置innerHTML或outerHTML的次數控制在合理的範圍內。

scrollIntoView()方法

如何滾動頁面也是DOM規範沒有解決的一個問題。HTML5最終選擇了scrollIntoView()做爲標準方法。
scrollIntoView()能夠在全部HTML元素上調用，經過滾動瀏覽器窗口或某個容器元素，調用元素就能夠出如今視口中。安全
- 若是傳入true做爲參數，或者不傳任何參數，那麼窗口滾動以後會讓調用元素的頂部與視口頂部儘量的平齊。
- 若是傳入false做爲參數，調用元素會盡量所有出如今視口中，（可能的話，調用元素的底部會與視口頂部平齊）不過頂部不必定平齊。
當頁面發生變化時，通常會用這個方法來吸引用戶的注意力。實際上，爲某個元素設置焦點也會致使瀏覽器滾動並顯示出得到焦點的元素。
支持的瀏覽器 IE Firefox8+ Safari Opera

專有拓展

雖然全部瀏覽器開發商都知曉堅持標準的重要性，但在發現某項功能缺失時，這些開發商都會一如既往的向DOM中添加專有拓展，以彌補功能上的不足。
表面上看不太友好，但實際上專有拓展爲Web開發領域提供了不少重要的功能，這些功能最終都在HTML5規範中得以標準化。
即使如此，仍然還有大量專有的DOM拓展沒有成爲標準。編寫本書時，它們仍是專有功能，並且只獲得了少數瀏覽器的支持

文檔模式

IE8引入了一個新的概念叫「文檔模式」（document mode）。頁面的文檔模式決定了可使用什麼功能。換言之，文檔模式決定了你可使用哪一個級別的CSS，能夠在JavaScript中使用哪些API，以及如何對待文檔類型（doctype）。到了IE9總有有如下4種文檔模式：app
- IE5: 以混雜模式渲染頁面（IE5的默認模式就是混雜模式）。IE8及更高版本中的新功能都沒法使用。
- IE7: 以IE7標準模式渲染頁面。IE8及更高版本中的新功能都沒法使用
- IE8: 以IE8標準模式渲染頁面。IE8新功能都能用，包括 Selectors API 、更多CSS2級選擇符和某些CSS3功能，還有一些HTML5功能。不能使用IE9中的新功能。
- IE9: 以IE9標準模式渲染頁面。IE9新功能都能用，包括 ECMAScript 5 、完整的CSS3級，更多HTML5功能。
要強制瀏覽器以某種模式渲染頁面，可使用HTTP頭部信息X-UA-Compatible或等價的<meta>標籤來設置。

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=7">

這裏的IE版本（IEVersion）有如下不一樣的值，不必定與上述4中文檔模式對應。函數
- Edge: 始終以最新的文檔模式來渲染頁面。忽略文檔類型聲明。
- EmulateIE9: 若是有文檔類型聲明，則以IE9標準模式渲染，不然將文檔模式設置爲IE5。
- EmulateIE8: 若是有文檔類型聲明，則以IE8標準模式渲染，不然將文檔模式設置爲IE5。
- EmulateIE7: 若是有文檔類型聲明，則以IE7標準模式渲染，不然將文檔模式設置爲IE5。
- 9: 強制以IE9標準模式渲染頁面，忽略文檔類型聲明
- 8: 強制以IE8標準模式渲染頁面，忽略文檔類型聲明
- 7: 強制以IE7標準模式渲染頁面，忽略文檔類型聲明
- 5: 強制將文檔模式設置爲IE5，忽略文檔類型聲明
document.documentMode 屬性能夠知曉給定頁面使用的是什麼文檔模式，它會返回文檔模式的版本號（在IE9中，可能返回的版本號爲五、七、八、9）

children 屬性

IE9以前的版本處理空白符與其餘瀏覽器有差別，所以出現了children屬性。這個屬性是HTMLCollection的實例，只包含元素中一樣仍是元素的子節點。除此以外，children 與 childNodes沒有區別。
IE8及更早版本的children屬性中也會包含註釋節點，但IE9以後的版本只返回元素節點。
支持的瀏覽器 IE5 Firefox 3.5 Safari2(有bug) Safari3 Opera8 和Chrome

contains() 方法

contains() 祖先節點調用這個方法，接收一個參數是要檢查的後代節點。若是祖先節點包含傳入的後代節點返回true，不然false。
支持的瀏覽器 IE9+ Firefox Safari Opera Chrome

document.documentElement.contains(document.body);  // true

使用DOM Level 3 compareDocumentPosition()也可以肯定節點間的關係。
這個方法肯定兩個節點間的關係，返回表示該關係的位掩碼（bitmask）

掩碼	節點關係
1	無關（給定的節點不在當前文檔中）
2	居前（給定的節點在DOM樹中位於參考節點以前）
4	居後（給定的節點在DOM樹中位於參考節點以後）
8	包含（給定的節點是參考節點的祖先）
16	包含（給定的節點是參考節點的後代）

支持的瀏覽器 IE9+ Firefox Safari Opera9.5 Chrome
爲模仿contains()方法，應該關注的是掩碼16.能夠對compareDocumentPosition()的結果執行按位與。

var result = document.documentElement.compareDocumentPosition(document.body);
console.log(!!(result & 16));

執行上面的代碼後，結果會變成20（表示「居後」的4加上表示「被包含」的16）。對掩碼16執行安慰操做會返回一個非零數值，而兩個邏輯非操做符會將該數值轉換成布爾值。
注意：回值能夠是值的組合。例如，返回 20 意味着在 p2 在 p1 內部（16），而且 p1 在 p2 以前（4）。
使用一些瀏覽器及能力檢測，就能夠寫出以下所示的一個通用的contains函數：

function contains(refNode, otherNode) {
  if (typeof refNode.contains == "function" &&
        (!client.engine.webkit || client.engine.webkit >= 522)) {
    // 瀏覽器支持contains方法直接使用
    return refNode.contains(otherNode);
  } else if (typeof refNode.compareDocumentPosition == "function") {
    // 瀏覽器支持compareDocumentPosition方法
    // 用返回結果和16進行按位與，再轉換成布爾值返回
    return !!(refNode.compareDocumentPosition(otherNode) & 16);
  } else {
    // 針對Safari設計的驗證方法
    // 在文檔樹中向上遞歸驗證是否有refNode
    // 到達文檔樹頂端，parentNode 的值爲null，循環結束
    var node = otherNode.parentNode;
    do {
      if (node === refNode) {
        return true;
      } else {
        node = node.parentNode;
      }
    } while (node !== null);
    return false;
  }
}

插入文本

IE原來有innerHTML和outerHTML已被HTML5歸入規範。但另外兩個插入文本的專有屬性則沒有這麼好的運氣。性能
- innerText
- outerText

滾動

scrollIntoView()歸入規範後，仍有幾個專有方法能夠在不一樣瀏覽器中使用。下列都是對HTMLElement類型的擴展，所以在全部元素中均可以調用：
- scrollIntoViewIfNeeded(alignCenter): 只在當前元素在視口中不可見的狀況下，才滾動瀏覽器窗口或容器元素，最終讓它可見。若是當前元素可見，這個方法什麼都不會作。若是將可選的alignCenter參數設置爲true，則表示儘可能將元素顯示在視口中部（垂直方向）。Safari和Chrome實現了這個方法
- scrollByLines(lineCount): 將元素的內容滾動到指定的行高，lineCount能夠是正值也能夠是負值。Safari和Chrome實現了這個方法
- scrollByPages(lineCount): 將元素的內容滾動到指定的頁面高度，具體高度由元素的高度決定。Safari和Chrome實現了這個方法
須要注意的是，scrollIntoView()和scrollIntoViewIfNeeded()的做用對象是元素的容器，而scrollByLines()和scrollByPages()影響的是元素自身

// 將頁面主體滾動5行
document.body.scrollByLines(5);

// 在當前元素不可見的時候，讓它進入瀏覽器的視口
document.images[0].scrollIntoViewIfNeeded();

// 將頁面主體往回滾動1頁
document.body.scrollByPages(-1);