欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2024年09月23日 14:12:02   作者:歲月寧?kù)o  
這篇文章主要介紹了JavaScript中DOM和BOM的區(qū)別與用處,DOM和BOM是前端開(kāi)發(fā)中常用的兩個(gè)概念,它們分別表示不同的對(duì)象模型,用于操作瀏覽器的不同部分,了解它們的區(qū)別和用處,有助于在前端開(kāi)發(fā)中靈活使用?JavaScript?操作頁(yè)面和瀏覽器,需要的朋友可以參考下

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、navigatorlocation、history 等,用于與瀏覽器相關(guān)的操作。

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

    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)模塊化

    本文主要介紹了JavaScript利用閉包實(shí)現(xiàn)模塊化的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-01-01
  • js調(diào)用刷新界面的幾種方式

    js調(diào)用刷新界面的幾種方式

    這篇文章主要為大家詳細(xì)介紹了js調(diào)用刷新界面的幾種方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序

    淺談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全局變量封裝模塊實(shí)現(xiàn)代碼

    javascript全局變量封裝模塊的應(yīng)用,本文將詳細(xì)介紹,需要了解更多的朋友可以參考下
    2012-11-11
  • JS運(yùn)算符優(yōu)先級(jí)與表達(dá)式示例詳解

    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()的使用方法

    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
  • 詳解JavaScript引擎V8執(zhí)行流程

    詳解JavaScript引擎V8執(zhí)行流程

    本文主要講解的是V8的技術(shù),是V8的入門(mén)篇,主要目的是了解V8的內(nèi)部機(jī)制,希望對(duì)前端,快應(yīng)用,瀏覽器,以及nodejs同學(xué)有些幫助。這里不涉及到如何編寫(xiě)優(yōu)秀的前端,只是對(duì)JS內(nèi)部引擎技術(shù)的講解
    2021-06-06
  • js識(shí)別uc瀏覽器的代碼

    js識(shí)別uc瀏覽器的代碼

    這篇文章主要介紹了js識(shí)別uc瀏覽器的代碼,需要的朋友可以參考下
    2015-11-11
  • Js得到radiobuttonlist選中值的兩種方法(推薦)

    Js得到radiobuttonlist選中值的兩種方法(推薦)

    下面小編就為大家?guī)?lái)一篇Js得到radiobuttonlist選中值的兩種方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-08

最新評(píng)論