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

時間 2019-11-15

原文原文鏈接

翻譯：瘋狂的技術宅原文：www.valentinog.com/blog/dom/javascript

JavaScript 並無那麼糟糕。做爲運行在瀏覽器中的腳本語言，它對於網頁操做很是有用。在本文中，咱們將看到能夠用哪些手段來修改 HTML 文檔和交互。html

什麼是文檔對象模型？

文檔對象模型是在瀏覽器中一切的基礎。但它到底是什麼呢？前端

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

<!DOCTYPE html>
<html lang="en">
  <head>
		<title>A super simple title!</title>
  </head>
  <body>
  	<h1>A super simple web page!</h1>
  </body>
</html>
複製代碼

在這個結構的頂部有一個文檔，也稱爲根元素，它包含另外一個元素：html。 html 元素包含一個 head ，而 head 內又有一個 title。而後 body 中包含一個 h1。每一個 HTML 元素都由特定類型（也稱爲接口）表示，而且能夠包含文本或其餘嵌套元素：node

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：jquery

document.querySelector('h1').__proto__
// Output: HTMLHeadingElement
複製代碼

而 HTMLHeadingElement 又是 HTMLElement 的「後代」：程序員

document.querySelector('h1').__proto__.__proto__
// Output: HTMLElement
複製代碼

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

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 來處理更簡單的原型和中小型應用也是明智之舉。