溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“JavaScript中DOM與BOM的區別與用法是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript中DOM與BOM的區別與用法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
在文章開始之初，我要先提一下籠統地講，什么是DOM，什么是BOM，因為這篇文章最終面向的是有一定JavaScript基礎，但是對DOM和BOM并不了解，甚至不知道的朋友。
但是，在聊什么是DOM，什么是BOM之前，請容我先把整個的Javascript的結構給大家展示一下：
上面這張圖，我們可以看到有四個元素：JavaScript，ECMAScript，DOM和BOM，那么它們四個之間有什么聯系呢？用一個式子總結它們之間的關系：
JavaScript = ECMAscript + BOM + DOM
下面我們來一個一個對它們進行一個概述：
ECMAscript：
ECMAScript 是一種由 ECMA國際（前身為歐洲計算機制造商協會）通過 ECMA-262 標準化的腳本程序設計語言，它是JavaScript（簡稱JS）的標準，瀏覽器就是去執行這個標準。
ECMAscript更像一個規定，規定了各個瀏覽器怎么樣去執行JavaScript的語法，因為我們知道JavaScript是運行在瀏覽器上的腳本語言！有了規定，但是我們還缺少與頁面中各個元素交互的方式，此時下面的DOM誕生了！
DOM:
DOM（Document Object Model ，文檔對象模型）一種獨立于語言，用于操作xml，html文檔的應用編程接口。
對于JavaScript：為了能夠使JavaScript操作Html，JavaScript就有了一套自己的DOM編程接口。
一句話概括：DOM為JavaScript提供了一種訪問和操作HTML元素的"方法"(之所以不用接口這個詞，是怕一些朋友看到接口就發怵的情況，但其實最準確的描述是給JavaScript提供了接口)
BOM:
BOM 是 Browser Object Model，瀏覽器對象模型。BOM 是為了控制瀏覽器的行為而出現的接口。
對于JavaScript：為了能夠讓JavaScript能控制瀏覽器的行為，JavaScript就有了一套自己的BOM接口。
一句話概括：BOM為JavaScript提供了一種控制瀏覽器行為的"方法"。
最后，上面的三個JavaScript的組成成分中，ECMscript是一種規范，而其余的兩個都是提供了"方法"，分別對應HTML元素和瀏覽器，于是下面我們針對后面兩個：DOM和BOM，進行系統的講解，由于面向小白，我后面的講解會盡可能的簡單易懂，基礎不好也盡可放心食用！
首先我們先講解一下DOM的相關知識，我把它又分了兩塊內容：
好的，那什么叫DOM樹？
可能一些學過DOM的初學者聽到這個詞也會有一點陌生，但其實DOM樹并不是什么特別玄幻的東西，恰恰相反，對前端工作人員來說，DOM樹就是你天天處理的頁面的HTML元素所構成那顆樹：
BOM樹中，每個節點可以有兩個身份：可以是父節點的子節點，也可以是其他子節點的父節點，下面我們一起觀察下面這段代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM_demo</title> </head> <body> <p> <a href="https://blog.csdn.net/qq_52736131">跳探戈的小龍蝦</a> </p> </body> </html>
上面的代碼，它的DOM樹應該是這樣的：
這時候有人要問了，你說這么半天的DOM樹，跟操作html元素有關嗎？
答案是非常有關，而且只有了解了文檔的DOM樹結構，才能準確而有效的操作DOM元素，否則會出現各種意料之外的bug。在我們操作一個頁面的HTML元素之前，要對整個頁面的DOM有一個清晰的繪圖，即使在不實實在在繪圖，也要在腦中有一個清晰的脈絡結構。
關于JavaScript中DOM的一些常見的操作html元素的方法，我又雙叒叕分成幾個子部分給大家歸類介紹：
//1.通過元素的id屬性值來獲取元素，返回的是一個元素對象 var element = document.getElementById(id_content) //2.通過元素的name屬性值來獲取元素，返回的是一個元素對象的數組 var element_list = document.getElementsByName(name_content) //3.通過元素的class屬性值來獲取元素，返回的是一個元素對象的數組 var element_list = document.getElementsByClassName(class_content) //4.通過標簽名獲取元素，返回的是一個元素對象數組 var element_list = document.getElementsByTagName(tagName)
//1.獲取元素的屬性值，傳參自然地是屬性名，例如class、id、href var attr = element.getAttribute(attribute_name) //2.設置元素的屬性值，傳參自然地是元素的屬性名及要設置的對應的屬性值 element.setAttribute(attribute_name,attribute_value)
//1.創建一個html的元素，傳參是元素類型，例如p、h2-5、a，下以p為例
var element = document.createElement("p")
//2.創建一個文本節點，傳參的是對應的文本內容(注意是文本節點，不是某個html元素)
var text_node = document.createTextNode(text)
//3.創建一個屬性節點，傳參是對應的屬性名
var attr_node = document.createAttribute(attribute_name)
element.setAttributeNode(attr_node)特別注意第三個，創建屬性節點這個方法，要搭配具體的元素，也就是你要先獲取某個具體元素element，創建一個屬性節點，最后對這個元素添加這個屬性節點(setAttributeNode)。
//1.向element內部的最后面添加一個節點，傳入的參數是節點類型 element.appendChild(Node) //2.向element內部某個已存在的節點的前面插入一個節點，仍然傳入一個節點類型的參數 element.insertBefore(new_Node,existed_Node)
注意，添加節點之前，你要先創建好節點，同時要選好父節點element，第二個方法甚至你還要找好插入位置后面的兄弟節點。
//刪除element內的某個節點，傳參是節點類型參數 element.removeChild(Node)
注意，刪除時，要找到對應的父節點element才可以順利刪除。
最后是一些常見的DOM屬性：
//1.獲取當前元素的父節點 var element_father = element.parentNode //2.獲取當前元素的html元素型子節點 var element_son = element.children //3.獲取當前元素的所有類型子節點，包括html元素、文本和屬性 var element_son = element.childNodes //4.獲取當前元素的第一個子節點 var element_first = element.firstChild //5.獲取當前元素的前一個同級元素 var element_pre = element.previousSibling //6.獲取當前元素的后一個同級元素 var element_next = element.nextSibling //7.獲取當前元素的所有文本，包括html源碼和文本 var element_innerHTML = element.innerHTML //8.獲取當前元素的所有文本，不包含html源碼 var element_innerTEXT = element.innerText
其中，第七個的意思是說把元素內的html代碼和文本都轉成文本，原先的html代碼是執行的，轉成文本相當于變成了普通的字符串！
下面我們再講一講BOM，由于篇幅有限，BOM不做特別細致的講解(實用性的確也沒有DOM那么大)。我們回顧一下開始的時候關于BOM的介紹：
BOM給JavaScript提供用來操作瀏覽器的若干的"方法"
那么首先我們用一張圖把整個BOM的結構給大家梳理一下，與DOM類似，BOM也有一個樹狀結構：
從上面這張圖上，我們可以看到：
window是整個BOM樹食物鏈的頂端，因此每一個新打開的窗口，都被認為是一個window對象。
window對象有以下常見的屬性和方法：
| 屬性/方法 | 含義 |
| opener | 當前窗口的父窗口 |
| length | 窗口中的框架數 |
| document | 窗口中當前顯示的文檔對象 |
| alert(string) | 創建一個警告對話框，顯示一條信息 |
| close() | 關閉窗口 |
| confirm() | 創建一個需要用戶確認的對話框 |
| open(url,name,[options]) | 打開一個新窗口并返回新 window 對象 |
| prompt(text,defaultInput) | 創建一個對話框要求用戶輸入信息 |
| setInterval(expression,milliseconds) | 經過指定時間間隔計算一個表達式 |
| setInterval(function,millis enconds,[arguments]) | 經過指定時間間隔后調用一個函數 |
| setTimeout(expression,milli seconds) | 在定時器超過后計算一個表達式 |
| setTimeout(expression,milli seconds,[arguments]) | 在定時器超過時后計算一個函數 |
其中，大家看到上面有一個函數alert()，因為大家學JavaScript的時候，輸入輸出流大家大部分都以alert()函數彈窗作為自己的第一個demo，所以看到這里你可能會問了：
當時用alert()函數的時候，好像沒有提到window，那這里的alert()是之前學的那個alert()嗎？答案是這樣的：
這兩個alert()確實是同一個函數，之所以可以不加window是因為，window的所有屬性和方法，都可以有兩種表示方法：
(1) window.屬性 / window.方法()
(2) 直接屬性 / 方法() 的方式調用
不僅僅是alert()，上面所有的window屬性和函數都成立，感興趣的小伙伴可以自行嘗試。
什么是location對象？
location對象是window對象的一個屬性，提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。
location對象有以下常見的屬性和方法：
| 屬性/方法 | 內容 |
| host | 主機名：端口號 |
| hostname | 主機名 |
| href | 整個 URL |
| pathname | 路徑名 |
| port | 端口號 |
| protocol | 協議部分 |
| search | 查詢字符串 |
| reload() | 重載當前 URL |
| repalce() | 用新的 URL 替換當前頁面 |
其實我們仔細觀察上面那張結構圖就會發現：
location對象不僅僅是window對象的一個屬性，還是document對象的一個屬性。
這意味著：
window.location = location = document.location
什么是history對象？
history 對象是 window 對象的屬性，它保存著用戶上網的記錄，這個記錄的時間戳是從窗口被打開的那一刻算起。
history對象有以下常見的屬性和方法：
| 屬性/方法 | 描述 |
| length | history 對象中的記錄數 |
| back() | 前往瀏覽器歷史條目前一個 URL，類似后退 |
| forward() | 前往瀏覽器歷史條目下一個 URL，類似前進 |
| go(num) | 瀏覽器在 history 對象中向前或向后 |
最后介紹一下navigator對象：
navigator對象，是BOM中識別客戶端瀏覽器的一個window屬性。
與navigator相關的一些常見屬性：
| 屬性 | 說明 |
| appName | 完整的瀏覽器名稱和版本信息 |
| platform | 瀏覽器所在的系統平臺 |
| plugins | 瀏覽器中安裝的插件信息的數 組 |
| userAgent | 瀏覽器的用戶代理字符串 |
| userLanguage | 操作系統的默認語言 |
讀到這里，這篇“JavaScript中DOM與BOM的區別與用法是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
