本文小編為大家詳細(xì)介紹“JavaScript中DOM與BOM的區(qū)別與用法是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript中DOM與BOM的區(qū)別與用法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鹿泉ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鹿泉網(wǎng)站制作公司

I. 簡述：何為DOM，何為BOM？

在文章開始之初，我要先提一下籠統(tǒng)地講，什么是DOM，什么是BOM，因?yàn)檫@篇文章最終面向的是有一定JavaScript基礎(chǔ)，但是對DOM和BOM并不了解，甚至不知道的朋友。

但是，在聊什么是DOM，什么是BOM之前，請容我先把整個(gè)的Javascript的結(jié)構(gòu)給大家展示一下：

上面這張圖，我們可以看到有四個(gè)元素：JavaScript，ECMAScript，DOM和BOM，那么它們四個(gè)之間有什么聯(lián)系呢？用一個(gè)式子總結(jié)它們之間的關(guān)系：

JavaScript = ECMAscript + BOM + DOM

下面我們來一個(gè)一個(gè)對它們進(jìn)行一個(gè)概述：

ECMAscript：

ECMAScript 是一種由 ECMA國際（前身為歐洲計(jì)算機(jī)制造商協(xié)會）通過 ECMA-262 標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語言，它是JavaScript（簡稱JS）的標(biāo)準(zhǔn)，瀏覽器就是去執(zhí)行這個(gè)標(biāo)準(zhǔn)。

ECMAscript更像一個(gè)規(guī)定，規(guī)定了各個(gè)瀏覽器怎么樣去執(zhí)行JavaScript的語法，因?yàn)槲覀冎繨avaScript是運(yùn)行在瀏覽器上的腳本語言！有了規(guī)定，但是我們還缺少與頁面中各個(gè)元素交互的方式，此時(shí)下面的DOM誕生了！

DOM:

DOM（Document Object Model ，文檔對象模型）一種獨(dú)立于語言，用于操作xml，html文檔的應(yīng)用編程接口。

對于JavaScript：為了能夠使JavaScript操作Html，JavaScript就有了一套自己的DOM編程接口。

一句話概括：DOM為JavaScript提供了一種訪問和操作HTML元素的"方法"(之所以不用接口這個(gè)詞，是怕一些朋友看到接口就發(fā)怵的情況，但其實(shí)最準(zhǔn)確的描述是給JavaScript提供了接口)

BOM:

BOM 是 Browser Object Model，瀏覽器對象模型。BOM 是為了控制瀏覽器的行為而出現(xiàn)的接口。

對于JavaScript：為了能夠讓JavaScript能控制瀏覽器的行為，JavaScript就有了一套自己的BOM接口。

一句話概括：BOM為JavaScript提供了一種控制瀏覽器行為的"方法"。

最后，上面的三個(gè)JavaScript的組成成分中，ECMscript是一種規(guī)范，而其余的兩個(gè)都是提供了"方法"，分別對應(yīng)HTML元素和瀏覽器，于是下面我們針對后面兩個(gè)：DOM和BOM，進(jìn)行系統(tǒng)的講解，由于面向小白，我后面的講解會盡可能的簡單易懂，基礎(chǔ)不好也盡可放心食用！

II. DOM及其相關(guān)操作

首先我們先講解一下DOM的相關(guān)知識，我把它又分了兩塊內(nèi)容：

II.I DOM樹

好的，那什么叫DOM樹？

可能一些學(xué)過DOM的初學(xué)者聽到這個(gè)詞也會有一點(diǎn)陌生，但其實(shí)DOM樹并不是什么特別玄幻的東西，恰恰相反，對前端工作人員來說，DOM樹就是你天天處理的頁面的HTML元素所構(gòu)成那顆樹：

BOM樹中，每個(gè)節(jié)點(diǎn)可以有兩個(gè)身份：可以是父節(jié)點(diǎn)的子節(jié)點(diǎn)，也可以是其他子節(jié)點(diǎn)的父節(jié)點(diǎn)，下面我們一起觀察下面這段代碼：

    
    


    

        跳探戈的小龍蝦
    

上面的代碼，它的DOM樹應(yīng)該是這樣的：

這時(shí)候有人要問了，你說這么半天的DOM樹，跟操作html元素有關(guān)嗎？

答案是非常有關(guān)，而且只有了解了文檔的DOM樹結(jié)構(gòu)，才能準(zhǔn)確而有效的操作DOM元素，否則會出現(xiàn)各種意料之外的bug。在我們操作一個(gè)頁面的HTML元素之前，要對整個(gè)頁面的DOM有一個(gè)清晰的繪圖，即使在不實(shí)實(shí)在在繪圖，也要在腦中有一個(gè)清晰的脈絡(luò)結(jié)構(gòu)。

II.II DOM的一些常見的操作元素方法

關(guān)于JavaScript中DOM的一些常見的操作html元素的方法，我又雙叒叕分成幾個(gè)子部分給大家歸類介紹：

獲取節(jié)點(diǎn)的DOM方法

//1.通過元素的id屬性值來獲取元素，返回的是一個(gè)元素對象
var element = document.getElementById(id_content)

//2.通過元素的name屬性值來獲取元素，返回的是一個(gè)元素對象的數(shù)組
var element_list = document.getElementsByName(name_content)

//3.通過元素的class屬性值來獲取元素，返回的是一個(gè)元素對象的數(shù)組
var element_list = document.getElementsByClassName(class_content)

//4.通過標(biāo)簽名獲取元素，返回的是一個(gè)元素對象數(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é)點(diǎn)(Node)的DOM方法

//1.創(chuàng)建一個(gè)html的元素，傳參是元素類型，例如p、h2-5、a，下以p為例
var element = document.createElement("p")

//2.創(chuàng)建一個(gè)文本節(jié)點(diǎn)，傳參的是對應(yīng)的文本內(nèi)容(注意是文本節(jié)點(diǎn)，不是某個(gè)html元素)
var text_node = document.createTextNode(text)

//3.創(chuàng)建一個(gè)屬性節(jié)點(diǎn)，傳參是對應(yīng)的屬性名
var attr_node = document.createAttribute(attribute_name)
element.setAttributeNode(attr_node)

特別注意第三個(gè)，創(chuàng)建屬性節(jié)點(diǎn)這個(gè)方法，要搭配具體的元素，也就是你要先獲取某個(gè)具體元素element，創(chuàng)建一個(gè)屬性節(jié)點(diǎn)，最后對這個(gè)元素添加這個(gè)屬性節(jié)點(diǎn)(setAttributeNode)。

增添節(jié)點(diǎn)的DOM方法

//1.向element內(nèi)部的最后面添加一個(gè)節(jié)點(diǎn)，傳入的參數(shù)是節(jié)點(diǎn)類型
element.appendChild(Node)

//2.向element內(nèi)部某個(gè)已存在的節(jié)點(diǎn)的前面插入一個(gè)節(jié)點(diǎn)，仍然傳入一個(gè)節(jié)點(diǎn)類型的參數(shù)
element.insertBefore(new_Node,existed_Node)

注意，添加節(jié)點(diǎn)之前，你要先創(chuàng)建好節(jié)點(diǎn)，同時(shí)要選好父節(jié)點(diǎn)element，第二個(gè)方法甚至你還要找好插入位置后面的兄弟節(jié)點(diǎn)。

刪除節(jié)點(diǎn)的DOM方法

//刪除element內(nèi)的某個(gè)節(jié)點(diǎn)，傳參是節(jié)點(diǎn)類型參數(shù)
element.removeChild(Node)

注意，刪除時(shí)，要找到對應(yīng)的父節(jié)點(diǎn)element才可以順利刪除。

DOM常見的一些屬性

最后是一些常見的DOM屬性：

//1.獲取當(dāng)前元素的父節(jié)點(diǎn)
var element_father = element.parentNode

//2.獲取當(dāng)前元素的html元素型子節(jié)點(diǎn)
var element_son = element.children

//3.獲取當(dāng)前元素的所有類型子節(jié)點(diǎn)，包括html元素、文本和屬性
var element_son = element.childNodes

//4.獲取當(dāng)前元素的第一個(gè)子節(jié)點(diǎn)
var element_first = element.firstChild

//5.獲取當(dāng)前元素的前一個(gè)同級元素
var element_pre = element.previousSibling

//6.獲取當(dāng)前元素的后一個(gè)同級元素
var element_next = element.nextSibling

//7.獲取當(dāng)前元素的所有文本，包括html源碼和文本
var element_innerHTML = element.innerHTML

//8.獲取當(dāng)前元素的所有文本，不包含html源碼
var element_innerTEXT = element.innerText

其中，第七個(gè)的意思是說把元素內(nèi)的html代碼和文本都轉(zhuǎn)成文本，原先的html代碼是執(zhí)行的，轉(zhuǎn)成文本相當(dāng)于變成了普通的字符串！

III. BOM及其相關(guān)操作

III.I BOM總述

下面我們再講一講BOM，由于篇幅有限，BOM不做特別細(xì)致的講解(實(shí)用性的確也沒有DOM那么大)。我們回顧一下開始的時(shí)候關(guān)于BOM的介紹：

BOM給JavaScript提供用來操作瀏覽器的若干的"方法"

那么首先我們用一張圖把整個(gè)BOM的結(jié)構(gòu)給大家梳理一下，與DOM類似，BOM也有一個(gè)樹狀結(jié)構(gòu)：

III.II BOM常見對象的介紹

window對象

從上面這張圖上，我們可以看到：

window是整個(gè)BOM樹食物鏈的頂端，因此每一個(gè)新打開的窗口，都被認(rèn)為是一個(gè)window對象。

window對象有以下常見的屬性和方法：

其中，大家看到上面有一個(gè)函數(shù)alert()，因?yàn)榇蠹?strong>學(xué)JavaScript的時(shí)候，輸入輸出流大家大部分都以alert()函數(shù)彈窗作為自己的第一個(gè)demo，所以看到這里你可能會問了：

當(dāng)時(shí)用alert()函數(shù)的時(shí)候，好像沒有提到window，那這里的alert()是之前學(xué)的那個(gè)alert()嗎？答案是這樣的：

這兩個(gè)alert()確實(shí)是同一個(gè)函數(shù)，之所以可以不加window是因?yàn)椋?strong>window的所有屬性和方法，都可以有兩種表示方法：

(1) window.屬性 / window.方法()

(2) 直接屬性 / 方法() 的方式調(diào)用

不僅僅是alert()，上面所有的window屬性和函數(shù)都成立，感興趣的小伙伴可以自行嘗試。

location對象

什么是location對象？

location對象是window對象的一個(gè)屬性，提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航功能。

location對象有以下常見的屬性和方法：

其實(shí)我們仔細(xì)觀察上面那張結(jié)構(gòu)圖就會發(fā)現(xiàn)：

location對象不僅僅是window對象的一個(gè)屬性，還是document對象的一個(gè)屬性。

這意味著：

window.location = location = document.location

history對象

什么是history對象？

history 對象是 window 對象的屬性，它保存著用戶上網(wǎng)的記錄，這個(gè)記錄的時(shí)間戳是從窗口被打開的那一刻算起。

history對象有以下常見的屬性和方法：

navigator對象

最后介紹一下navigator對象：

navigator對象，是BOM中識別客戶端瀏覽器的一個(gè)window屬性。

與navigator相關(guān)的一些常見屬性：

讀到這里，這篇“JavaScript中DOM與BOM的區(qū)別與用法是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。