什么是 DOM ?
DOM(文檔對象模型)是針對於xml但是擴展用於html的應用程序編程接口，定義了訪問和操作html的文檔的標准。
W3C文檔對象模型是中立於平台和語言之間的接口，它允許程序和腳本動態的訪問和更新文檔的內容、結構、樣式。總之HTML是關於如何獲取、修改、添加和刪除HTML元素的標准。
DOM 分層節點
DOM的分層節點一般被稱作是DOM樹，樹中的所有節點都可以通過腳本語言例如js進行訪問，所有HTMlL元素節點都可以被創建、添加或者刪除。
在DOM分層節點中，頁面就是用分層節點圖表示的。
- 整個文檔是一個文檔節點，就想是樹的根一樣。
- 每個HTML元素都是元素節點。
- HTML元素內的文本就是文本節點。
- 每個HTML屬性時屬性節點。
當咱們訪問一個web頁面時，瀏覽器會解析每個HTML元素，創建了HTML文檔的虛擬結構，並將其保存在內存中。接着，HTML頁面被轉換成樹狀結構，每個HTML元素成為一個葉子節點，連接到父分支。
考慮以下 Html 結構：
<!DOCTYPE html> <html lang="en"> <head> <title>A super simple title!</title> </head> <body> <h1>A super simple web page!</h1> </body> </html> 在這個結構的頂部有一個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 alert window.setTimeout(callback, 3000); // Delay execution window.fetch(someUrl); // make XHR requests window.open(); // Opens a new tab window.location; // Browser location window.history; // Browser history window.navigator; // The actual user agent window.document; // The current page 因為這些屬性和方法也是全局的，所以也可以這樣訪問它們
alert('Hello world'); // Shows an alert setTimeout(callback, 3000); // Delay execution fetch(someUrl); // make XHR requests open(); // Opens a new tab location; // Browser location history; // Browser history navigator; // The actual user agent document;// 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前面插入newNode elelment.insertBefore(newNode,existingNode); 刪除節點
//刪除當前節點下指定的子節點，刪除成功返回該被刪除的節點，否則返回null element.removeChild(Node)
DOM常用屬性
獲取當前元素的父節點
// 返回當前元素的父節點對象 element.parentNode 獲取當前元素的子節點
// 返回當前元素所有子元素節點對象，只返回HTML節點 element.chlidren // 返回當前元素多有子節點，包括文本，HTML，屬性節點。（回車也會當做一個節點） element.chilidNodes // 返回當前元素的第一個子節點對象 element.firstChild // 返回當前元素的最后一個子節點對象 element.lastChild 獲取當前元素的同級元素
// 返回當前元素的下一個同級元素 沒有就返回null element.nextSibling // 返回當前元素上一個同級元素 沒有就返回 null element.previousSibling 獲取當前元素的文本
// 返回元素的所有文本，包括html代碼 element.innerHTML // 返回當前元素的自身及子代所有文本值，只是文本內容，不包括html代碼 element.innerText 獲取當前節點的節點類型
// 返回節點的類型,數字形式（1-12） // 常見幾個1：元素節點，2：屬性節點，3：文本節點。 node.nodeType 設置樣式
// 設置元素的樣式時使用style element.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。咱們甚至可以創建自己的迷你框架來抽象最常見的操作:創建元素、追加、創建文本。
vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
總結
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 來處理更簡單的原型和中小型應用也是明智之舉。