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