DOM編程

剛開始接觸前端是從接觸和使用bootatrap和agularjs開始的。對於angularjs而言，儘可能避免進行DOM操做是這個框架的靈魂，若是實在是須要進行DOM操做的話，通常放在directive中進行。這樣就不會出如今初始加載頁面以後再進行dom操做，從而破壞了頁面的結構和angularjs的一些特性的展示。並且，若是貿然進行dom操做的話，還可能出現一些事與願違的事情，曾經在項目中遇到過，非常煩人，最後只能封裝到了directive中了。

關於這點，這裏就不深究了。拋開這些框架，DOM操做是前端開發中是很重要的部分。因此在這裏挖一挖DOM操做的那些事兒。

DOM

DOM是Document Object Model的縮寫-文檔對象模型，簡言之，就是使用樹形結構來形容HTML代碼。

• Dom就是一些讓JavaScript能操做HTML頁面控件的類、函數。

• DOM也像WinForm同樣，經過事件、屬性、方法進行編程。

• CSS+JavaScript+DOM=DHTML

• JavaScript中的大部分處理DOM的過程都是利用document對象。

javascript是一種基於對象和世界驅動，而且安全性較強的腳本語言。一個完整的javascript實現包括核心（ECMAScript），文檔對象模型（DOM）和瀏覽器對象模型（BOM）。
BOM包含DOM，二者之間的關係以下圖所示:

DOM文檔對象模型是HTML和XML的應用程序接口（API），DOM將整個頁面規劃成由節點層次構成的文檔。DOM對象給予開發者對HTML的訪問權限，而且使開發者能將HTML做爲XML文檔來處理和查看。DOM對象是與語言無關的API，意味着它的實現並非與javascript綁定，這在於初學者來講可能會理解錯誤。DOM是針對XML的基於樹的API，它關注的不只僅是解析XML代碼，而是用一系列相互關聯的對象來表示這些代碼，而這些對象能夠被修改，並且無需從新解析代碼就能直接訪問它們。因爲DOM的使用上的簡便，所以它成爲了Web瀏覽器和javascript最喜歡的方法。

document對象是BOM的對象，即window.document==document，可是它又同時屬於DOM，也是HTML DOM的HTMLDocument對象的一種表現形式，反過來講它也是XML DOM Document對象。

節點

JavaScript中的大部分處理DOM的過程都是利用document對象。

要訪問html元素，能夠利用document的documentElement特性：
文檔根節點

var de = document.documentElement;
    alert(de.tagName);

獲取head與body

//原本可使用getElementsByTagName的
    var head = document.getElementsByTagName("head")[0];
    var body = document.getElementsByTagName("body")[0];

還可使用節點,在使用節點前，先了解一些節點基礎知識

經常使用節點類型

• 元素節點——文檔中具備標籤的節點

• 文本節點——標籤中不是註釋的文本塊

經常使用的節點屬性

nodeType——節點類型，元素節點是1，文本節點是3
    nodeValue——節點值，元素節點爲空，文本節點的nodeValue屬性即爲文本內容
    firstChild——該元素節點包含的第一個子節點
    lastChild——該元素節點包含的最後一個子節點
    nextSibling——該節點的後一個兄弟節點
    previousSibling——該節點的前一個兄弟節點
    childNodes——子節點列表,能夠經過node.childNodes[index]（或node.childNodes.item(index)）來獲取子節點
    nodeName——節點名稱，對於元素節點，返回tagName,對於文本，則返回#text

例如：

<p> Hello World</p>

會被解析成：

• 元素節點——p標籤，

• 文本節點——Hello World.

也就是說，標籤中包含的一些文本也是節點，那麼空格之類的非打印字符會不會被看成文本節點呢？

var de = document.documentElement;
    var head = de.firstChild;//html下面第一個元素，多是head
    var body = de.lastChild;//html下面最後一個元素，多是body

答案並不肯定，可是仍然有辦法解決——使用節點類型檢測,每一個節點都有nodeType屬性，指明它的節點類型。對於元素節點，它的值是1，而對於文本節點，它的值是3

var de = document.documentElement;
    var head = de.firstChild.nodeType==1?de.firstChild:de.firstChild.nextSibling;
    var body = de.lastChild.nodeType==1?de.lastChild:de.lastChild.previousSibling;]
    //還可使用childNodes
    var de = document.documentElement;
    var head = de.childNodes[0].nodeType==1?de.childNodes[0]:de.childNodes[0].nextSibling;
    var head = de.childNodes[1].nodeType==1?de.childNodes[1]:de.childNodes[1].previousSibling;

DOM HTML

HTML DOM 容許 JavaScript 改變 HTML 元素的內容。

• 改變 HTML 輸出流：
  document.write(Date());
  在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容

• 改變 HTML 內容：
  document.getElementById("p1").innerHTML="New text!";

• 改變 HTML 屬性：
  document.getElementById("image").src="landscape.jpg";

DOM CSS

HTML DOM 容許 JavaScript 改變 HTML 元素的樣式。

document.getElementById("p2").style.color="blue";

DOM 節點

添加和刪除節點（HTML 元素）。

• 建立新的 HTML 元素
  如需向 HTML DOM 添加新元素，您必須首先建立該元素（元素節點），而後向一個已存在的元素追加該元素

var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);

添加以後變成：

<div id="div1">
    <p id="p1">這是一個段落</p>
    <p id="p2">這是另外一個段落</p>
</div>

• 刪除已有的 HTML 元素
  仍是上例中的文檔結構：

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

DOM 事件彙總

• window對象：

alert方法，彈出消息對話框。
confirm方法，顯示「肯定」、「取消」對話框。
navigate方法，從新導航到指定的地址。
setInterval每隔一段時間執行指定的代碼，第一個參數爲代碼的字符串，第二個參數爲間隔時間（單位毫秒），返回值爲定時器的標識
clearInterval取消setInterval的定時執行，至關於Timer中的Enabled=False。由於setInterval能夠設定多個定時，因此clearInterval要指定清除那個定時器的標識，即setInterval的返回值。
setTimeout也是定時執行，可是不像setInterval那樣是重複的定時執行，只執行一次。
clearTimeout也是清除定時。
showModalDialog彈出模態對話框。
showModelessDialog彈出非模態窗口。
window.location.href='http://www.baidu.com'，從新導向新的地址。
window.location.reload() 刷新頁面。
window.event是很是重要的屬性，用來得到發生事件時的信息，事件不侷限於window對象的事件，全部元素的事件均可以經過event屬性取到相關信息。
clientX、clientY 發生事件時鼠標在客戶區的座標；
screenX、screenY 發生事件時鼠標在屏幕上的座標；
offsetX、offsetY 發生事件時鼠標相對於事件源（好比點擊按鈕時觸發onclick）的座標。
.srcElement，得到事件源對象。幾個事件共享一個事件響應函數用。
keyCode，發生事件時的按鍵值。
button，發生事件時鼠標按鍵，1爲左鍵，2爲右鍵，3爲左右鍵同時按。
        altKey屬性，bool類型，表示發生事件時alt鍵是否被按下，相似的還有ctrlKey、shiftKey屬性
screen對象，屏幕的信息
clipboardData對象，對粘貼板的操做。
    clearData("Text")清空粘貼板；
    getData("Text")讀取粘貼板的值，返回值爲粘貼板中的內容；
    setData("Text",val)，設置粘貼板中的值。

之前在項目中使用clipboardData時發現，在ie下面能夠正常工做，在chrome下沒有clipboardData對象，因此複製粘貼的工做要另外想辦法了。以前使用flash插件，複製按鈕上面覆蓋一層透明的flash來完成。具體的之後再整理出來。

• body對象的事件

onload：網頁加載完畢時觸發。
    onunload：網頁關閉（或者離開）後觸發。
    onbeforeunload：在網頁準備關閉（或者離開）後觸發。在事件    中"window.event.returnValue賦值（要顯示的警告消息），這樣窗口離開（好比前進、後退、關閉）就會彈出確認消息

• document對象的事件

document.write('<font color=red>你好</font>');
    getElementById方法，根據元素的Id得到對象,getElementsByName返回值是對象數組。
    getElementsByTagName，得到指定標籤名稱的元素數組.
    createElement方法來建立具備指定標籤的DOM對象，而後經過調用某個元素的            appendChild方法將新建立元素添加到相應的元素下