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

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

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

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

當(dāng)我們?cè)L問網(wǎng)頁時(shí)，瀏覽器會(huì)計(jì)算出如何解釋每個(gè) HTML 元素。這樣它就可以創(chuàng)建 HTML 文檔的虛擬表示，并保存在內(nèi)存中。 HTML 頁面被轉(zhuǎn)換為樹狀結(jié)構(gòu)并且每個(gè) HTML 元素都變成一個(gè)葉子結(jié)點(diǎn)，連接到父分支?？匆幌逻@個(gè)簡(jiǎn)單的 HTML 頁面：

  
        
  
  
      
A super simple web page!
  

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

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

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

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

而 HTMLHeadingElement 又是 HTMLElement 的“后代”：

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

這時(shí)（特別是初學(xué)者）可能會(huì)對(duì) document 和 window 之間的區(qū)別產(chǎn)生一些混淆。讓我們看看它們有什么不同！

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

document.querySelector("h1");

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

window.document.querySelector("h1");

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

document.methodName();

DOM中的每個(gè) HTML 元素也都是“節(jié)點(diǎn)”，實(shí)際上我們可以像這樣去檢查節(jié)點(diǎn)類型：

document.querySelector("h1").nodeType;

上面的代碼會(huì)返回 1，它是 Element 類型的節(jié)點(diǎn)的標(biāo)識(shí)符。你還可以檢查節(jié)點(diǎn)名稱：

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

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

Element 類型的節(jié)點(diǎn)（HTML 元素）

Text 類型的節(jié)點(diǎn)（文本節(jié)點(diǎn)）

為了創(chuàng)建 Element 類型的新節(jié)點(diǎn)，本機(jī) DOM API 為我們提供了 createelement 方法，你通常會(huì)這樣調(diào)用：

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

為了創(chuàng)建文本，我們可以用 createTextNode：

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

通過在新的 HTML 元素中附加文本，可以將兩個(gè)節(jié)點(diǎn)組合在一起。最后需要注意的是，我們還可以將標(biāo)題元素附加到根文檔：

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

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

當(dāng)以這種方式創(chuàng)建和操作元素時(shí)，我們談?wù)摰氖恰?strong>命令式” DOM操作。現(xiàn)代前端庫正在通過支持“聲明”方法來解決這個(gè)問題。我們不是一步一步地去命令瀏覽器，而是聲明我們需要什么 HTML 元素，而庫可以處理剩下的部分。

此時(shí)你可能會(huì)想：“我可以只使用jQuery嗎？為什么要用 createElement？“ 我經(jīng)常會(huì)被問到這些問題。

好吧，請(qǐng)注意 jQuery 正逐漸消失。 Bootstrap 5 將從依賴項(xiàng)中刪除它，還有更多的庫或框架正在刪除它。這背后有一個(gè)十分正當(dāng)?shù)睦碛桑涸?DOM API 已經(jīng)非常完整且成熟到足以使 jQuery 過時(shí)。

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

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

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

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

操作 DOM 最常用的方法是 document.createElement() 用于創(chuàng)建新的 HTML 元素，document.createTextNode() 用于在 DOM 內(nèi)創(chuàng)建文本節(jié)點(diǎn)。需要注意的是 .appendChild() 用于將新的 HTML 元素或文本節(jié)點(diǎn)附加到現(xiàn)有元素。

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

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

如果你想回到基礎(chǔ)知識(shí)，請(qǐng)查看如何使用原生 JavaScript 生成表格 一文！在沒有任何前端框架的幫助的情況下，你會(huì)發(fā)現(xiàn)實(shí)現(xiàn)它都需要什么。

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

必須要會(huì)的 50 個(gè)React 面試題

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

11 個(gè)最好的 JavaScript 動(dòng)態(tài)效果庫

CSS Flexbox 可視化手冊(cè)

從設(shè)計(jì)者的角度看 React

過節(jié)很無聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫效果

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

14個(gè)最好的 JavaScript 數(shù)據(jù)可視化庫

8 個(gè)給前端的頂級(jí) VS Code 擴(kuò)展插件

Node.js 多線程完全指南

把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)