JavaScript中DOM和BOM的區(qū)別與用處詳解

更新時間：2024年09月23日 14:12:02 作者：歲月寧靜

這篇文章主要介紹了JavaScript中DOM和BOM的區(qū)別與用處,DOM和BOM是前端開發(fā)中常用的兩個概念,它們分別表示不同的對象模型,用于操作瀏覽器的不同部分,了解它們的區(qū)別和用處,有助于在前端開發(fā)中靈活使用?JavaScript?操作頁面和瀏覽器,需要的朋友可以參考下

1. 概念與定義

DOM (Document Object Model) : 文檔對象模型，它是一種標(biāo)準(zhǔn)的編程接口，表示 HTML 或 XML 文檔的結(jié)構(gòu)，使得開發(fā)者可以通過 JavaScript 動態(tài)地訪問和操作文檔的內(nèi)容、結(jié)構(gòu)和樣式。DOM 將文檔表示為節(jié)點樹，其中每個節(jié)點都表示文檔的一部分，如元素、屬性、文本等。
BOM (Browser Object Model) : 瀏覽器對象模型，它是指由瀏覽器提供的一組對象，用于與瀏覽器窗口進(jìn)行交互。BOM 并不局限于操作文檔本身，而是可以操作瀏覽器的其他功能，如控制瀏覽器窗口、導(dǎo)航歷史、定位 URL 以及瀏覽器相關(guān)的信息等。

2. 區(qū)別

操作對象:
- DOM 操作的是文檔結(jié)構(gòu)，包括元素節(jié)點、文本節(jié)點、屬性等。
- BOM 操作的是瀏覽器窗口及其周邊的功能，如導(dǎo)航、窗口大小、位置等。
標(biāo)準(zhǔn)性:
- DOM 是由 W3C 標(biāo)準(zhǔn)定義的，是跨瀏覽器的一致接口。
- BOM 不是一個正式的標(biāo)準(zhǔn)，各個瀏覽器的實現(xiàn)可能有所不同。
常用屬性和方法:
- DOM 常用方法有 getElementById、querySelector、appendChild 等，用于訪問和操作 HTML 元素。
- BOM 常用對象有 window、navigator、location、history 等，用于與瀏覽器相關(guān)的操作。

3. 用處舉例

DOM 的用處示例

動態(tài)修改頁面內(nèi)容：

 // 獲取元素并修改其文本內(nèi)容和樣式
    let header = document.querySelector('.header')
    header.textContent = '歡迎來到我的網(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') // 在新窗口打開鏈接

創(chuàng)建和插入新元素：

  // 創(chuàng)建新的列表項元素
    let newItem = document.createElement('li')
    newItem.textContent = '新列表項'

    // 將新元素插入到現(xiàn)有的列表中
    let list = document.getElementById('myList')
    list.appendChild(newItem)

    // 在指定位置插入元素
    let anotherItem = document.createElement('li')
    anotherItem.textContent = '插入的新列表項'
    list.insertBefore(anotherItem, list.children[1]) // 在第二個子元素之前插入

監(jiān)聽用戶交互事件：

// 為按鈕添加點擊事件監(jiān)聽器
let button = document.getElementById("submitButton");
button.addEventListener("click", function() {
    alert("按鈕被點擊了！");
});

BOM 的用處示例

控制瀏覽器窗口：

  // 打開一個新的窗口并設(shè)置一些窗口屬性
    let newWindow = window.open('https://www.example.com', '_blank', 'width=800,height=600')

    // 移動窗口到屏幕指定位置
    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);

// 檢測是否為移動設(shè)備
if (/Mobi|Android/i.test(userAgent)) {
    console.log("這是一個移動設(shè)備");
}

操作 URL 和導(dǎo)航：

javascript
復(fù)制代碼
// 獲取當(dāng)前頁面的 URL
let currentUrl = window.location.href;
console.log("當(dāng)前 URL:", currentUrl);

// 重定向到新的頁面
window.location.;

瀏覽器信息和導(dǎo)航：

 // 獲取瀏覽器用戶代理信息
    let userAgent = navigator.userAgent
    console.log('用戶代理:', userAgent)

    // 檢測是否為某個瀏覽器
    if (userAgent.indexOf('Chrome') > -1) {
        console.log('當(dāng)前瀏覽器是 Chrome')
    }

    // 獲取當(dāng)前頁面的 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)航到新頁面
    window.location.

    // 重載當(dāng)前頁面
    window.location.reload()

    // 瀏覽器歷史記錄操作
    window.history.back() // 返回上一頁
    window.history.forward() // 前進(jìn)到下一頁

操作 localStorage 和 sessionStorag

// localStorage 持久存儲數(shù)據(jù)（頁面關(guān)閉后仍然存在）
localStorage.setItem("username", "JohnDoe");
let username = localStorage.getItem("username");
console.log("用戶名:", username);

// 移除存儲的數(shù)據(jù)
localStorage.removeItem("username");

// sessionStorage 臨時存儲數(shù)據(jù)（頁面關(guān)閉后數(shù)據(jù)消失）
sessionStorage.setItem("sessionID", "123456");
let sessionID = sessionStorage.getItem("sessionID");
console.log("會話 ID:", sessionID);

// 清除所有 sessionStorage 數(shù)據(jù)
sessionStorage.clear();

定時器與計時器

// 設(shè)置定時器，每隔一秒執(zhí)行一次
let count = 0;
let intervalID = setInterval(() => {
    console.log(`計時器執(zhí)行次數(shù): ${count}`);
    count++;
    if (count === 5) {
        clearInterval(intervalID); // 停止定時器
    }
}, 1000);

// 延時執(zhí)行函數(shù)
setTimeout(() => {
    console.log("延時執(zhí)行的代碼");
}, 2000);

彈出對話框

// 提示框
alert("這是一個提示框！");

// 確認(rèn)框
let confirmResult = confirm("你確定要刪除這條記錄嗎？");
if (confirmResult) {
    console.log("用戶點擊了確認(rèn)");
} else {
    console.log("用戶點擊了取消");
}

// 輸入框
let userInput = prompt("請輸入你的名字:", "匿名");
if (userInput !== null) {
    console.log(`你好，${userInput}`);
}