JavaScript中的DOM與BOM實例分析

這篇文章主要介紹“JavaScript中的DOM與BOM實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript中的DOM與BOM實例分析”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,祿豐企業(yè)網(wǎng)站建設,祿豐品牌網(wǎng)站建設,網(wǎng)站定制,祿豐網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,祿豐網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

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

但是，在聊什么是DOM，什么是BOM之前，請容我先把整個的Javascript的結構給大家展示一下：

JavaScript中的DOM與BOM實例分析

上面這張圖，我們可以看到有四個元素：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)的講解，由于面向小白，我后面的講解會盡可能的簡單易懂，基礎不好也盡可放心食用！

II. DOM及其相關操作

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

II.I DOM樹

好的，那什么叫DOM樹？

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

JavaScript中的DOM與BOM實例分析

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

<!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樹應該是這樣的：

JavaScript中的DOM與BOM實例分析

這時候有人要問了，你說這么半天的DOM樹，跟操作html元素有關嗎？

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

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

關于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的元素，傳參是元素類型，例如p、h2-5、a，下以p為例
var element = document.createElement("p")

//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í)行的，轉成文本相當于變成了普通的字符串！

III. BOM及其相關操作

III.I BOM總述

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

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

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

JavaScript中的DOM與BOM實例分析

III.II 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)過指定時間間隔后調(diào)用一個函數(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) 直接屬性 / 方法() 的方式調(diào)用
不僅僅是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)的默認語言

關于“JavaScript中的DOM與BOM實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

網(wǎng)頁標題：JavaScript中的DOM與BOM實例分析
分享路徑：http://jinyejixie.com/article40/iiccho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、全網(wǎng)營銷推廣、自適應網(wǎng)站、企業(yè)建站、營銷型網(wǎng)站建設、響應式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JavaScript中的DOM與BOM實例分析

I. 簡述：何為DOM，何為BOM？

II. DOM及其相關操作

II.I DOM樹

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

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

獲取/設置元素的屬性值的DOM方法

創(chuàng)建節(jié)點(Node)的DOM方法

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

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

DOM常見的一些屬性

III. BOM及其相關操作

III.I BOM總述

III.II BOM常見對象的介紹

window對象

location對象

history對象

navigator對象

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