JavaScript >> Javascript 文檔 >  >> Tags >> DOM

DOM 簡介

本文最初是為 DigitalOcean 編寫的 .

簡介

文檔對像模型 ,通常稱為 DOM , 是使網站具有交互性的重要組成部分。它是一個界面,允許編程語言操縱網站的內容、結構和样式。 JavaScript 是連接到 Internet 瀏覽器中的 DOM 的客戶端腳本語言。

幾乎任何時候網站執行操作,例如在圖像幻燈片之間旋轉,當用戶嘗試提交不完整的表單時顯示錯誤,或者切換導航菜單,都是 JavaScript 訪問和操作 DOM 的結果。在本文中,我們將了解 DOM 是什麼,如何使用 document 對象,以及 HTML 源代碼和 DOM 的區別。

先決條件

為了有效地理解 DOM 以及它與 Web 工作的關係,有必要具備 HTML 和 CSS 的現有知識。熟悉基本的 JavaScript 語法和代碼結構也是有益的。

什麼是 DOM?

在最基本的層面上,網站由 HTML 文檔組成。您用來查看網站的瀏覽器是一個程序,它解釋 HTML 和 CSS,並將樣式、內容和結構呈現到您所看到的頁面中。

除了解析 HTML 和 CSS 的樣式和結構之外,瀏覽器還會創建文檔的表示形式,稱為文檔對像模型。這個模型 允許 JavaScript 訪問網站 document 的文本內容和元素 作為對象 .

JavaScript 是一種交互式語言,通過實踐更容易理解新概念。讓我們創建一個非常簡單的網站。創建一個 index.html 並將其保存在新的項目目錄中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

這段代碼是熟悉的新網站框架的 HTML 源代碼。它包含網站文檔絕對最重要的方面 - 一個文檔類型和一個 html 帶有 head 的標籤 和 body 嵌套在裡面。

打開 index.html 使用您選擇的瀏覽器。您將看到一個簡單的網站,我們的標題顯示“文檔對像模型”。右鍵單擊頁面上的任意位置,然後選擇“檢查”。這將打開開發者工具。

元素下 選項卡,您將看到 DOM。

在這種情況下,它看起來與我們剛剛編寫的 HTML 源代碼完全相同——一個 doctype,以及我們添加的幾個其他 HTML 標記。將鼠標懸停在每個元素上將突出顯示呈現網站中的相應元素。 HTML 元素左側的小箭頭允許您切換嵌套元素的視圖。

文檔對象

document object 是具有許多屬性的內置對象 和方法 我們可以用來訪問和修改網站。為了了解如何使用 DOM,您必須了解對像在 JavaScript 中是如何工作的。如果您對對象的概念不滿意,請查看了解 JavaScript 中的對象。

index.html 上的開發者工具中 ,移動到控制台 標籤。鍵入 document 進入控制台並按 ENTER .您將看到輸出的內容與您在 Elements 中看到的相同 標籤。

document;
控制台
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

輸入 document 否則直接在控制台中工作通常不會在調試之外進行,但它有助於準確地鞏固 document 對像是以及如何修改它,我們將在下面發現。

DOM 和 HTML 源代碼有什麼區別?

目前,在這個例子中,HTML 源代碼和 DOM 似乎是一回事。在兩種情況下,瀏覽器生成的 DOM 與 HTML 源代碼不同:

  • DOM 由客戶端 JavaScript 修改
  • 瀏覽器會自動修復源代碼中的錯誤

讓我們演示如何通過客戶端 JavaScript 修改 DOM。在控制台中輸入以下內容:

document.body;

控制台將響應此輸出:

控制台
<body>
  <h1>Document Object Model</h1>
</body>

document 是一個對象,body 是我們使用點符號訪問的那個對象的一個屬性。提交document.body 到控制台輸出 body 元素和里面的一切。

在控制台中,我們可以更改 body 的一些實時屬性 反對本網站。我們將編輯 style 屬性,將背景顏色更改為 fuchsia .在控制台中輸入:

document.body.style.backgroundColor = 'fuchsia';

輸入並提交上述代碼後,您會看到網站的實時更新,背景顏色會發生變化。

切換到 元素 選項卡,或輸入 document.body 再次進入控制台,你會看到 DOM 發生了變化。

控制台
<body style="background-color: fuchsia;">
  <h1>Document Object Model</h1>
</body>

我們輸入的 JavaScript 代碼,賦值為 fuchsiabody 的背景顏色 , 現在是 DOM 的一部分。

但是,右鍵單擊頁面並選擇“查看頁面源”。您會注意到網站的來源確實 包含我們通過 JavaScript 添加的新樣式屬性。網站的來源不會改變,也永遠不會受到客戶端 JavaScript 的影響。如果刷新頁面,我們在控制台中添加的新代碼就會消失。

DOM 可能具有與 HTML 源代碼不同的輸出的另一個實例是源代碼中存在錯誤時。一個常見的例子是 table 標籤 - tbody table 內需要標記 ,但開發人員經常無法將其包含在他們的 HTML 中。瀏覽器會自動更正錯誤並添加tbody ,修改 DOM。 DOM 也會修復未關閉的標籤。

結論

在本教程中,我們定義了 DOM,訪問了 document 對象,使用 JavaScript 和控制台更新 document 的屬性 對象,並討論了 HTML 源代碼和 DOM 之間的區別。有關 DOM 的更深入信息,請查看 Mozilla 開發者網絡上的文檔對像模型 (DOM) 頁面。

在下一個教程中,我們將回顧重要的 HTML 術語,了解 DOM 樹,發現什麼是節點,了解最常見的節點類型,並開始使用 JavaScript 創建交互式腳本。


Tutorial JavaScript 教程
  1. Javascript 的 sort() 是如何工作的?

  2. Chrome 開發者工具:存儲為全局變量

  3. Express 和 ejs <%=渲染 JSON

  4. Python vs Javascript:2020 年哪種網絡編程語言更好?

  5. Vue.js 的 VS 代碼擴展

  6. 磁鐵光標

  7. 對狀態管理不可變的好處是什麼?

  1. 獲取什麼 - 失敗的 HTTP 響應

  2. 為什麼 DB 公司或 Devops 沒有更多的應用程序?

  3. 如何使用 React Query 將 Next.js 與 Fauna 集成

  4. HTML5 Canvas 性能 - 每秒計算循環數/幀數

  5. 使用 React 和 GraphQL-1 構建一個完整的應用程序

  6. 避免內存洩漏的最佳實踐

  7. Jotai,現在與光學

  1. React hooks 是如何工作的——深入了解

  2. 如何針對 Web 和性能優化圖像

  3. Danfo.js 簡介 - 操作和處理數據

  4. Statamic Headless 綁定到 Gatsby 博客 [教程和現場演示]