文檔對像模型(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個對像是documentwindow

窗口對象

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

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

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

特性

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

  • console指向瀏覽器調試控制台。使用以下命令打印錯誤消息或記錄很有用console.logconsole.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元素節點,後者又指向其子元素節點headbody, 等等。

從這些元素的每一個中,您都可以導航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.firstChildNode.lastChild,區別在於它們不會僅針對“元素”節點“過濾”樹。它們還將顯示指示空白的空白Text節點。

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

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

得到兄弟姐妹

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

您可以使用

  • Node.previousElementSibling
  • Node.nextElementSibling

DOM還公開了previousSiblingnextSibling,但如上所述,它們包括空格作為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初學者手冊


更多瀏覽器教程: