2020/6/11 JavaScript高階程式設計 DOM

HermionePeng發表於2020-06-26

DOM(文件物件模型)是針對HTML和XML文件的一個API(應用程式介面)。他描繪了一個層次化的節點樹,允許開發人員新增、移除和修改頁面的某一部分。

10.1 節點層次

DOM將任何HTML和XML文件描繪成一個由多層節點構成的結構。

文件節點(Document)是每個文件的根節點。文件節點只有一個子節點(HTML文件中實終是<html>),我們稱之為文件元素(每個文件只能有一個文件元素)。文件元素是文件的最外層元素,其他所有元素都包含在文件元素中。

每一段標記都能通過樹中一個節點來表示,包括特性、文件型別、註釋等,共有12種節點型別。這些型別都繼承自一個基型別

10.1.1 Node型別

 JavaScript中的所有節點型別都繼承自Node型別,所有的節點型別都共享相同的基本屬性和方法。

nodeType屬性:表明節點的型別(12種)

eg:Node.ELEMENT_NODE(1);  //元素節點

通過該屬性可以確定一個節點的型別,可以通過型別字面量判等,也可以通過數字值比較。

if (someNode.nodeType == Node.ELEMENT_NODE){  //在IE中無效
    alert("Node is element.");
}

if (someNode.nodeType == 1){  //適用於任何瀏覽器
    alert("Node is element.");
}

1. nodeName和nodeValue屬性

可以瞭解節點的具體資訊。

對於元素節點,nodeName儲存的始終是標籤名,nodeValue的值始終是null。

2. 節點關係

2020/6/11 JavaScript高階程式設計 DOM

 

  • 屬性
1 childNodes屬性 儲存NodeList物件(類陣列,但不是陣列),這個物件也有length屬性。可以通過方括號,也可以通過item()方法訪問節點。可以通過Array.prototype.slice()方法將其轉換為陣列。
2 parentNode屬性 指向父節點。
3 previousSibling / nextSibling屬性 訪問同一列表中的其他屬性。即前一個和後一個同胞節點。
4 firstChild / lastChild屬性 指向childNodes列表的第一個和最後一個節點。
  • 方法
1 hasChildNodes() 檢驗是否存在子節點。存在時返回true。
2 ownerDocument() 指向整個文件的文件節點。方便直接到達頂端。

3. 操作節點

1 appendChild() 向childNodes列表的末尾新增一個節點。返回新的節點。由於任何一個節點不能同時出現在多個位置上,所以當傳入的節點是父節點的子節點時,這個節點會變成最後一個子節點。
2 insertBefore()

將節點插入到childNodes列表中一個特定的位置。接收兩個引數:要插入的節點和作為參照的節點。

插入節點後,被插入節點會成為參照節點的前一個同胞節點,同時被方法返回。省略參照節點時與appendChild()執行相同的操作。

3 replaceChild() 替換節點(複製所有的關係指標)。接收兩個引數:要插入的節點和要替換的節點。被替換的節點將從文件樹中移除,但仍然在文件中,只是沒有了自己的位置(指標)
4 removeChild() 移除節點。返回被移除的節點。同樣被移除的節點仍然在文件中。

PS1:使用這幾個方法必須取得父節點(使用parentNode屬性)。

PS2:不是所有型別的節點都有子節點。在不支援子節點的節點上呼叫這些方法,會丟擲錯誤。

4. 其他方法

1 cloneNode()

建立呼叫這個方法的節點的一個完全相同的副本。接受一個布林值引數,表示是否執行深複製(true則執行深複製)。

  • 深複製:複製節點以及整個子節點樹
  • 淺複製:只複製節點本身

複製後返回的節點歸文件所有,沒有為他指定父節點。要通過其他的方法把他加入到文件中。

IE>9及其他瀏覽器會計入空白節點。

2 normalize()

處理文件樹中的文字節點。

  • 出現文字節點不包含文字 => 刪除空白文字節點
  • 接連出現兩個文字節點 => 合併為一個文字節點

10.1.2 Document型別

Document型別表示文件。

  • document物件是HTMLDocument的一個例項,表示整個HTML頁面。
  • document物件是window物件的一個屬性,可以作為全域性物件來訪問。

Document節點的特徵:

  • nodeType的值為9;
  • nodeName的值是"#document";
  • nodeValue和parentNode的值為null;
  • ownerDocument的值為null。

1. 文件的子節點

1 DocumentType(最多一個) <!DOCTYPE>標籤,可以通過document.doctype屬性來訪問他的資訊。
2 Element(最多一個)

文件元素<html>。

通過documentElement屬性childNodes列表(在無處理指令的情況下是firstChild)訪問可快速找到html元素。

document.body屬性可以指向<body>元素(因為該元素使用頻率高,為了便於開發增添該屬性)。

3 ProcessingInstruction 表示處理指令。
4 Comment 註釋。

2. 文件資訊

作為HTMLDocument的例項,document物件還有一些特殊的屬性。

1 title <title>元素中的文字,是當前頁面的標題。
2 URL 完整的URL。
3 domain

頁面的域名。僅domain可以設定。但有一定的限制:

  • 不能設定為URL中不包含的域
  • 如果域名一開始是“鬆散的”(wrox.com),那麼就不能再將其設定回“緊繃的”(p2p.wrox.com)

作用:將每個頁面的document.domain設定為相同的值,就可以互相訪問對方包含的JavaScript物件了。(解決跨域問題)

4 referrer 連結到當前頁面的那個頁面的URL。在沒有來源頁面的情況下是空字串。

3. 查詢元素

1 getElementById() 引數為要取得元素的ID。找到返回該元素,沒有找到返回null。如果有多個id值相同,則只會返回第一個。
2 getElementByTagName() 引數為要取得元素的標籤名。返回元素的NodeList。在HTML文件中,返回的是HTMLCollection物件。可以通過方括號或者item()方法來訪問。
3 nameItem() HTMLCollection物件的方法。通過元素的name屬性取得集合中的項(第一項)。同時HTMLCollection物件還支援按名稱訪問項。
4 getElementByName() 返回帶有給定name屬性的所有元素(一個HTMLCollection)。

4. DOM的一致性檢測

ducument.implementation屬性:提供關於實現了DOM 哪些部分的資訊的物件。

 他有一個方法,hasFeature()。接收兩個引數:要檢測的DOM功能的名稱和版本號。如果支援給定名稱和版本的功能,則返回true。

檢驗結果true不意味著現實與規範一致,最好除了檢測hasFeature()之外,同時使用能力檢測

5. 文件寫入

write() / writeln():接受一個字串,即寫入輸出流中的文字。write()會原樣寫入,writeln()會在字串末尾新增一個換行符(\n)。這兩個方法可以向頁面中動態的加入內容。

//在頁面載入過程中輸出當前的日期和時間
document.write("<strong>" + (new Date()).toString() + "</strong>");

同時還可以用來動態的包含外部資源,例如JavaScript檔案等。

document.write("<script type=\"text/javascript\" src=\"file.js\"> + "<\/script>");

PS:由於不能直接包含字串"</script>"(這樣會導致該字串被解釋為指令碼的結束,後面的程式碼無法執行),所以要將這個字串分開寫。

在頁面被呈現的過程中,會直接輸出內容。如果在文件載入結束後(window.onload)再呼叫write(),那麼輸出的內容會重寫整個頁面。

方法open()close()分別用於開啟和關閉網頁的輸出流。

10.1.3 Element型別

Element型別提供了對元素標籤名、子節點及特性的訪問。Element節點具有以下特徵:

  • nodeType值為1;
  • nodeName的值為元素的標籤名;
  • nodeValue的值為null;
  • parentNode可能是Document或Element;

tagName屬性:返回訪問元素的標籤名(與nodeName相同)。 => 在HTML中標籤名始終以全部大寫表示,需要檢驗標籤型別時最好呼叫toLowerCase()方法。

1. HTML元素

所有HTML元素都由HTMLElement型別表示。HTMLElement型別直接繼承自Element並新增了一些屬性。

  • id,元素在文件中的唯一標識;
  • title,有關元素的附加說明資訊,一般通過工具提示條顯示出來;
  • dir,語言的方向("ltr",即left-to-right)或“rtl”;
  • className,與元素的class特性對應,為元素制定的CSS類。

2. 取得特性

 

相關文章