JavaScript中DOM和BOM的區(qū)別與用處詳解
1. 概念與定義
- DOM (Document Object Model) : 文檔對(duì)象模型,它是一種標(biāo)準(zhǔn)的編程接口,表示 HTML 或 XML 文檔的結(jié)構(gòu),使得開(kāi)發(fā)者可以通過(guò) JavaScript 動(dòng)態(tài)地訪(fǎng)問(wèn)和操作文檔的內(nèi)容、結(jié)構(gòu)和樣式。DOM 將文檔表示為節(jié)點(diǎn)樹(shù),其中每個(gè)節(jié)點(diǎn)都表示文檔的一部分,如元素、屬性、文本等。
- BOM (Browser Object Model) : 瀏覽器對(duì)象模型,它是指由瀏覽器提供的一組對(duì)象,用于與瀏覽器窗口進(jìn)行交互。BOM 并不局限于操作文檔本身,而是可以操作瀏覽器的其他功能,如控制瀏覽器窗口、導(dǎo)航歷史、定位 URL 以及瀏覽器相關(guān)的信息等。
2. 區(qū)別
操作對(duì)象:
- DOM 操作的是文檔結(jié)構(gòu),包括元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性等。
- BOM 操作的是瀏覽器窗口及其周邊的功能,如導(dǎo)航、窗口大小、位置等。
標(biāo)準(zhǔn)性:
- DOM 是由 W3C 標(biāo)準(zhǔn)定義的,是跨瀏覽器的一致接口。
- BOM 不是一個(gè)正式的標(biāo)準(zhǔn),各個(gè)瀏覽器的實(shí)現(xiàn)可能有所不同。
常用屬性和方法:
- DOM 常用方法有
getElementById、querySelector、appendChild等,用于訪(fǎng)問(wèn)和操作 HTML 元素。 - BOM 常用對(duì)象有
window、navigator、location、history等,用于與瀏覽器相關(guān)的操作。
- DOM 常用方法有
3. 用處舉例
DOM 的用處示例
- 動(dòng)態(tài)修改頁(yè)面內(nèi)容:
// 獲取元素并修改其文本內(nèi)容和樣式
let header = document.querySelector('.header')
header.textContent = '歡迎來(lái)到我的網(wǎng)站'
header.style.color = 'blue' // 修改文本顏色
header.style.fontSize = '24px' // 修改字體大小
// 修改元素的屬性
let link = document.querySelector('a')
link.setAttribute('href', 'https://www.newlink.com') // 修改鏈接地址
link.setAttribute('target', '_blank') // 在新窗口打開(kāi)鏈接
- 創(chuàng)建和插入新元素:
// 創(chuàng)建新的列表項(xiàng)元素
let newItem = document.createElement('li')
newItem.textContent = '新列表項(xiàng)'
// 將新元素插入到現(xiàn)有的列表中
let list = document.getElementById('myList')
list.appendChild(newItem)
// 在指定位置插入元素
let anotherItem = document.createElement('li')
anotherItem.textContent = '插入的新列表項(xiàng)'
list.insertBefore(anotherItem, list.children[1]) // 在第二個(gè)子元素之前插入
- 監(jiān)聽(tīng)用戶(hù)交互事件:
// 為按鈕添加點(diǎn)擊事件監(jiān)聽(tīng)器
let button = document.getElementById("submitButton");
button.addEventListener("click", function() {
alert("按鈕被點(diǎn)擊了!");
});
BOM 的用處示例
控制瀏覽器窗口:
// 打開(kāi)一個(gè)新的窗口并設(shè)置一些窗口屬性
let newWindow = window.open('https://www.example.com', '_blank', 'width=800,height=600')
// 移動(dòng)窗口到屏幕指定位置
newWindow.moveTo(100, 100)
// 調(diào)整窗口大小
newWindow.resizeTo(500, 500)
// 關(guān)閉窗口
newWindow.close()
瀏覽器信息和導(dǎo)航:
javascript
復(fù)制代碼
// 獲取瀏覽器的用戶(hù)代理字符串
let userAgent = navigator.userAgent;
console.log("用戶(hù)代理信息:", userAgent);
// 檢測(cè)是否為移動(dòng)設(shè)備
if (/Mobi|Android/i.test(userAgent)) {
console.log("這是一個(gè)移動(dòng)設(shè)備");
}
操作 URL 和導(dǎo)航:
javascript
復(fù)制代碼
// 獲取當(dāng)前頁(yè)面的 URL
let currentUrl = window.location.href;
console.log("當(dāng)前 URL:", currentUrl);
// 重定向到新的頁(yè)面
window.location.;
瀏覽器信息和導(dǎo)航:
// 獲取瀏覽器用戶(hù)代理信息
let userAgent = navigator.userAgent
console.log('用戶(hù)代理:', userAgent)
// 檢測(cè)是否為某個(gè)瀏覽器
if (userAgent.indexOf('Chrome') > -1) {
console.log('當(dāng)前瀏覽器是 Chrome')
}
// 獲取當(dāng)前頁(yè)面的 URL 信息
console.log('當(dāng)前 URL:', window.location.href)
console.log('協(xié)議:', window.location.protocol)
console.log('主機(jī)名:', window.location.hostname)
console.log('路徑名:', window.location.pathname)
// 導(dǎo)航到新頁(yè)面
window.location.
// 重載當(dāng)前頁(yè)面
window.location.reload()
// 瀏覽器歷史記錄操作
window.history.back() // 返回上一頁(yè)
window.history.forward() // 前進(jìn)到下一頁(yè)
操作 localStorage 和 sessionStorag
// localStorage 持久存儲(chǔ)數(shù)據(jù)(頁(yè)面關(guān)閉后仍然存在)
localStorage.setItem("username", "JohnDoe");
let username = localStorage.getItem("username");
console.log("用戶(hù)名:", username);
// 移除存儲(chǔ)的數(shù)據(jù)
localStorage.removeItem("username");
// sessionStorage 臨時(shí)存儲(chǔ)數(shù)據(jù)(頁(yè)面關(guān)閉后數(shù)據(jù)消失)
sessionStorage.setItem("sessionID", "123456");
let sessionID = sessionStorage.getItem("sessionID");
console.log("會(huì)話(huà) ID:", sessionID);
// 清除所有 sessionStorage 數(shù)據(jù)
sessionStorage.clear();
定時(shí)器與計(jì)時(shí)器
// 設(shè)置定時(shí)器,每隔一秒執(zhí)行一次
let count = 0;
let intervalID = setInterval(() => {
console.log(`計(jì)時(shí)器執(zhí)行次數(shù): ${count}`);
count++;
if (count === 5) {
clearInterval(intervalID); // 停止定時(shí)器
}
}, 1000);
// 延時(shí)執(zhí)行函數(shù)
setTimeout(() => {
console.log("延時(shí)執(zhí)行的代碼");
}, 2000);
彈出對(duì)話(huà)框
// 提示框
alert("這是一個(gè)提示框!");
// 確認(rèn)框
let confirmResult = confirm("你確定要?jiǎng)h除這條記錄嗎?");
if (confirmResult) {
console.log("用戶(hù)點(diǎn)擊了確認(rèn)");
} else {
console.log("用戶(hù)點(diǎn)擊了取消");
}
// 輸入框
let userInput = prompt("請(qǐng)輸入你的名字:", "匿名");
if (userInput !== null) {
console.log(`你好,${userInput}`);
}
4. 總結(jié)
- DOM 更關(guān)注文檔內(nèi)容的操作,適合用于創(chuàng)建動(dòng)態(tài)內(nèi)容、用戶(hù)交互、表單驗(yàn)證等場(chǎng)景。
- BOM 更側(cè)重于瀏覽器窗口和外部環(huán)境的交互,如頁(yè)面導(dǎo)航、窗口控制和瀏覽器信息獲取等。
在實(shí)際開(kāi)發(fā)中,DOM 和 BOM 往往結(jié)合使用,以實(shí)現(xiàn)更加豐富和復(fù)雜的功能。理解它們的區(qū)別和各自的用處,可以幫助開(kāi)發(fā)者更好地處理頁(yè)面和瀏覽器相關(guān)的任務(wù)。
以上就是JavaScript中DOM和BOM的區(qū)別與用處詳解的詳細(xì)內(nèi)容,更多關(guān)于JavaScript DOM和BOM區(qū)別及用處的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS防抖節(jié)流函數(shù)的實(shí)現(xiàn)與使用場(chǎng)景
在行走江湖的過(guò)程中,會(huì)出現(xiàn)很多性能優(yōu)化的問(wèn)題來(lái)讓你手足無(wú)措,那么這篇文章主要給大家介紹了關(guān)于JS防抖節(jié)流函數(shù)的實(shí)現(xiàn)與使用場(chǎng)景,針對(duì)這兩個(gè)問(wèn)題來(lái)為你答疑解惑,需要的朋友可以參考下2021-07-07
JavaScript利用閉包實(shí)現(xiàn)模塊化
本文主要介紹了JavaScript利用閉包實(shí)現(xiàn)模塊化的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
本文主要介紹了JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序,結(jié)合實(shí)例代碼進(jìn)行了詳細(xì)的講解,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
javascript全局變量封裝模塊實(shí)現(xiàn)代碼
javascript全局變量封裝模塊的應(yīng)用,本文將詳細(xì)介紹,需要了解更多的朋友可以參考下2012-11-11
JS運(yùn)算符優(yōu)先級(jí)與表達(dá)式示例詳解
這篇文章主要給大家介紹了關(guān)于JS運(yùn)算符優(yōu)先級(jí)與表達(dá)式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
JS Array創(chuàng)建及concat()split()slice()的使用方法
下面小編就為大家?guī)?lái)一篇JS Array創(chuàng)建及concat()split()slice()的使用方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
Js得到radiobuttonlist選中值的兩種方法(推薦)
下面小編就為大家?guī)?lái)一篇Js得到radiobuttonlist選中值的兩種方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08

