DOM擴展：DOM API的進一步增強[總結篇-下]

DOM1級主要定義了文檔的底層結構，並提供了基本的查詢操作的API，總體而言這些API已經比較完善，我們可以通過這些API完成大部分的DOM操作。然而，為了擴展DOM API的功能，同時進一步提高DOM操作的效率，DOM擴展也不斷被提出和採納。對DOM的擴展主要有兩部分：Selectors API和...

本文承接《DOM擴展：DOM API的進一步增強[總結篇-上]》，繼續總結DOM擴展相關的功能和API。 3.6 插入標記 DOM1級中的介面已經提供了向文檔中插入內容的介面，但是在給文檔插入大量HTML標記的時候操作還是很繁雜的，每次插入一個元素，不僅要調用創建元素和文本節點的介面，還要調用appendChild等向文檔中添加元素的介面，而且在添加時還要按照正確的順序。而如果使用插入標記的方法，直接向文檔中插入HTML字元串，由執行環境自動解析HTML字元串並創建相應的節點並添加到文檔中，這樣的話操作就方便多了。與插入標記相關的DOM擴展總結如下： 3.6.1 innerHTML屬性 使用innerHTML可以讀取元素所有子節點對應的HTML字元串(包括元素、註釋節點和文本)；也可以為元素設置子節點的HTML標記，此時會根據指定的值創建新的DOM樹，然後用新的DOM樹替換元素的子節點。 (1)讀取innerHTML屬性 以下麵的代碼為例：

<div id="wrapper">
    <p>一個段落在這裡</p>
    <span>這裡是一個span</span>
</div>

我們如果獲取div#wrapper的innerHTML值應該就是：

<p>一個段落在這裡</p>
<span>這裡是一個span</span>

但是IE8及以下的瀏覽器，在使用innerHTML屬性時返回的字元串有兩處不同： [1]所有的標簽都會轉為大寫 [2]所有的空白節點都會被去掉仍以上面的代碼為了，在IE8及以下的瀏覽器中返回的內容就是：

<P>一個段落在這裡</P><SPAN>這裡是一個span</SPAN>

(2)設置innerHTML屬性 設置innerHTML屬性時，HTML字元串會被解析為DOM樹並替換元素的所有子節點。如果傳入的字元串不包含任何標簽，那麼生成的就是文本節點，而如果傳入的字元串包含由HTML標簽，那麼標簽就會被解析為相應的HTML元素，這一點與創建Text類型節點時的情況是大不相同的：我們還是以上面的div#wrapper為例：如果調用：

div.innerHTML = "<strong>\"This is innerHTML\"</strong>";

則<strong>會被正確地解析，其中的文本就會被渲染成粗體。使用innerHTML也存在一些限制： [1]script標簽 在大部分瀏覽器中，通過innerHTML插入的<script>標簽不會被執行，只有IE9及以下的瀏覽器會執行，但也需要滿足一定的條件，首先需要為script添加defer特性，其次<script>標簽必須位於"有作用域"的元素之後("有作用域"的元素這裡可以理解為會直觀顯示在頁面上的元素，比如script，style這些元素是不會顯示在頁面上的，而input、div等元素會直接顯示在頁面上，因此可以稱為"有作用域")。還是以上面的div#wrapper為例，有如下代碼：

div.innerHTML = "<script>alert('dd')<\/script>";

代碼執行後，標簽會被插入div中，但腳本在任何瀏覽器中都不會執行。再來修改一下代碼：

div.innerHTML = "<script defer='defer'>alert('dd')<\/script>";

這段代碼為innerHTML加入了一個defer特性，但正如上文所講的，script是一個"沒有作用域"的元素，所以在IE9及以下瀏覽器中，腳本還是不會被執行。這個時候只要在<script>前面添加一個字元串或者其他"有作用域"的元素即可，為了不影響文檔的實際內容，一般在script標簽之前添加一個隱藏的input元素即可，代碼如下：

div.innerHTML = "<input type='hidden'/><script defer='defer'>alert('dd')<\/script>";

這樣在IE9及以下的瀏覽器中，腳本就能夠執行了。註：如果是引入外部javascript文件，那麼所有瀏覽器都不會下載執行js文件和其中的代碼 [2]style和link標簽 在IE8及以下的瀏覽器中，如果插入style標簽，必須也要跟隨在一個"有作用域"的元素之後，因此可以採用<script>一節中介紹的方法。高版本IE及其他瀏覽器中插入的style樣式都可以被執行。另外，如果使用link標簽引入外部樣式，那麼和style標簽的效果是一樣的還有一些元素是不支持innerHTML屬性的，包括：<table>、 <thead>、 <tbody>、 <tfoot>、 <tr>、 <style>、 <html>、 <head>、 <frameset>、<col>、<colgroup> 由於innerHTML可以插入HTML標簽，那麼就涉及到安全問題，最典型的的就是XSS，因此在使用innerHTML時應該對插入的字元串進行安全處理，特別是需要保存到資料庫中的字元串代碼。比如插入的字元串不應該包含腳本代碼(及時在一些瀏覽器中腳本代碼不會執行)，不應該包含事件處理程式和外部鏈接等。IE8中提供了window.toStaticHTML()，可以將傳入的字元串進行處理：刪除腳本節點和事件處理程式。 3.6.2 outerHTML屬性 從字面上 ，outerHTML與innerHTML的不同就在於"outer"，也就是說，outerHTML屬性在讀取或寫入時除了包含所有子節點，同時也把自己算進去了。我們還是以3.6.1中的div#wrapper為例，讀取outerHTML時返回的是：

<div id="wrapper">
    <p>一個段落在這裡</p>
    <span>這裡是一個span</span>
</div>

在IE8及以下的瀏覽器返回：

<DIV id=wrapper><P>一個段落在這裡</P><SPAN>這裡是一個span</SPAN></DIV>

而如果是寫入outerHTML屬性的話，則會將div本身直接替換掉，這也是與innerHTML的不同之處。 3.6.3 insertAdjacentHTML方法 insertAdjacentHTML方法為元素提供了更加靈活的標記插入方法，它接收兩個參數：插入的位置和HTML字元串，其中插入的位置必須是下麵幾個參數： "beforebegin"：在元素之前插入一個緊鄰的同輩元素 "afterbegin"：如果元素沒有子元素，那麼就直接插入；如果元素有子元素，就在第一個子元素之前插入 "beforeend"：如果元素沒有子元素，那麼就直接插入；如果元素有子元素，就在最後一個子元素之後插入
"afterend"：在元素之後插入一個緊鄰的同輩元素我們仍以3.6.1中的div為例，調用如下代碼：

div.insertAdjacentHTML("beforeend","<p>在結束前插入一個</p>");
console.log(div.innerHTML);

則返回的代碼就是：

<p>一個段落在這裡</p>
<span>這裡是一個span</span>
<p>在結束前插入一個</p>

insertAdjacentHTML方法的相容性如下圖：

在IE6-8下，table, tbody, thead, tr 元素調用這個方法會報錯。 3.6 scrollIntoView()方法 DOM1級中的介面已經scrollIntoView方法可以在所有的HTML元素上調用，調用這個方法後，瀏覽器會通過滾動視窗或者某個容器視窗來讓元素出現在視口中。這個方法接收一個布爾型參數，預設為true，如果為true的話，滾動後瀏覽器會讓視口頂部與元素頂部儘可能平齊；如果為false，調用元素會儘可能出現在視口中。 4 專有擴展 不同的瀏覽器開發商可能會為DOM擴展不同的功能，這些功能有的被吸收進入了標準，正如第3章中所介紹的這些擴展，而有的功能卻還沒有被納入標準中，不過這並不代表著這些功能以後也不會被寫入標準中，只是目前這些功能還是各瀏覽器專有的擴展，只能在特定的瀏覽器中使用。 4.1 文檔模式 IE8中引入了文檔模式的概念，文檔模式決定了我們可以使用哪些功能，也就是說，文檔模式決定了我們可以使用哪個級別的CSS，可以使用JavaScript API中的哪些功能以及如何對待文檔類型。之後的IE版本都提供了向下相容的文檔模式，比如在IE9中，可選的文檔模式有：IE5(以混雜模式渲染頁面)、IE7(以IE7的標準模式渲染頁面)、IE8(以IE8的標準模式渲染頁面，到了IE8，DOM Selectors API、CSS2.1的完整功能以部分CSS3的功能就都可以使用了)、IE9(以IE9的標準模式渲染頁面，到了IE9，ES5、CSS3以及更多的HTML5的功能也都可以使用了) 要強制瀏覽器以某種模式渲染頁面，可以通過設置HTTP的X-UA-Compatible頭部或設置對應的meta標簽來實現，聲明方式為：

<meta http-equiv="x-ua-compatible" content="IE=IEVersion"/>

其中，IEVersion的可能取值有： [1]edge：始終以最新的文檔模式來渲染頁面，忽略文檔類型聲明 [2]EmulateIEXX：XX代表某個IE版本，即如果有文檔類型聲明，那麼就以XX版本的IE標準模式來渲染頁面，否則把文檔模式設為IE5 [3]XX：XX代表某個IE版本，即忽略文檔類型聲明，以XX版本的IE標準模式渲染頁面如果沒有設置X-UA-Compatible，則瀏覽器會根據文檔類型聲明選擇最佳的文檔模式進行渲染。 document.documentMode可以判斷文檔當前所處的文檔模式，這個屬性只有IE支持。 4.2 children屬性 IE8及以下的瀏覽器在處理文本節點的空白節點時與其他瀏覽器有所不同，因此使用childNodes屬性遍歷DOM樹時還需要判斷某個子節點的具體類型，而children屬性的出現可以解決這個問題，它只返回一個元素所有的子元素。註：IE8及以下的瀏覽器也會返回註釋節點。

IE5+,Firefox3.5+,chrome,Opera8+,Safari3+支持children屬性。

4.3 contains方法

實際開發中，經常需要判斷一個節點是否包含另一個節點，比如我們有如下HTML代碼：

<body>
<div id="div-1">
    <div id="title">
        <h1 id="title-h1">標題</h1>
        <span id="more">更多</span>
    </div>
</div>
<div id="div-2">
    <div id="content-wrapper">
        <div id="block">
            <p id="desc">這裡是一段描述</p>
            <img id="img" src=""/>
        </div>
    </div>
</div>
</body>

如果我們想要判斷div#div-2是否包含span#more，如果只藉助DOM1級的API，那麼我們會可能寫出如下代碼：

var div2 = document.getElementById("div-2"),
div1 = document.getElementById("div-1"),
more = document.getElementById("more");
alert(nodeContains(div1, more));
alert(nodeContains(div2, more));
function nodeContains(node, childNode){
var result = false;
while(childNode != null){
if(childNode === node){
result = true;
break;
        }
        childNode = childNode.parentNode;
    }
return result;
}

代碼執行後將分別彈出true和false

註：Firefox9+和其他瀏覽器都支持contains方法。

有了contains方法之後，我們可以直接使用：

alert(div1.contains(more));
alert(div2.contains(more));

也將分別彈出true和false。 另外，DOM3級中又定義了compareDocumentPosition方法，也可以用來判斷一個節點是否包含另一個節點，這裡我們不再詳解這個方法，可以參考： http://www.w3.org/TR/domcore/#dom-node-comparedocumentposition 4.4 插入文本