瀏覽器中的JavaScript：文檔對象模型與 DOM 操作

Ilikewhite 發布于2019-08-23 17:14 / 2415人閱讀

摘要：作為運行在瀏覽器中的腳本語言，它對于網頁操作非常有用。在技術圈中，我們將這些指令稱為操作。結論文檔對象模型是瀏覽器創建并保留在內存中的網頁的虛擬副本。資源如果你想了解更多關于文檔對象模型的內容，那么還有另一篇好文章。

翻譯：瘋狂的技術宅
原文：https://www.valentinog.com/bl...

JavaScript 并沒有那么糟糕。作為運行在瀏覽器中的腳本語言，它對于網頁操作非常有用。在本文中，我們將看到可以用哪些手段來修改 HTML 文檔和交互。

什么是文檔對象模型？

文檔對象模型是在瀏覽器中一切的基礎。但它究竟是什么呢？

當我們訪問網頁時，瀏覽器會計算出如何解釋每個 HTML 元素。這樣它就可以創建 HTML 文檔的虛擬表示，并保存在內存中。 HTML 頁面被轉換為樹狀結構并且每個 HTML 元素都變成一個葉子結點，連接到父分支。看一下這個簡單的 HTML 頁面：



  
        A super simple title!
  
  
      A super simple web page!

在這個結構的頂部有一個文檔，也稱為根元素，它包含另一個元素：html。 html 元素包含一個 head ，而 head 內又有一個 title。然后 body 中包含一個 h1。每個 HTML 元素都由特定類型（也稱為接口）表示，并且可以包含文本或其他嵌套元素：

document (HTMLDocument)
  |
  | --> html (HTMLHtmlElement)
          |  
          | --> head (HtmlHeadElement)
          |       |
          |       | --> title (HtmlTitleElement)
          |                | --> text: "A super simple title!"
          |
          | --> body (HtmlBodyElement)
          |       |
          |       | --> h1 (HTMLHeadingElement)
          |              | --> text: "A super simple web page!"

每個HTML元素都來自 Element，但其中很大一部分都是專用的。你可以通過檢查原型以查找元素所屬的“種類”。例如，h1元素是 HTMLHeadingElement：

document.querySelector("h1").__proto__
// Output: HTMLHeadingElement

而 HTMLHeadingElement 又是 HTMLElement 的“后代”：

document.querySelector("h1").__proto__.__proto__
// Output: HTMLElement

這時（特別是初學者）可能會對 document 和 window 之間的區別產生一些混淆。讓我們看看它們有什么不同！

window和document之間的區別

window 是指瀏覽器，而 document 是你當前正在操作的 HTML 頁面，即當前文檔。文檔界面有許多實用功能，比如 querySelector()，一種用于選擇給定頁面內任何 HTML 元素的方法：

document.querySelector("h1");

window 表示當前窗口的瀏覽器，以下代碼效果與上述相同：

window.document.querySelector("h1");

無論如何，以下語法更常見，你還會看到更多：

document.methodName();

DOM 操作

DOM中的每個 HTML 元素也都是“節點”，實際上我們可以像這樣去檢查節點類型：

document.querySelector("h1").nodeType;

上面的代碼會返回 1，它是 Element 類型的節點的標識符。你還可以檢查節點名稱：

document.querySelector("h1").nodeName;
"H1"

上面的例子用大寫的形式返回節點名稱。需要理解的也是最重要的概念是，我們主要使用 DOM 中的兩種類型的節點：

Element 類型的節點（HTML 元素）

Text 類型的節點（文本節點）

為了創建 Element 類型的新節點，本機 DOM API 為我們提供了 createelement 方法，你通常會這樣調用：

var heading = document.createElement("h1");

為了創建文本，我們可以用 createTextNode：

var text = document.createTextNode("Hello world");

通過在新的 HTML 元素中附加文本，可以將兩個節點組合在一起。最后需要注意的是，我們還可以將標題元素附加到根文檔：

var heading = document.createElement("h1");
var text = document.createTextNode("Hello world");
heading.appendChild(text);
document.body.appendChild(heading);

在瀏覽器中使用 JavaScript 時，你需要了解這三種方法。在技術圈中，我們將這些指令稱為 DOM 操作。

當以這種方式創建和操作元素時，我們談論的是“命令式” DOM操作。現代前端庫正在通過支持“聲明”方法來解決這個問題。我們不是一步一步地去命令瀏覽器，而是聲明我們需要什么 HTML 元素，而庫可以處理剩下的部分。

DOM 操作和 jQuery

此時你可能會想：“我可以只使用jQuery嗎？為什么要用 createElement？“ 我經常會被問到這些問題。

好吧，請注意 jQuery 正逐漸消失。 Bootstrap 5 將從依賴項中刪除它，還有更多的庫或框架正在刪除它。這背后有一個十分正當的理由：原生 DOM API 已經非常完整且成熟到足以使 jQuery 過時。

如果你想堅持用原生 JavaScript 實現簡單的交互和操作。甚至可以創建自己的迷你框架來抽象出最常見的操作：創建元素、追加、創建文本等。

結論

文檔對象模型是瀏覽器創建并保留在內存中的網頁的虛擬副本。在創建、修改、刪除 HTML 元素時，我們會碰到 “DOM 操作”。在過去即使對于更簡單的任務，我們也要依賴于 jQuery，但今天本機 API 已經互相兼容并且足夠成熟以使 jQuery 過時。

雖然 jQuery 不會很快的消失，但每個 JavaScript 程序員都必須知道該如何使用本機 API 去操作 DOM。這樣做有很多理由，其他庫會增加 JavaScript 程序的加載時間和大小，更不用說 DOM 操作在技術面試中出現的越來越多。

DOM 中可用的每個HTML 元素都有一個暴露一定數量屬性和方法的接口。如果對使用什么方法有疑問，可以參考 MDN上的優秀文檔。

操作 DOM 最常用的方法是 document.createElement() 用于創建新的 HTML 元素，document.createTextNode() 用于在 DOM 內創建文本節點。需要注意的是 .appendChild() 用于將新的 HTML 元素或文本節點附加到現有元素。

雖然很好的了解本機 API 是很好的，但是現代前端庫也提供了無可置疑的好處。盡管用“原生” JavaScript 去構建大型JavaScript 程序確實是可行的，但有時 Angular、React、Vue可以提供很多幫助。僅使用 JavaScript 來處理更簡單的原型和中小型應用也是明智之舉。

資源

如果你想了解更多關于文檔對象模型的內容，那么 Aderinokun 還有另一篇好文章。非常詳細，值得一讀：文檔對象模型究竟是什么？

如果你想回到基礎知識，請查看如何使用原生 JavaScript 生成表格一文！在沒有任何前端框架的幫助的情況下，你會發現實現它都需要什么。

本文首發微信公眾號：前端先鋒 歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

12個令人驚嘆的CSS實驗項目

必須要會的 50 個React 面試題

世界頂級公司的前端面試都問些什么

11 個最好的 JavaScript 動態效果庫

CSS Flexbox 可視化手冊

從設計者的角度看 React

過節很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現動畫效果

程序員30歲前月薪達不到30K，該何去何從

14個最好的 JavaScript 數據可視化庫

8 個給前端的頂級 VS Code 擴展插件

Node.js 多線程完全指南

把HTML轉成PDF的4個方案及實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104026.html

JavaScript的組成 | DOM/BOM

摘要：中主要關注的就是，對象的主要功能就是處理網頁內容。中文翻譯模型，如果你把這個詞從中抽離出來，看下面的圖片是不是就很好理解。年月制定的標準，由兩大部分組成核心和。擴展鼠標和用戶界面事件范圍遍歷，增加了對支持。往期回顧在上一期的《JavaScript的組成 | 核心-ECMAScript 》?里，我們有說到JavaScript 是由三大部分組成，分別是：核心ECMAScript、文檔對...

worldligang 2019-08-26 13:22 評論0 收藏0
JavaScript簡介

摘要：發布后不久，微軟就在其中加入了名為的實現命名為是為了避開與有關的授權問題。以現在的眼光來看，微軟年月為進入瀏覽器領域而實施的這個重大舉措，是導致日后蒙羞的一個標志性時間。微軟推出其實現意味著有了兩個不同的版本中的中的。 JavaScript簡介前言：最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方一筆帶過，所以用自己所理解的，嘗試細致解讀下。如有紕漏或錯...

teren 2019-08-26 12:24 評論0 收藏0
《JavaScript 闖關記》之簡介

摘要：瀏覽器只是實現的宿主環境之一，其他宿主環境包括和。年月，版發布，成為國際標準。事件定義了事件和事件處理的接口。對于已經正式納入標準的來說，盡管各瀏覽器都實現了某些眾所周知的共同特性，但其他特性還是會因瀏覽器而異。 JavaScript 是面向 Web 的編程語言，絕大多數現代網站都使用了 JavaScript，并且所有的現代 Web 瀏覽器（電腦，手機，平板）均包含了 JavaScri...

baihe 2019-08-21 10:55 評論0 收藏0
001-讀書筆記-JavaScript高級程序設計 JavaScript簡介

摘要：由于計算機的國際化，組織的標準牽涉到很多其他國家，因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的，級一般指的是最初支持的。這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 評論0 收藏0
【JavaScript】簡介

摘要：誕生于年，它的主要目的是處理以前由服務器端語言負責的一些輸入驗證操作。的不同版本又稱為版次，以第版表示。目前最新的是簡稱文檔對象模型文檔對象模型，是針對但經過拓展用于的應用程序接口，。元素當瀏覽器不支持或被禁用時，顯示里面的內容。 JavaScript誕生于1995年，它的主要目的是處理以前由服務器端語言負責的一些輸入驗證操作。完整的JavaScript實現由下列三個不同的部分組成：...

oogh 2019-08-20 15:05 評論0 收藏0