首頁 > 文章 > web前端 > 完全掌握JavaScript之DOM與BOM的差異與用法

完全掌握JavaScript之DOM與BOM的差異與用法

WBOY轉載: 2022-04-02 13:03:141818瀏覽

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了DOM與BOM及其區別與用法的相關問題，下面就一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學】

I. 簡述：何為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，進行系統的講解，由於面向小白，我後面的講解會盡可能的簡單易懂，基礎不好也盡可放心食用

！

II. DOM及其相關操作

首先我們先講解DOM的相關知識，我把它

又分了兩塊內容

：

II.I 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有一个清晰的绘图，即使在不实实在在绘图，也要在脑中有一个清晰的脉络结构。

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

关于JavaScript中DOM的一些常见的操作html元素的方法，我又双叒叕分成几个子部分给大家归类介绍：

获取节点的DOM方法

//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)

获取/设置元素的属性值的DOM方法

//1.获取元素的属性值，传参自然地是属性名，例如class、id、href
var attr = element.getAttribute(attribute_name)

//2.设置元素的属性值，传参自然地是元素的属性名及要设置的对应的属性值
element.setAttribute(attribute_name,attribute_value)

创建节点(Node)的DOM方法

//1.创建一个html的元素，传参是元素类型，例如p、h1-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)。

增添节点的DOM方法

//1.向element内部的最后面添加一个节点，传入的参数是节点类型
element.appendChild(Node)

//2.向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数
element.insertBefore(new_Node,existed_Node)

注意，添加节点之前，你要先创建好节点，同时要选好父节点element，第二个方法甚至你还要找好插入位置后面的兄弟节点。

删除节点的DOM方法

//删除element内的某个节点，传参是节点类型参数
element.removeChild(Node)

注意，删除时，要找到对应的父节点element才可以顺利删除。

DOM常见的一些属性

最后是一些常见的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代码是执行的，转成文本相当于变成了普通的字符串！

III. BOM及其相关操作

III.I BOM总述

下面我们再讲一讲BOM，由于篇幅有限，BOM不做特别细致的讲解(实用性的确也没有DOM那么大)。我们回顾一下开始的时候关于BOM的介绍：

BOM给JavaScript提供用来操作浏览器的若干的"方法"

那么首先我们用一张图把整个BOM的结构给大家梳理一下，与DOM类似，BOM也有一个树状结构：

III.II BOM常见对象的介绍

window对象

从上面这张图上，我们可以看到：

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

物件？

location物件是window物件的屬性，提供了與目前視窗中載入的文件有關的信息，也提供了一些導覽功能。
location物件有以下常見的屬性與方法：

#屬性/方法##路徑名稱port連接埠號碼protocol協定部分 search查詢字串reload()#重載目前URLrepalce() 用新的URL 取代目前頁面

其實我們仔細觀察上面那張結構圖就會發現：

location物件不只是window物件的一個屬性，還是document物件的屬性。

這表示：

window.location = location = document.location

history物件

什麼是history物件？

history 物件是 window 物件的屬性，它保存著使用者上網的記錄，而這個記錄的時間戳記是從視窗被開啟的那一刻算起。

history物件有以下常見的屬性與方法：

	##內容
host	主機名稱：連接埠號碼
hostname	主機名稱
href	整個URL
pathname

##back()前往瀏覽器歷史條目前一個URL，類似後退forward()前往瀏覽器歷史條目下一個URL，類似前進go(num)瀏覽器在history 物件中向前或向後

屬性/方法	#描述
length	#history 物件中的記錄數字

navigator物件

最後介紹一下

navigator物件：

navigator對象，是BOM中辨識客戶端瀏覽器的一個window屬性。

與navigator相關的一些共同屬性：

# #說明appNameplatformplugins##userAgent瀏覽器的使用者代理字串userLanguage#作業系統的預設語言以上是本期的全部內容，

#屬性
完整的瀏覽器名稱和版本資訊
瀏覽器所在的系統平台
瀏覽器中安裝的外掛程式資訊的陣列

喜歡的小夥伴們

可以
三連支持一下！ ???！
另外本期部落格參與了

【

新星計畫】，也請大家支持一下???！ 【相關推薦：javascript影片教學

】

以上是完全掌握JavaScript之DOM與BOM的差異與用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript ecmascript html String Object xml 字符串接口 Length JS function 对象 dom bom location history href alert bug prompt

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：淺析node esmodule模式下怎麼呼叫commonjs模組下一篇：淺析node esmodule模式下怎麼呼叫commonjs模組

看更多