JavaScript中Dom模型和Bom模型舉例詳解
更新時(shí)間：2025年06月16日 11:37:43 作者：GH小楊
DOM和BOM是Web開發(fā)中的兩個(gè)重要模型,這篇文章主要給大家介紹了關(guān)于JavaScript中Dom模型和Bom模型的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、Dom 模型和 Bom 模型概述
在 JavaScript 的世界里，Document Object Model（Dom）和 Browser Object Model（Bom）是極為重要的兩個(gè)概念。Dom 模型是針對 HTML 文檔的對象模型，它將整個(gè) HTML 文檔視為一個(gè)由節(jié)點(diǎn)組成的樹狀結(jié)構(gòu)，通過 Dom，我們可以對 HTML 頁面中的元素進(jìn)行訪問、修改、添加和刪除等操作；而 Bom 模型則提供了一系列與瀏覽器窗口 交互的對象，用于控制瀏覽器的窗口、地址欄、歷史記錄等，實(shí)現(xiàn)與瀏覽器環(huán)境相關(guān)的功能。接下來，我們將通過豐富的案例深入學(xué)習(xí)這兩個(gè)模型。
二、Dom 模型詳解
1.獲取 Dom 元素
- 獲取 Dom 元素是操作 Dom 的基礎(chǔ)，我們可以通過多種方式實(shí)現(xiàn)。
獲取方式
- 通過 id 獲取元素
- 通過類名獲取元素
- 通過標(biāo)簽名獲取元素
- 通過name屬性獲取元素
1.1 通過 id 獲取元素
let myDiv = document.getElementById('myDiv');
1.2 通過類名獲取元素
let boxes = document.getElementsByClassName('box');
1.3 通過標(biāo)簽名獲取元素
let paragraphs = document.getElementsByTagName('p');
1.4 通過name屬性獲取元素
let stus = document.getElementsByName('stu');
2.通過Dom對象操作屬性aa
//1.先獲取Dom對象
let p1 = document.getElementById("p1");
let img = document.getElementById("img");
let name = document.getElementById("name")
let aa = document.getElementById("aa");
let name1 = document.getElementById("name1");
let hobby1 = document.getElementById("hobby1");
let hobby2 = document.getElementById("hobby2");
let hobby3 = document.getElementById("hobby3");
// 直接修改樣式屬性
p1.style.fontSize = "20px";
p1.style.padding = "15px";
p1.style.borderRadius = "8px";
p1.style.display = "block" // block顯示 none 隱藏
// 更換圖片
img.src = "https://picsum.photos/seed/b/300/200";
img.alt = "新的示例圖片";
// 調(diào)整尺寸
img.style.width = "250px";
img.style.height = "180px";
img.style.objectFit = "cover";
// 添加額外屬性
aa.setAttribute("title", "點(diǎn)擊訪問百度網(wǎng)站");
aa.classList.add("underline");
// 禁用/啟用輸入框
name1.disabled = true; // 禁用
name1.disabled = false; // 啟用
name1.removeAttribute("disabled") //移除屬性
// 修改輸入框值
name1.value = "李四";
// 操作復(fù)選框
hobby1.checked = true;
hobby2.checked = true;
hobby3.checked = true;
3. 通過Dom對象操作內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通過Dom對象操作內(nèi)容</title>
</head>
<body>
<div id="p">hello world <span>你好</span></div>
<select name="city" id="city1">
<option value="chengdu">成都</option>
<option value="jinan">濟(jì)南</option>
</select>
<input id="name" name="user" value="zhangsan" type="text">
</body>
<script>
//1.獲取元素
var p = document.getElementById("p")
var name = document.getElementById("name")
var city1 = document.getElementById("city1")
//2.標(biāo)簽內(nèi)容操作
// 2.1元素內(nèi)容獲取、修改
// p.innerText = "java編程"
// 2.2元素內(nèi)html內(nèi)容獲取、修改
// p1.innerHTML = "<span style='color:red;'>jerry666</span>"
// alert(p1.innerHTML)
// 3.表單元素內(nèi)容獲取、修改
//3.1輸入框
name1.value = "張三"
// 3.2下拉選項(xiàng)卡內(nèi)容
// alert(city1.value)
</script>
</html>
4遍歷Dom對象數(shù)組
使用 for 循環(huán)
let elements = document.getElementsByClassName('box');
// 標(biāo)準(zhǔn) for 循環(huán)
for (let i = 0; i < elements.length; i++) {
elements[i].style.color = 'red';
}
5.其他獲取Dom對象的方法
document.documentElement- 獲取HTML根元素document.documentElement屬性返回文檔的根元素（HTML文檔中的<html>元素）。這是訪問文檔最頂層元素的最直接方式。document.body- 獲取BODY元素document.body屬性返回文檔的<body>元素。這是訪問文檔主體內(nèi)容的最便捷方式document.querySelector()- 通過選擇器獲取單個(gè)元素querySelector()方法返回文檔中匹配指定CSS選擇器的第一個(gè)元素。如果沒有找到匹配項(xiàng)，則返回null。document.querySelectorAll()- 通過選擇器獲取元素集合querySelectorAll()方法返回文檔中匹配指定CSS選擇器的所有元素的NodeList（節(jié)點(diǎn)列表）。如果沒有找到匹配項(xiàng)，則返回空的NodeList。
三、Bom模型詳解
1.概述
- 定義：BOM（Browser Object Model）是 JavaScript 操作瀏覽器的接口，提供了一系列對象用于控制瀏覽器窗口、地址欄、歷史記錄等。
- 核心對象：
window（瀏覽器窗口）、location（地址欄）、history（歷史記錄）。
2.window對象：瀏覽器窗口控制
2.1 作用
- 代表瀏覽器窗口，是 BOM 的頂層對象（
document對象是其子對象）。 - 可操作瀏覽器窗口的尺寸、彈出框、定時(shí)器等。
2.2 常用屬性與方法
- 警告框：
alert(message)
window.alert("這是一個(gè)警告框！"); // 可省略window.
- 確認(rèn)框：
confirm(message)（返回true/false）
const isConfirmed = confirm("是否確認(rèn)刪除？");
if (isConfirmed) {
console.log("用戶點(diǎn)擊了確定");
} else {
console.log("用戶點(diǎn)擊了取消");
}
- 提示框：
prompt(message, defaultText)（返回用戶輸入值或null）
const name = prompt("請輸入姓名", "匿名");
if (name !== null) {
console.log("你輸入的是：" + name);
}
- 一次性定時(shí)器：
setTimeout(callback, delay)
// 3秒后彈出提示
setTimeout(() => {
alert("定時(shí)器觸發(fā)！");
}, 3000);
- 循環(huán)定時(shí)器：
setInterval(callback, delay)
let recount = function(){
console.log('3秒倒計(jì)時(shí)...');
}
setInterval(recount,3000);
3.location對象：地址欄操作
3.1作用
- 用于獲取和修改當(dāng)前頁面的 URL 地址，控制頁面跳轉(zhuǎn)。
3.2 常用方法
assign(url)：跳轉(zhuǎn)到指定 URL（會記錄歷史記錄）
location.assign("https://www.jd.com");replace(url)：替換當(dāng)前頁面（不記錄歷史記錄，無法回退）
location.replace("https://www.taobao.com");reload([force])：重新加載當(dāng)前頁面（
force=true強(qiáng)制從服務(wù)器刷新）location.reload(); // 普通刷新 location.reload(true); // 強(qiáng)制刷新
4.history對象：歷史記錄管理
4.1 作用
- 操作瀏覽器的歷史記錄（前進(jìn)、后退、跳轉(zhuǎn)指定頁面）。
4.2 常用方法
| 方法 | 說明 | 代碼示例 |
|---|---|---|
back() | 后退到上一個(gè)頁面（等價(jià)于瀏覽器左上角←按鈕） | history.back(); |
forward() | 前進(jìn)到下一個(gè)頁面（等價(jià)于瀏覽器→按鈕） | history.forward(); |
go(n) | 跳轉(zhuǎn)指定步數(shù)： n=1前進(jìn) 1 步，n=-1后退 1 步，n=0刷新當(dāng)前頁 | history.go(-2);（后退 2 步） |
案例：
- 需求：實(shí)現(xiàn)五秒后跳轉(zhuǎn)的操作
html代碼
<div style="font-size: 25px;"><span id = "time">5</span>秒鐘后跳轉(zhuǎn)...</div>
javaScript代碼
// 獲取元素對象
let time = document.getElementById("time")
//定義一個(gè)變量，記住文章數(shù)據(jù)，從而進(jìn)行計(jì)時(shí)的效果
let num = 5
let closeInter = setInterval(function (){
time.innerText = num
num--
// 進(jìn)行判斷
if(num < 0 ){
clearInterval(closeInter)
}
},1000)總結(jié)
到此這篇關(guān)于JavaScript中Dom模型和Bom模型的文章就介紹到這了,更多相關(guān)JS Dom模型和Bom模型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js簡單的點(diǎn)擊返回頂部效果實(shí)現(xiàn)方法
這篇文章主要介紹了js簡單的點(diǎn)擊返回頂部效果實(shí)現(xiàn)方法,實(shí)例分析了實(shí)現(xiàn)返回頂部效果的相關(guān)要點(diǎn)與實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-04-04
javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
javascript 控制 html元素 顯示/隱藏，下面是一些逐步的實(shí)現(xiàn)原理。2009-09-09
JavaScript?canvas繪制動態(tài)圓環(huán)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas繪制動態(tài)圓環(huán)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
javascript 程序庫的比較（一）之DOM功能2010-04-04
給應(yīng)用部分的js代碼設(shè)定一個(gè)統(tǒng)一的入口
javascript是種腳本語言，瀏覽器下載到哪兒就會執(zhí)行到哪兒，下面為大家介紹下，如何給應(yīng)用部分的js代碼一個(gè)統(tǒng)一的入口2014-06-06
SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架。本文給大家分享sea.js知識總結(jié)，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)簡單放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript使用cookie實(shí)現(xiàn)記住賬號密碼功能
這篇文章主要介紹了JavaScript使用cookie實(shí)現(xiàn)記住賬號密碼功能,本文直接給出完整測試代碼,需要的朋友可以參考下2015-04-04
從零使用TypeScript開發(fā)項(xiàng)目打包發(fā)布到npm
這篇文章主要介紹了從零使用TypeScript開發(fā)項(xiàng)目打包發(fā)布到npm，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
uniapp手機(jī)號一鍵登錄實(shí)現(xiàn)保姆級教程(含前端和后端)
這篇文章主要介紹了uniapp手機(jī)號一鍵登錄實(shí)現(xiàn)的相關(guān)資料,本文指導(dǎo)如何創(chuàng)建uniapp項(xiàng)目、關(guān)聯(lián)uniCloud云空間,并配置一鍵登錄功能,,整個(gè)過程涉及創(chuàng)建云開發(fā)環(huán)境、關(guān)聯(lián)云服務(wù)空間、配置登錄服務(wù)和編寫云函數(shù),需要的朋友可以參考下2024-10-10