動態腳本

• 使用<script>元素可以向頁面中插入JavaScript代碼，一種方式是通過其src特性包含外部文件，另一種方式就是用這個元素本身來包含代碼
• 動態腳本，指的是在頁面加載時不存在，但將來的某一時刻通過修改DOM 動態添加的腳本。
• 創建動態腳本也有兩種方式：插入外部文件和直接插入JavaScript 代碼。
• 動態加載的外部JavaScript 文件能夠立即運行。

<script type="text/javascript" src="client.js"></script>

• 創建這個節點的DOM 代碼

function loadScript(url){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}
loadScript("client.js");

• 另一種指定JavaScript 代碼的方式是行內方式。

<script type="text/javascript">
    function sayHi(){
        alert("hi");
    }
</script>

function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex){
        //針對IE
        script.text = code;
    }
    document.body.appendChild(script);
}

loadScriptString("function sayHi(){alert('hi');}");

動態樣式

• 能夠把CSS 樣式包含到HTML頁面中的元素有兩個。其中，<link>元素用于包含來自外部的文件，而<style>元素用于指定嵌入的樣式。
• 動態樣式是指在頁面剛加載時不存在的樣式；動態樣式是在頁面加載完成后動態添加到頁面中的。

<link rel="stylesheet" type="text/css" href="styles.css">

• 使用DOM 代碼可以很容易地動態創建出這個元素

function loadStyles(url){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
loadStyles("styles.css");

• 另一種定義樣式的方式是使用<style>元素來包含嵌入式CSS.

<style type="text/css">
body {
    background-color: red;
}
</style>

function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    } catch (ex){
        //針對IE
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

loadStyleString("body{background-color:red}");

操作表格

• 為了方便構建表格，HTML DOM為<table>、<tbody>和<tr>元素添加了一些屬性和方法。

• 為<table>元素添加的屬性和方法如下。

  • caption：保存著對<caption>元素（如果有）的指針。
  • tBodies：是一個<tbody>元素的HTMLCollection。
  • tFoot：保存著對<tfoot>元素（如果有）的指針。
  • tHead：保存著對<thead>元素（如果有）的指針。
  • rows：是一個表格中所有行的HTMLCollection。
  • createTHead()：創建<thead>元素，將其放到表格中，返回引用。
  • createTFoot()：創建<tfoot>元素，將其放到表格中，返回引用。
  • createCaption()：創建<caption>元素，將其放到表格中，返回引用。
  • deleteTHead()：刪除<thead>元素。
  • deleteTFoot()：刪除<tfoot>元素。
  • deleteCaption()：刪除<caption>元素。
  • deleteRow(pos)：刪除指定位置的行。
  • insertRow(pos)：向rows 集合中的指定位置插入一行。

• 為<tbody>元素添加的屬性和方法如下。

  • rows：保存著<tbody>元素中行的HTMLCollection。
  • deleteRow(pos)：刪除指定位置的行。
  • insertRow(pos)：向rows 集合中的指定位置插入一行，返回對新插入行的引用。

• 為<tr>元素添加的屬性和方法如下。

  • cells：保存著<tr>元素中單元格的HTMLCollection。
  • deleteCell(pos)：刪除指定位置的單元格。
  • insertCell(pos)：向cells集合中的指定位置插入一個單元格，返回對新插入單元格的引用。

• 使用DOM創建HTML表格

<table border="1" width="100%">
    <tbody>
        <tr>
            <td>Cell 1,1</td>
            <td>Cell 2,1</td>
        </tr>
        <tr>
            <td>Cell 1,2</td>
            <td>Cell 2,2</td>
        </tr>
    </tbody>
</table>

//創建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//創建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//創建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

//創建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//將表格添加到文檔主體中
document.body.appendChild(table);

使用NodeList

• 從本質上說，所有NodeList 對象都是在訪問DOM文檔時實時運行的查詢。

//下列代碼會導致無限循環
var divs = document.getElementsByTagName("div"),
i,
div;
for (i=0; i < divs.length; i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

-要迭代一個NodeList，最好是使用length 屬性初始化第二個變量，然后將迭代器與該變
量進行比較。

var divs = document.getElementsByTagName("div"),
i,
len,
div;
for (i=0, len=divs.length; i < len; i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

• 一般來說，應該盡量減少訪問NodeList的次數。因為每次訪問NodeList，都會運行一次基于文檔的查詢。所以，可以考慮將從NodeList 中取得的值緩存起來。

DOM小結

• DOM是語言中立的API，用于訪問和操作HTML 和XML 文檔。
• DOM1 級將HTML 和XML 文檔形象地看作一個層次化的節點樹，可以使用JavaScript 來操作這個節點樹，進而改變底層文檔的外觀和結構。

• DOM 由各種節點構成
  • 最基本的節點類型是Node，用于抽象地表示文檔中一個獨立的部分；所有其他類型都繼承自Node。
  • Document 類型表示整個文檔，是一組分層節點的根節點。在JavaScript中，document 對象是Document 的一個實例。使用document 對象，有很多種方式可以查詢和取得節點。
  • Element 節點表示文檔中的所有HTML或XML元素，可以用來操作這些元素的內容和特性。
  • 另外還有一些節點類型，分別表示文本內容、注釋、文檔類型、CDATA區域和文檔片段。

• 訪問DOM 的操作在多數情況下都很直觀，不過在處理<script>和<style>元素時還是存在一些復雜性。
• 由于這兩個元素分別包含腳本和樣式信息，因此瀏覽器通常會將它們與其他元素區別對待。這些區別導致了在針對這些元素使用innerHTML 時，以及在創建新元素時的一些問題。

• 理解DOM的關鍵，就是理解DOM 對性能的影響。
• DOM操作往往是JavaScript程序中開銷最大的部分，而因訪問NodeList導致的問題為最多。
• NodeList 對象都是“動態的”，這就意味著每次訪問NodeList對象，都會運行一次查詢。有鑒于此，最好的辦法就是盡量減少DOM操作。

好好學習