JavaScript——DOM或以樹形展示的Web頁面

標籤：javascript   api   node   document   element   

Web網頁的一般可以通過document以及document所相關的各種元素組成。當然我們也可以通過階層的樹形結構在展現Web頁面。如果要對一個網頁進行修改的話，我們可以通過document對象，Node對象以及Element對象進行相關的操作。

【Document對象】是所有頁面元素的所有者或是父節點，絕大多數用來建立新元素執行個體的Factory 方法都是核心document對象的方法。

DOM1——定義了DOM的基礎設施，包括模式和API

DOM2——增強了對CSS的支援，改進了對document元素的存取方法

DOM3——除了對之前版本的擴充和改進之外，該版本還增強了支援Web服務的模組，增強了對XML的支援。

這裡主要講述DOM HTML API：

DOM HTML API具有很好的自描述性，它有專門的對象名稱。旨在引入擴瀏覽器存在的許多BOM實現，方便往後相容。HTML API不僅從基本的HTMl元素中繼承了屬性和方法，還會從核心的Node對象中繼承。絕大多數的HTML對象也是從HTMLElement中繼承的，基於允許的元素屬性{id,title,lang,dir,className}；每個HTML對象的名字都是從HTML正式元素的名稱中擷取的。例如：HTMLFormElement是HTML中表單元素的介面對象，通過該對象可以訪問該元素中所有的有效元素。

API對象沒有建構函式，不能獨立於其他對象單獨建立。要建立這些介面對象，需要使用一個Factory 方法。這個工廠負責生產所需的對象。例如：為了在某個表格的最後添加一行，我們需要通過Factory 方法insertRow來添加一個表格行。var row=table.insertRow(-1)<!--其中table是一個表格對象>；為了為這個建立的表格行添加兩個單元格，可以使用Factory 方法insertCell。var cell1=row.insertCell(0);vavr cell2=row.insertCell(1);同時可以通過removeCell和removeRow方法來刪除表格單元格和表格行。

有些DOM HTML介面並不直接表示特定的HTML元素，而是表示對象的集合。對象的集合可以通過其父元素訪問，如document或form元素，它是用HTMLCollection接口表示的。HTMLCollection介面只有一個名為length的屬性以及兩個方法(一)item，參數位元字型的索引值(二)nameItem，參數是字串。例如，使用DOM訪問映像，使用item方法var img=document.images.item(0);使用namedItem方法var img=document.images.namedItem("original");

【Node對象】在W3C關於DOM規範中，將文檔描述成一個節點的集合，並且以階層的樹形結構相串連。可以使用不同的技術訪問網頁內容樹的節點(一)查詢特定類型的所有標籤(二)遍曆整個樹以探索每個層級上的每個節點。DOM樹種元素之間存在：父子節點，兄弟節點的關係。

這裡主要理解DOM Core API：

對於文檔樹中的每個節點，都擁有DOM的Node對象中定義的所有基本屬性集和基本方法集。Node對象的屬性記錄著與DOM樹內容相關的資訊，包括兄弟節點元素，子節點元素，父節點元素。有一些屬性用來記錄節點的相關資訊，包括類型，名字以及值。Node對象的屬性主要包括：nodeName nodeValue nodeType parentNodechildNodes firstChild lastChild等。

節點nodeType屬性是數字型的，可以使用DOM規定的一組常量來替代數字訪問每種類型的節點。例如：ELEMENT_NODE值為1；ATTRIBUTE_NODE值為2；TEXT_NODE值為3；COMMENT_NODE值為8等等。但是IE對這種長亮不支援，這時候可以對Node對象進行擴充或穿件全域的自訂對象，把這些值儲存到一個數組的屬性中。

document對象是與web頁面文檔之間的核心介面。我們可以使document.getElementById();document.getElementsByTagName();document.getElementsByClass();

來建立新對象。

【Element對象】Element屬性並不總是能夠通過對象屬性訪問的，如果想要使用這樣的Element屬性時，而它不是作為對象類提供的屬性，那麼我們就可以使用Element方法。我們可以使用這樣的方法擷取，設定和檢查屬性值是否存在：getAttribute(name)      setAttribute(name,value)       removeAttribute(name);             getAttributeNode(name)  

setAttributeNode(name,value)        removeAttributeNode(name);       hasAttribute(name)

實際上document對象可以或多或少的處理上下文中的所有東西，不過有時候你可能需要處理嵌套在其他元素中的元素，這時候可能就需要Node和Element對象。

例如：有兩個包含段落元素的div塊：第一個div塊包含兩個段落，第二個塊包含一個段落。

<div id="div1">

<p>one</p>

<p>two</p>

</div>

<div id="div2">

<p>three</p>

</div>

如何才能只獲得第一個div塊中的段落元素呢？

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

var ps=div.getElementByTagName("p");    //其中的ps就是第一個div塊中的兩個段落ps[0]和ps[1]

【修改文檔樹】

web網頁可以以階層的樹形結構呈現，那我們可以通過修改文檔樹來達到我們所需要的網頁。其中document對象的方法來建立新元素執行個體的Factory 方法；Node對象提供了層次樹形結構的文檔樹支援；Element元素提供了一種訪問其上下文內元素的方法，以對嵌套在該元素內的元素進行修改。

document對象的Factory 方法：createElement(tagname)——建立特定類型的元素

  createDocumentFragment——DocumentFragment是個輕量級的document對象，用於擷取文檔樹中一部分；如果想在DOM樹中添加大量的節點，先使用createDocumentFrgment方法建立一個documentFragment，接著為其添加節點，然後將documentFragment添加到文檔樹中。

  createTextNode(data)——儲存頁面中的文本

當建立了一個新節點之後，可以使用Node方法將其添加到現有文檔樹中:

  insertBefore(newChild,refChild)——在refChild指定的現有節點前插入新節點

  replaceChild(newChild,oldChild)——替換現有節點

  removeChild(oldChild)——刪除現有子節點

  appendChild(newChild)——為文檔添加新的子節點

注意：必須在正確的上下文中調用這些方法。也就是要在包含要替換或刪除的節點的元素上執行以上操作。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

JavaScript——DOM或以樹形展示的Web頁面