文檔對像模型（DOM）

DOM代表文檔對像模型，它是節點和對像中HTML文檔的表示。瀏覽器公開了可用於與DOM交互的API。這就是現代JavaScript框架的工作方式-它們使用DOM API告訴瀏覽器在頁面上顯示什麼

DOM是瀏覽器對網頁的內部表示。當瀏覽器從服務器檢索HTML時，解析器將分析代碼的結構並為其創建模型。然後，基於此模型，瀏覽器將頁面呈現在屏幕上。

瀏覽器公開了可用於與DOM交互的API。這就是現代JavaScript框架的工作方式-它們使用DOM API來告訴瀏覽器在頁面上顯示什麼。

在“單頁應用程序”中，DOM不斷變化以反映屏幕上顯示的內容，作為開發人員，您可以使用瀏覽器開發人員工具。

DOM與語言無關，事實上，訪問DOM的標準是通過使用JavaScript，因為它是瀏覽器可以運行的唯一語言。

DOM由WHATWG在DOM生活標準規範。

使用JavaScript，您可以與DOM交互以：

  • 檢查頁面結構
  • 訪問頁面元數據和標題
  • 編輯CSS樣式
  • 附加或刪除事件偵聽器
  • 編輯頁面中的任何節點
  • 更改任何節點屬性

.. 以及更多。

您將與之交互最多的DOM API提供的主要2個對像是document和window。

窗口對象

這window對象表示包含DOM文檔的窗口。

window.document指向document窗口中加載的對象。

無需引用即可調用該對象的屬性和方法window顯式的，因為它代表全局對象。因此，以前的屬性window.document通常被稱為document。

特性

這是有用的屬性的列表，您可能會經常引用它們：

  • console指向瀏覽器調試控制台。使用以下命令打印錯誤消息或記錄很有用console.log，console.error和其他工具（請參見瀏覽器開發工具文章）
  • document如前所述，指向document對象，您將執行的DOM交互的關鍵
  • history允許訪問歷史API
  • location允許訪問定位界面，從中可以確定URL，協議，哈希和其他有用信息。
  • localStorage是對網絡存儲APIlocalStorage對象
  • sessionStorage是對Web Storage API sessionStorage對象的引用

方法

這window對像還公開了有用的方法：

  • alert()：可用於顯示警報對話框
  • postMessage()：由頻道訊息API
  • requestAnimationFrame()：用於在CPU上既高效又輕鬆的方式執行動畫
  • setInterval()：每n毫秒調用一次函數，直到使用清除間隔clearInterval()
  • clearInterval()：清除使用創建的間隔setInterval()
  • setTimeout()：在“ n”毫秒後執行函數
  • setImmediate()：瀏覽器就緒後立即執行功能
  • addEventListener()：將事件偵聽器添加到文檔
  • removeEventListener()：從文檔中刪除事件偵聽器

請參閱的所有屬性和方法的完整參考。window反對https://developer.mozilla.org/zh-CN/docs/Web/API/Window

Document對象

這document對象表示在窗口中加載的DOM樹。

這是DOM指向head和body標籤的一部分的表示：

DOM, the body and head tags

這是DOM的一部分錶示，顯示了head標籤，其中包含帶有其值的title標籤：

DOM, the head tag with the title

這是DOM的一部分的表示形式，其中顯示了body標籤，其中包含帶有值的鏈接和帶有其值的href屬性：

DOM, the body tag with a link

可以從以下位置訪問Document對象window.document，以及window是全局對象，可以使用快捷方式document直接從瀏覽器控制台或JavaScript代碼中找到對象。

該Document對象具有大量的屬性和方法。這選擇器API方法是您最可能使用的方法：

  • document.getElementById()
  • document.querySelector()
  • document.querySelectorAll()
  • document.getElementsByTagName()
  • document.getElementsByClassName()

您可以使用獲取文件標題document.title，網址使用document.URL。引薦來源網址為document.referrer，位於中的域document.domain。

來自document你可以得到身體和頭部的對象元素節點：

  • document.documentElement：“文檔”節點
  • document.body： 這body元素節點
  • document.head： 這head元素節點

The DOM nodes

您還可以獲取特定類型的所有元素節點的列表，例如HTMLCollection的所有鏈接中使用document.links，所有圖片使用document.images，所有表格使用document.forms。

文件餅乾在以下位置可以訪問document.cookie。上次修改的日期document.lastModified。

您可以做更多甚至得到老套並用document.write()，這種方法在JavaScript的早期就被大量使用來與頁面進行交互。

請參閱的所有屬性和方法的完整參考。document反對https://developer.mozilla.org/zh-CN/docs/Web/API/Document

節點類型

有不同類型的節點，其中一些已在上面的示例圖像中看到。您將遇到的主要問題是：

  • 文檔：文檔節點，樹的開始
  • 元素：HTML標記
  • Attr：標籤的屬性
  • 文本：元素或屬性節點的文本內容
  • 評論：HTML註釋
  • 文件類型： 這文件類型宣言

遍歷DOM

DOM是一個元素樹，其“文檔”節點位於根節點，該節點指向html元素節點，後者又指向其子元素節點head和body， 等等。

從這些元素的每一個中，您都可以導航DOM結構並移至不同的節點。

得到父母

每個元素都有只有一個父母

要獲得它，您可以使用Node.parentNode或者Node.parentElement（其中Node表示DOM中的一個節點）。

它們幾乎一樣，除了在html元素：parentNode返回DOM樹中指定節點的父級，而parentElement返回DOM節點的父元素；如果該節點沒有父元素，或者其父元素不是DOM元素，則返回null。

人們通常使用parentNode。

讓孩子們

要檢查節點是否有子節點，請使用Node.hasChildNodes()返回一個布爾值。

要訪問節點的所有子元素節點，請使用Node.childNodes。

DOM還公開了Node.children方法。但是，它不僅包括元素節點，還包括元素之間的空白作為文本節點。這不是您通常想要的東西。

Get the children of a node

要獲取第一個子元素節點，請使用Node.firstElementChild。要獲取最後一個子元素節點，請使用Node.lastElementChild：

To get the first or last child Element Node

DOM還公開了Node.firstChild和Node.lastChild，區別在於它們不會僅針對“元素”節點“過濾”樹。它們還將顯示指示空白的空白Text節點。

簡而言之，要導航子元素節點使用

  • Node.childNodes
  • Node.firstElementChild
  • Node.lastElementChild

得到兄弟姐妹

除了獲取父級和子級之外，由於DOM是一棵樹，因此您還可以獲取任何元素節點的同級。

您可以使用

  • Node.previousElementSibling
  • Node.nextElementSibling

DOM還公開了previousSibling和nextSibling，但如上所述，它們包括空格作為Text節點，因此通常應避免使用它們。

編輯DOM

DOM提供了多種方法來編輯頁面的節點並更改文檔樹。

和

  • document.createElement()：創建一個新的元素節點
  • document.createTextNode()：創建一個新的文本節點

您可以創建新元素，並將其添加到您希望作為子元素的DOM元素中，方法是使用document.appendChild()：

const div = document.createElement('div')
div.appendChild(document.createTextNode('Hello world!'))
  • first.removeChild(second)從節點“第一個”中刪除子節點“第二個”。
  • document.insertBefore(newNode, existingNode)插入“ newNode”作為“ existingNode”的同級，將其放置在DOM樹結構中。
  • element.appendChild(newChild)更改“ element”下的樹，並在所有其他子節點之後添加一個新的子節點“ newChild”。
  • element.prepend(newChild)更改“ element”下的樹，並在其他子元素之前向其添加新的子節點“ newChild”。您可以傳遞一個或多個子節點，甚至可以傳遞一個字符串，該字符串將被解釋為“文本”節點。
  • element.replaceChild(newChild, existingChild)更改“元素”下的樹，將“ existingChild”替換為新的節點“ newChild”。
  • element.insertAdjacentElement(position, newElement)在DOM中插入“ newElement”，根據“ position”參數值相對於“ element”定位。查看可能的值。
  • element.textContent = 'something'將“文本”節點的內容更改為“某物”。

免費下載我的JavaScript初學者手冊


更多瀏覽器教程：


在線技術維基！