JavaScript的DOM與BOM的區(qū)別與用法詳解
1. 簡述：何為DOM，何為BOM？
在文章開始之初，我要先提一下籠統(tǒng)地講，什么是DOM，什么是BOM，因為這篇文章最終面向的是有一定JavaScript基礎，但是對DOM和BOM并不了解，甚至不知道的朋友。
但是，在聊什么是DOM，什么是BOM之前，請容我先把整個的Javascript的結構給大家展示一下：
上面這張圖，我們可以看到有四個元素：JavaScript，ECMAScript，DOM和BOM，那么它們四個之間有什么聯(lián)系呢？用一個式子總結它們之間的關系：
JavaScript = ECMAscript + BOM + DOM
下面我們來一個一個對它們進行一個概述：
ECMAscript：
ECMAScript 是一種由 ECMA國際（前身為歐洲計算機制造商協(xié)會）通過 ECMA-262 標準化的腳本程序設計語言，它是JavaScript（簡稱JS）的標準，瀏覽器就是去執(zhí)行這個標準。
ECMAscript更像一個規(guī)定，規(guī)定了各個瀏覽器怎么樣去執(zhí)行JavaScript的語法，因為我們知道JavaScript是運行在瀏覽器上的腳本語言！有了規(guī)定，但是我們還缺少與頁面中各個元素交互的方式，此時下面的DOM誕生了！
DOM:
DOM（Document Object Model ，文檔對象模型）一種獨立于語言，用于操作xml，html文檔的應用編程接口。
對于JavaScript：為了能夠使JavaScript操作Html，JavaScript就有了一套自己的DOM編程接口。
一句話概括：DOM為JavaScript提供了一種訪問和操作HTML元素的"方法"(之所以不用接口這個詞，是怕一些朋友看到接口就發(fā)怵的情況，但其實最準確的描述是給JavaScript提供了接口)
BOM:
BOM 是 Browser Object Model，瀏覽器對象模型。BOM 是為了控制瀏覽器的行為而出現(xiàn)的接口。
對于JavaScript：為了能夠讓JavaScript能控制瀏覽器的行為，JavaScript就有了一套自己的BOM接口。
一句話概括：BOM為JavaScript提供了一種控制瀏覽器行為的"方法"。
最后，上面的三個JavaScript的組成成分中，ECMscript是一種規(guī)范，而其余的兩個都是提供了"方法"，分別對應HTML元素和瀏覽器，于是下面我們針對后面兩個：DOM和BOM，進行系統(tǒng)的講解，由于面向小白，我后面的講解會盡可能的簡單易懂，基礎不好也盡可放心食用！
2. DOM及其相關操作
首先我們先講解一下DOM的相關知識，我把它又分了兩塊內(nèi)容：
2.1DOM樹
好的，那什么叫DOM樹？
可能一些學過DOM的初學者聽到這個詞也會有一點陌生，但其實DOM樹并不是什么特別玄幻的東西，恰恰相反，對前端工作人員來說，DOM樹就是你天天處理的頁面的HTML元素所構成那顆樹：
BOM樹中，每個節(jié)點可以有兩個身份：可以是父節(jié)點的子節(jié)點，也可以是其他子節(jié)點的父節(jié)點，下面我們一起觀察下面這段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM_demo</title>
</head>
<body>
<div>
<a >跳探戈的小龍蝦</a>
</div>
</body>
</html>上面的代碼，它的DOM樹應該是這樣的：
這時候有人要問了，你說這么半天的DOM樹，跟操作html元素有關嗎？
答案是非常有關，而且只有了解了文檔的DOM樹結構，才能準確而有效的操作DOM元素，否則會出現(xiàn)各種意料之外的bug。在我們操作一個頁面的HTML元素之前，要對整個頁面的DOM有一個清晰的繪圖，即使在不實實在在繪圖，也要在腦中有一個清晰的脈絡結構。
2.2DOM的一些常見的操作元素方法
關于JavaScript中DOM的一些常見的操作html元素的方法，我又雙叒叕分成幾個子部分給大家歸類介紹：
獲取節(jié)點的DOM方法
//1.通過元素的id屬性值來獲取元素，返回的是一個元素對象 var element = document.getElementById(id_content) //2.通過元素的name屬性值來獲取元素，返回的是一個元素對象的數(shù)組 var element_list = document.getElementsByName(name_content) //3.通過元素的class屬性值來獲取元素，返回的是一個元素對象的數(shù)組 var element_list = document.getElementsByClassName(class_content) //4.通過標簽名獲取元素，返回的是一個元素對象數(shù)組 var element_list = document.getElementsByTagName(tagName)
獲取/設置元素的屬性值的DOM方法
//1.獲取元素的屬性值，傳參自然地是屬性名，例如class、id、href var attr = element.getAttribute(attribute_name) //2.設置元素的屬性值，傳參自然地是元素的屬性名及要設置的對應的屬性值 element.setAttribute(attribute_name,attribute_value)
創(chuàng)建節(jié)點(Node)的DOM方法
//1.創(chuàng)建一個html的元素，傳參是元素類型，例如div、h1-5、a，下以div為例var element = document.createElement("div")//2.創(chuàng)建一個文本節(jié)點，傳參的是對應的文本內(nèi)容(注意是文本節(jié)點，不是某個html元素)var text_node = document.createTextNode(text)//3.創(chuàng)建一個屬性節(jié)點，傳參是對應的屬性名var attr_node = document.createAttribute(attribute_name)element.setAttributeNode(attr_node)特別注意第三個，創(chuàng)建屬性節(jié)點這個方法，要搭配具體的元素，也就是你要先獲取某個具體元素element，創(chuàng)建一個屬性節(jié)點，最后對這個元素添加這個屬性節(jié)點(setAttributeNode)。
增添節(jié)點的DOM方法
//1.向element內(nèi)部的最后面添加一個節(jié)點，傳入的參數(shù)是節(jié)點類型 element.appendChild(Node) //2.向element內(nèi)部某個已存在的節(jié)點的前面插入一個節(jié)點，仍然傳入一個節(jié)點類型的參數(shù) element.insertBefore(new_Node,existed_Node)
注意，添加節(jié)點之前，你要先創(chuàng)建好節(jié)點，同時要選好父節(jié)點element，第二個方法甚至你還要找好插入位置后面的兄弟節(jié)點。
刪除節(jié)點的DOM方法
//刪除element內(nèi)的某個節(jié)點，傳參是節(jié)點類型參數(shù) element.removeChild(Node)
注意，刪除時，要找到對應的父節(jié)點element才可以順利刪除。
DOM常見的一些屬性
最后是一些常見的DOM屬性：
//1.獲取當前元素的父節(jié)點 var element_father = element.parentNode //2.獲取當前元素的html元素型子節(jié)點 var element_son = element.children //3.獲取當前元素的所有類型子節(jié)點，包括html元素、文本和屬性 var element_son = element.childNodes //4.獲取當前元素的第一個子節(jié)點 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
其中，第七個的意思是說把元素內(nèi)的html代碼和文本都轉成文本，原先的html代碼是執(zhí)行的，轉成文本相當于變成了普通的字符串！
3. BOM及其相關操作
3.1 BOM總述
下面我們再講一講BOM，由于篇幅有限，BOM不做特別細致的講解(實用性的確也沒有DOM那么大)。我們回顧一下開始的時候關于BOM的介紹：
BOM給JavaScript提供用來操作瀏覽器的若干的"方法"
那么首先我們用一張圖把整個BOM的結構給大家梳理一下，與DOM類似，BOM也有一個樹狀結構：
3.2 BOM常見對象的介紹
window對象
從上面這張圖上，我們可以看到：
window是整個BOM樹食物鏈的頂端，因此每一個新打開的窗口，都被認為是一個window對象。
window對象有以下常見的屬性和方法：
| 屬性/方法 | 含義 |
| opener | 當前窗口的父窗口 |
| length | 窗口中的框架數(shù) |
| document | 窗口中當前顯示的文檔對象 |
| alert(string) | 創(chuàng)建一個警告對話框，顯示一條信息 |
| close() | 關閉窗口 |
| confirm() | 創(chuàng)建一個需要用戶確認的對話框 |
| open(url,name,[options]) | 打開一個新窗口并返回新 window 對象 |
| prompt(text,defaultInput) | 創(chuàng)建一個對話框要求用戶輸入信息 |
| setInterval(expression,milliseconds) | 經(jīng)過指定時間間隔計算一個表達式 |
| setInterval(function,millis enconds,[arguments]) | 經(jīng)過指定時間間隔后調用一個函數(shù) |
| setTimeout(expression,milli seconds) | 在定時器超過后計算一個表達式 |
| setTimeout(expression,milli seconds,[arguments]) | 在定時器超過時后計算一個函數(shù) |
其中，大家看到上面有一個函數(shù)alert()，因為大家學JavaScript的時候，輸入輸出流大家大部分都以alert()函數(shù)彈窗作為自己的第一個demo，所以看到這里你可能會問了：
當時用alert()函數(shù)的時候，好像沒有提到window，那這里的alert()是之前學的那個alert()嗎？答案是這樣的：
這兩個alert()確實是同一個函數(shù)，之所以可以不加window是因為，window的所有屬性和方法，都可以有兩種表示方法：
(1) window.屬性 / window.方法()
(2) 直接屬性 / 方法() 的方式調用
不僅僅是alert()，上面所有的window屬性和函數(shù)都成立，感興趣的小伙伴可以自行嘗試。
location對象
什么是location對象？
location對象是window對象的一個屬性，提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。
location對象有以下常見的屬性和方法：
| 屬性/方法 | 內(nèi)容 |
| host | 主機名：端口號 |
| hostname | 主機名 |
| href | 整個 URL |
| pathname | 路徑名 |
| port | 端口號 |
| protocol | 協(xié)議部分 |
| search | 查詢字符串 |
| reload() | 重載當前 URL |
| repalce() | 用新的 URL 替換當前頁面 |
其實我們仔細觀察上面那張結構圖就會發(fā)現(xiàn)：
location對象不僅僅是window對象的一個屬性，還是document對象的一個屬性。
這意味著：
window.location = location = document.location
history對象
什么是history對象？
history 對象是 window 對象的屬性，它保存著用戶上網(wǎng)的記錄，這個記錄的時間戳是從窗口被打開的那一刻算起。
history對象有以下常見的屬性和方法：
| 屬性/方法 | 描述 |
| length | history 對象中的記錄數(shù) |
| back() | 前往瀏覽器歷史條目前一個 URL，類似后退 |
| forward() | 前往瀏覽器歷史條目下一個 URL，類似前進 |
| go(num) | 瀏覽器在 history 對象中向前或向后 |
navigator對象
最后介紹一下navigator對象：
navigator對象，是BOM中識別客戶端瀏覽器的一個window屬性。
與navigator相關的一些常見屬性：
| 屬性 | 說明 |
| appName | 完整的瀏覽器名稱和版本信息 |
| platform | 瀏覽器所在的系統(tǒng)平臺 |
| plugins | 瀏覽器中安裝的插件信息的數(shù) 組 |
| userAgent | 瀏覽器的用戶代理字符串 |
| userLanguage | 操作系統(tǒng)的默認語言 |
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
這篇文章主要介紹了bootstrap-table后端分頁功能,結合完整實例形式分析了bootstrap-table后端請求、數(shù)據(jù)分頁功能具體步驟與實現(xiàn)技巧,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了關于base64編碼和解碼的js工具函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細介紹了微信小程序之購物車功能的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了JS Select下拉框的相關資料，支持輸入模糊查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
使用bootstrap的排版特性可以創(chuàng)建標題，段落，列表及其它內(nèi)聯(lián)元素。本文重點給大家介紹Bootstrap 排版 知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
這篇文章主要介紹了詳解webpack 最簡打包結果分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
JavaScript實現(xiàn)樓梯滾動特效(jQuery實現(xiàn))
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)樓梯滾動特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了javascript對象的創(chuàng)建和訪問實現(xiàn)方法，感興趣的小伙伴們可以參考一下2016-03-03
bootstrap里bootstrap動態(tài)加載下拉框的實例講解
今天小編就為大家分享一篇bootstrap里bootstrap動態(tài)加載下拉框的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS實現(xiàn)數(shù)組的增刪改查操作,結合實例形式分析了javascript針對數(shù)組的追加、獲取、刪除、添加、修改等常見操作技巧與相關注意事項,需要的朋友可以參考下2018-08-08