譯者：前端小智
來源：valentinog

為了保證的可讀性，本文采用意譯而非直譯。

文本主要介紹文檔對象模型(DOM),了解什么是DOM操作，以及如何使用砶 DOM API 與 JS 中的 Web 頁面進行交互。

什么是 DOM ?

DOM(文檔對象模型)是針對于xml但是擴展用于HTML的應用程序編程接口，定義了訪問和操作HTML的文檔的標準。

W3C文檔對象模型是中立于平臺和語言之間的接口，它允許程序和腳本動態的訪問和更新文檔的內容、結構、樣式。總之HTML是關于如何獲取、修改、添加和刪除HTML元素的標準。

DOM 分層節點

DOM的分層節點一般被稱作是DOM樹，樹中的所有節點都可以通過腳本語言例如JS進行訪問，所有HTMlL元素節點都可以被創建、添加或者刪除。

在DOM分層節點中，頁面就是用分層節點圖表示的。

• 整個文檔是一個文檔節點，就想是樹的根一樣。
• 每個HTML元素都是元素節點。
• HTML元素內的文本就是文本節點。
• 每個HTML屬性時屬性節點。

當咱們訪問一個web頁面時，瀏覽器會解析每個HTML元素，創建了HTML文檔的虛擬結構，并將其保存在內存中。接著，HTML頁面被轉換成樹狀結構，每個HTML元素成為一個葉子節點，連接到父分支。
考慮以下 Html 結構：

html>????A?super?simple?title!

A?super?simple?web?page!

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

在這個結構的頂部有一個document，也稱為根元素，它包含另一個元素：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之間的區別產生一些混淆。接下來看看它們有何不同！

document 和 window 之間的區別

簡單來說，document是window的一個對象屬性。window 對象表示瀏覽器中打開的窗口。如果文檔包含框架(frame 或 iframe 標簽)，瀏覽器會為 HTML 文檔創建一個 window 對象，并為每個框架創建一個額外的 window 對象。所有的全局函數和對象都屬于 window 對象的屬性和方法。

區別:

window 指窗體。document指頁面。document是window的一個子對象。

用戶不能改變 document.location(因為這是當前顯示文檔的位置)。但是,可以改變window.location (用其它文檔取代當前文檔)window.location本身也是一個對象,而document.location不是對象。

document接口有許多實用方法，比如querySelector()，它是用于查找給定頁面內HTML元素的方法：

document.querySelector('h1');

window表示當前的瀏覽器，下面代碼與上面等價：

window.document.querySelector('h1');

當然，更常見的是用第一種方式。

window是一個全局對象，可以從瀏覽器中運行的任何JS代碼直接訪問。window暴露了很多屬性和方法，如：

window.alert('Hello?world');?//?Shows?an?alertwindow.setTimeout(callback,?3000);?//?Delay?executionwindow.fetch(someUrl);?//?make?XHR?requestswindow.open();?//?Opens?a?new?tabwindow.location;?//?Browser?locationwindow.history;?//?Browser?historywindow.navigator;?//?The?actual?user?agentwindow.document;?//?The?current?page

因為這些屬性和方法也是全局的，所以也可以這樣訪問它們

alert('Hello?world');?//?Shows?an?alertsetTimeout(callback,?3000);?//?Delay?executionfetch(someUrl);?//?make?XHR?requestsopen();?//?Opens?a?new?tablocation;?//?Browser?locationhistory;?//?Browser?historynavigator;?//?The?actual?user?agentdocument;//?The?current?page

其中有些咱們都已經很熟悉了，如setTimeout() 的方法。例如，當咱們想要得知當前用戶的瀏覽器語言時，window.navigator就非常有用：

if?(window.navigator)?{??var?lang?=?window.navigator.language;??if?(lang?===?"en-US")?{????//?show?something??}??if?(lang?===?"it-IT")?{????//?show?something?else??}}

DOM 常用方法

獲取節點

//?通過id號來獲取元素，返回一個元素對象document.getElementById(idName)?//?通過name屬性獲取id號，返回元素對象數組?document.getElementsByName(name)??//?通過class來獲取元素，返回元素對象數組document.getElementsByClassName(className)???//?通過標簽名獲取元素，返回元素對象數組document.getElementsByTagName(tagName)???????

獲取/設置元素的屬性值：

//?括號傳入屬性名，返回對應屬性的屬性值element.getAttribute(attributeName)//?傳入屬性名及設置的值element.setAttribute(attributeName,attributeValue)

創建節點Node

//?創建一個html元素，這里以創建h3元素為例document.createElement("h3")//?創建一個文本節點；document.createTextNode(String);//?創建一個屬性節點，這里以創建class屬性為例document.createAttribute("class");

增添節點

//?往element內部最后面添加一個節點，參數是節點類型element.appendChild(Node);//?在element內部的中在existingNode前面插入newNodeelelment.insertBefore(newNode,existingNode);?

刪除節點

//刪除當前節點下指定的子節點，刪除成功返回該被刪除的節點，否則返回nullelement.removeChild(Node)

DOM常用屬性

獲取當前元素的父節點

//?返回當前元素的父節點對象element.parentNode

獲取當前元素的子節點

//?返回當前元素所有子元素節點對象，只返回HTML節點element.chlidren//?返回當前元素多有子節點，包括文本，HTML，屬性節點。(回車也會當做一個節點)element.chilidNodes//?返回當前元素的第一個子節點對象element.firstChild//?返回當前元素的最后一個子節點對象element.lastChild

獲取當前元素的同級元素

//?返回當前元素的下一個同級元素?沒有就返回nullelement.nextSibling//?返回當前元素上一個同級元素?沒有就返回?nullelement.previousSibling

獲取當前元素的文本

//?返回元素的所有文本，包括html代碼element.innerHTML//?返回當前元素的自身及子代所有文本值，只是文本內容，不包括html代碼element.innerText

獲取當前節點的節點類型

//?返回節點的類型,數字形式(1-12)//?常見幾個1：元素節點，2：屬性節點，3：文本節點。node.nodeType???

設置樣式

//?設置元素的樣式時使用styleelement.style.color=“#eea”;

DOM 操作

DOM中的每個HTML元素也是一個節點，可以像這樣查找節點：

document.querySelector('h1').nodeType;

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

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

上面的示例返回大寫的節點名。但是需要理解的最重要的概念是，咱們主要使用DOM中的兩種類型的節點：

• 元素節點
• 文本節點

創建元素節點，可以通過 createElement方法：

var?heading?=?document.createElement('h1');

創建文本節點，可能通過 createTextNode 方法：

var?text?=?document.createTextNode('Hello?world');

接著將兩個節點組合在一起，然后添加到 body 上：

var?heading?=?document.createElement('h1');var?text?=?document.createTextNoe('Hello?world');heading.appendChild(text);document.body.appendChild(heading)

在學習Dom操作時候，這些方法需要牢記并熟練使用的。

目前像咱們用這種方式創建和操作元素，是屬于命令式DOM操作。現代前端庫通過支持聲明性方法來解決這個問題，如 JQuery,咱們可以聲明需要什么HTML元素，其它就由庫來完成。

DOM 操作和 jQuery

大部分可能會想，咱們直接使用 JQ 不就行了，為啥還要用如createElement這些原生的方法，多費勁。

請注意jQuery正在漸漸消失。Bootstrap 5將把它從依賴項中刪除，還有很多項目也在刪除它。這背后有一個合理的原因:原生DOM API提供了大量像JQ這樣操作DOM的簡便方法，足以替代jQuery一些常用的DOM操作。

如果只是想進行簡單的交互和操作，請使用普通的JS。咱們甚至可以創建自己的迷你框架來抽象最常見的操作:創建元素、追加、創建文本。

總結

DOM是瀏覽器創建并保留在內存中的網頁的虛擬副本。創建、修改、刪除 HTML 元素，這些屬于 “DOM 操作”。在過去即使對于更簡單的任務，咱們也要依賴于 jQuery，但今天原生 API 已經互相兼容并且足夠成熟足以替代 jQuery 了。

jQuery不會很快消失，但是每個JS開發人員都必須知道如何使用原生API操作DOM。這樣做有很多原因，額外的庫增加了JS應用程序的加載時間和大小，更不用說DOM操作在技術面試也經常出現。

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

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

原文：https://www.valentinog.com/blog/html-table/

總結

以上是生活随笔為你收集整理的ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。