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)地訪問(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
等,用于訪問(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)用戶交互事件:
// 為按鈕添加點(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ù)制代碼 // 獲取瀏覽器的用戶代理字符串 let userAgent = navigator.userAgent; console.log("用戶代理信息:", 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)航:
// 獲取瀏覽器用戶代理信息 let userAgent = navigator.userAgent console.log('用戶代理:', 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("用戶名:", 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ì)話 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ì)話框
// 提示框 alert("這是一個(gè)提示框!"); // 確認(rèn)框 let confirmResult = confirm("你確定要?jiǎng)h除這條記錄嗎?"); if (confirmResult) { console.log("用戶點(diǎn)擊了確認(rèn)"); } else { console.log("用戶點(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)容、用戶交互、表單驗(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-07JavaScript利用閉包實(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-06javascript全局變量封裝模塊實(shí)現(xiàn)代碼
javascript全局變量封裝模塊的應(yīng)用,本文將詳細(xì)介紹,需要了解更多的朋友可以參考下2012-11-11JS運(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-09JS 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-06Js得到radiobuttonlist選中值的兩種方法(推薦)
下面小編就為大家?guī)?lái)一篇Js得到radiobuttonlist選中值的兩種方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08