文中使用一個應用程式範例演示了 DOM 方法和屬性以及如何向 DOM 事件附加處理常式。
萬維網聯盟 (W3C) 已經在不同的規範組（DOM 1 級、DOM 2 級和 DOM 3 級）對文件物件模型 (DOM) 進行了定義。 DOM 將 HTML 或 XML 表示為一棵樹，該樹由具有屬性和方法的不同層次的節點組成。 使用用戶端語言例如 JavaScript，您可以為該樹中的節點添加、修改、刪除以及附加事件，從而產生交互、動態的 Web 頁面。
使用用戶端指令碼語言 (JavaScript) 修改 DOM 的行為稱為 DOM 腳本程式設計。 DOM 腳本程式設計用來代替通用術語動態 HTML (DHTML)，DHTML 在 Web 開發中用來表示使用 HTML、CSS 和 JavaScript 的交互 Web 頁面的構造。
本文探討了 DOM API 中最常用的方法和屬性。 使用一個詳細的示例來展示如何使用 JavaScript 遍歷 DOM。 使用一個較複雜的模型闡述了在何處需要考慮事件和監聽程式。 瞭解如何利用 JavaScript 庫與 DOM 進行交互。
DOM 腳本程式設計
在 DOM 術語中，document 表示樹根。 在 JavaScript 中表示為 window.document，或者簡單地表示為 document（因為它被附加到 Window 物件）。 這是 JavaScript 實現的起始點。 清單 1 顯示了一個 HTML 片段示例。
清單 1. HTML 代碼
<body> <p id="paragraph1"> <span>This is some text</span> <a href="/index.html" title="C lick here">Click here</a> <p></body>從 DOM 角度看，以上示例中 p 標籤由 DOM Element 介面表示。 它是 span 標籤和 a 標籤的父標籤。 span 標籤和 a 標籤是同級標籤。
假如您想要獲取 清單 1 中代碼定位點的 href 屬性。 訪問 DOM 中某個元素的簡單方法是使用 getElementById 方法。 以下代碼串顯示了包含使用介面定義語言 (IDL) 編寫的 getElementById 簽名的文檔介面定義的一部分： Element getElementById (in DOMString elementId)。
JavaScript 使用 String 物件實現 DOMString 介面，所以該方法以字串的形式接受元素 ID 並將其作為一個參數。 在示例片段中，帶有 id 屬性的惟一元素是 p 標籤，所以可以使用 var paragraph = document.getElementById("paragraph1"); 檢索它。
使用 childNodes 屬性您可以獲得嵌入在 p 標籤中的定位點。 該屬性屬於 Node 介面，並返回一個 NodeList 類型的物件。 在 JavaScript 中，該物件是一個陣列式的物件。 陣列式的物件沒有方法，比如 pop() 或 push()，但是它們有 length 屬性。 從 childNodes 屬性中返回的物件在節點元素（HTML 標籤）、文本節點或注釋節點之間沒有任何不同。 如果您只要尋找節點元素，您可以考慮 children 屬性。 不考慮文本和注釋節點的話，它比 childNodes 更能滿足我們的目的。 在該示例中，定位點是段落的第二個子節點，可以使用 var aElement = paragraph.children[1]; 獲得。
給定一個元素，要獲取 href 屬性的值，您可以採用 getAttribute 方法，將屬性名作為一個參數進行傳遞（在本例中，為 href）。 包含 getAttribute 方法的 IDL 定義部分為： DOMString getAttribute (in DOMString name)。
在該示例中，您可以像這樣實現以上介面：var aHref = aElement.getAttribute("href"); "index.html"。
與在 JavaScript 中一樣，您可以將方法連結起來。 若要通過一行獲取 a 標籤 href 屬性的值，請使用：var aHref = document.getElementById("paragraph1").children[1].getAttribute("href"); index.html */。
探究 DOM 腳本程式設計：應用程式範例
本節探究 DOM 腳本程式設計的一些特性。 Sticky Notes 應用程式範例是一個交互的 Web 頁面，該頁面可讓使用者不需重新載入頁面即可添加 「sticky」 注釋。 圖 1 顯示了該頁面。
圖 1. Sticky Notes 應用程式前端
圖 1 所顯示頁面的 HTML 代碼顯示在 清單 2 中。 在清單 2 中 head 標籤是對 CSS 和 JS 檔的引用。 在 body 標籤中您已經可以看到頁面中注釋的結構：textarea 標籤和觸發新注釋創建的定位點。
清單 2. HTML 代碼
<! DOCTYPE html><html> <head> <meta charset=utf-8"> <title> Dom Scripting </title> < link rel="stylesheet" href="css/master.css" /> <script src="js/script.js"></script> </head> < body> <div class="wrapper"> <h1> Sticky Notes </h1> <div class="links"> <textarea id=" contentArea" cols="10"> </textarea> <a href="/random.html" class="add">Click here</a> <span >to add a sticky note</span> </div> <div id="notes"> <div class="note"> <p> This is a not e </p> </div> </div> </div> </body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
