JavaScript數(shù)組、函數(shù)、DOM 與 BOM 實戰(zhàn)全解析
更新時間：2026年01月15日 09:03:51 作者：一天 24h
文章總結(jié)了JavaScript中數(shù)組、函數(shù)、DOM和BOM的基本概念和操作方法,包括數(shù)組的創(chuàng)建和操作、函數(shù)的聲明與調(diào)用、DOM元素的獲取和操作、BOM對象的使用以及一些實戰(zhàn)案例,感興趣的朋友跟隨小編一起看看吧
一、數(shù)組：高效管理數(shù)據(jù)集合
（一）數(shù)組的創(chuàng)建
- 字面量方式（推薦）：
var arr = ['小白', 12, true];，可存放任意類型數(shù)據(jù)； - new 關(guān)鍵字方式：
var arr = new Array();（創(chuàng)建空數(shù)組）。
（二）核心操作
- 獲取元素：通過索引（從 0 開始），
arr[0]獲取第一個元素，索引越界返回 undefined； - 遍歷數(shù)組：結(jié)合
arr.length（數(shù)組長度）用 for 循環(huán)遍歷：
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
- 新增元素：
arr[arr.length] = 新元素（在數(shù)組末尾添加）； - 修改長度：
arr.length = 新長度，超過原長度補空白元素，不足則刪除多余元素。
二、函數(shù)：封裝可復(fù)用代碼塊
（一）函數(shù)的聲明與調(diào)用
- 命名函數(shù)：
function 函數(shù)名(形參1, 形參2) {
// 函數(shù)體
}
函數(shù)名(實參1, 實參2); // 調(diào)用
- 匿名函數(shù)（函數(shù)表達(dá)式）：
var 函數(shù)名 = function() {
// 函數(shù)體
};
函數(shù)名(); // 調(diào)用需在聲明后
（二）核心特性
- 參數(shù)：形參默認(rèn)值為 undefined，實參個數(shù)可與形參不一致（多則忽略，少則多余形參為 undefined）；
- 返回值：用
return返回結(jié)果，執(zhí)行 return 后函數(shù)停止運行，無 return 則返回 undefined； - arguments：內(nèi)置對象，存儲所有實參，偽數(shù)組形式（有 length、索引，無數(shù)組方法）；
- 作用域：ES6 前分為全局作用域（script 或獨立 JS 文件）和局部作用域（函數(shù)內(nèi)），變量分為全局變量（瀏覽器關(guān)閉時銷毀）和局部變量（函數(shù)執(zhí)行完銷毀）。
三、DOM 操作：操控網(wǎng)頁元素
（一）獲取頁面元素
document.getElementById(id)：根據(jù) ID 獲取單個元素；document.getElementsByTagName(標(biāo)簽名)：根據(jù)標(biāo)簽名獲取偽數(shù)組；- H5 新增：
getElementsByClassName(類名)、querySelector(選擇器)（返回第一個匹配元素）、querySelectorAll(選擇器)（返回所有匹配元素）； - 特殊元素：
document.body（body 元素）、document.documentElement（html 元素）。
（二）事件處理機(jī)制
- 事件三要素：事件源（觸發(fā)元素）、事件類型（如 click、mouseover）、事件處理程序（函數(shù)）；
- 常用鼠標(biāo)事件：onclick（點擊）、onmouseout（鼠標(biāo)離開）、onfocus（獲得焦點）、onblur（失去焦點）；
- 執(zhí)行流程：獲取事件源→綁定事件→編寫處理程序。
（三）操作元素內(nèi)容與樣式
- 修改內(nèi)容：
innerText：去除 HTML 標(biāo)簽和空格；innerHTML：保留 HTML 標(biāo)簽和空格，支持解析 HTML；
- 屬性操作：修改 src、href、id、alt 等，如
img.src = "new.jpg"； - 表單屬性：disabled（禁用）、checked（選中）、selected（選中），值為布爾型；
- 樣式操作：
- 行內(nèi)樣式：
element.style.fontSize = "16px"（駝峰命名）； - 類名樣式：
element.className = "新類名"（適合多樣式修改，會覆蓋原有類名）。
- 行內(nèi)樣式：
四、BOM 操作：控制瀏覽器行為
（一）核心對象 window
瀏覽器頂級對象，全局變量和函數(shù)自動成為其屬性和方法，可省略 window 前綴（如alert()等價于window.alert()）。
（二）常用功能
- 頁面加載事件：
window.onload：頁面完全加載（含圖片、CSS）后觸發(fā)，可將 JS 代碼寫在頁面上方；DOMContentLoaded：DOM 加載完成即觸發(fā)（不含圖片），加載速度更快，IE9 + 支持。
- 定時器：
setTimeout(回調(diào)函數(shù), 延遲毫秒數(shù))：延遲執(zhí)行一次（炸彈定時器），案例：5 秒后關(guān)閉廣告；setInterval(回調(diào)函數(shù), 間隔毫秒數(shù))：重復(fù)執(zhí)行（鬧鐘定時器），案例：倒計時、短信驗證碼倒計時；- 停止定時器：
clearTimeout(定時器標(biāo)識)、clearInterval(定時器標(biāo)識)。
- 窗口操作：
window.onresize：窗口大小改變時觸發(fā)，可實現(xiàn)響應(yīng)式布局；window.innerWidth：獲取窗口寬度。
- this 指向：
- 全局 / 普通函數(shù)：指向 window；
- 事件處理函數(shù)：指向觸發(fā)事件的元素；
- 構(gòu)造函數(shù)：指向?qū)嵗龑ο蟆?/li>
五、實戰(zhàn)案例參考
1、倒計時功能：用 setInterval 實現(xiàn)秒數(shù)遞減，通過 innerHTML 更新頁面：
核心邏輯：
- 用總秒數(shù)計算時、分、秒，避免處理時間進(jìn)制問題；
- 封裝函數(shù)實現(xiàn)邏輯復(fù)用，初始調(diào)用一次防止頁面空白；
- 不足 10 的數(shù)字補零，保證顯示美觀；
- 秒數(shù)為 0 時停止定時器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時案例</title>
<style>
.countdown {
display: flex;
gap: 10px;
font-size: 24px;
color: #fff;
}
.countdown div {
width: 40px;
height: 40px;
background: #000;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="countdown">
<div class="hour">01</div>
<div class="minute">20</div>
<div class="second">39</div>
</div>
<script>
// 1. 獲取元素
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
// 總秒數(shù)（示例：1小時20分39秒 = 1*3600 + 20*60 + 39 = 4839秒）
var totalSeconds = 4839;
// 2. 封裝更新倒計時函數(shù)
function updateCountdown() {
if (totalSeconds <= 0) {
clearInterval(timer); // 秒數(shù)為0時停止定時器
return;
}
// 計算時、分、秒
var h = Math.floor(totalSeconds / 3600);
var m = Math.floor((totalSeconds % 3600) / 60);
var s = totalSeconds % 60;
// 補零（確保顯示兩位數(shù)）
hour.innerHTML = h < 10 ? '0' + h : h;
minute.innerHTML = m < 10 ? '0' + m : m;
second.innerHTML = s < 10 ? '0' + s : s;
// 總秒數(shù)遞減
totalSeconds--;
}
// 3. 先調(diào)用一次函數(shù)，避免初始空白
updateCountdown();
// 4. 開啟定時器，每秒更新一次
var timer = setInterval(updateCountdown, 1000);
</script>
</body>
</html>2、短信驗證碼倒計時：點擊按鈕后禁用，60 秒后恢復(fù)初始狀態(tài)：
核心邏輯：
- 用
disabled屬性禁用按鈕，防止重復(fù)發(fā)送； - 定時器每秒遞減倒計時數(shù)字，更新按鈕文本；
- 倒計時結(jié)束后清除定時器，恢復(fù)按鈕初始狀態(tài)；
- 添加
isSending標(biāo)志，避免快速點擊導(dǎo)致多個定時器沖突。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>短信驗證碼倒計時</title>
</head>
<body>
<button class="code-btn">發(fā)送驗證碼</button>
<script>
// 1. 獲取按鈕元素
var codeBtn = document.querySelector('.code-btn');
var isSending = false; // 防止重復(fù)點擊
// 2. 綁定點擊事件
codeBtn.addEventListener('click', function() {
if (isSending) return; // 正在發(fā)送時阻止重復(fù)點擊
isSending = true;
var count = 60;
// 禁用按鈕并修改文本
codeBtn.disabled = true;
codeBtn.innerHTML = `重新發(fā)送(${count}s)`;
// 3. 開啟定時器
var timer = setInterval(function() {
count--;
codeBtn.innerHTML = `重新發(fā)送(${count}s)`;
// 倒計時結(jié)束，恢復(fù)按鈕狀態(tài)
if (count <= 0) {
clearInterval(timer);
codeBtn.disabled = false;
codeBtn.innerHTML = '發(fā)送驗證碼';
isSending = false;
}
}, 1000);
});
</script>
</body>
</html>3、密碼框顯示隱藏：切換 input 的 type 屬性（password/text）：
核心邏輯：
- 通過切換
input的type屬性（password/text）實現(xiàn)顯示隱藏； - 用
isShow變量標(biāo)記當(dāng)前狀態(tài)，點擊時取反； - 同步修改眼睛圖標(biāo)，提升用戶體驗。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密碼顯示隱藏</title>
<style>
.password-box {
position: relative;
width: 300px;
}
#password {
width: 100%;
height: 40px;
padding-right: 40px;
box-sizing: border-box;
}
.eye-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
</style>
</head>
<body>
<div class="password-box">
<input type="password" id="password" placeholder="請輸入密碼">
<span class="eye-icon">???</span>
</div>
<script>
// 1. 獲取元素
var passwordInput = document.getElementById('password');
var eyeIcon = document.querySelector('.eye-icon');
var isShow = false; // 標(biāo)記是否顯示密碼
// 2. 綁定點擊事件
eyeIcon.addEventListener('click', function() {
isShow = !isShow;
// 切換input的type屬性
if (isShow) {
passwordInput.type = 'text'; // 顯示密碼
eyeIcon.innerHTML = '??';
} else {
passwordInput.type = 'password'; // 隱藏密碼
eyeIcon.innerHTML = '???';
}
});
</script>
</body>
</html>4、分時問候：根據(jù)系統(tǒng)時間修改頁面圖片和問候語：
核心邏輯：
- 用
new Date()獲取當(dāng)前時間，getHours()獲取小時數(shù)； - 多分支判斷小時區(qū)間，對應(yīng)不同問候語和背景圖；
- 通過
style.backgroundImage修改頁面背景，innerHTML修改問候語。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分時問候</title>
<style>
body {
height: 100vh;
margin: 0;
background-size: cover;
background-position: center;
color: #fff;
font-size: 36px;
text-align: center;
line-height: 100vh;
}
</style>
</head>
<body>
<div class="greeting"></div>
<script>
// 1. 獲取元素
var greeting = document.querySelector('.greeting');
// 2. 獲取當(dāng)前小時（0-23）
var now = new Date();
var hour = now.getHours();
// 3. 根據(jù)小時判斷問候語和背景圖
if (hour >= 6 && hour < 12) {
// 上午
greeting.innerHTML = '上午好！';
document.body.style.backgroundImage = 'url("morning.jpg")'; // 替換為實際圖片路徑
} else if (hour >= 12 && hour < 18) {
// 下午
greeting.innerHTML = '下午好！';
document.body.style.backgroundImage = 'url("afternoon.jpg")';
} else if (hour >= 18 && hour < 24) {
// 晚上
greeting.innerHTML = '晚上好！';
document.body.style.backgroundImage = 'url("evening.jpg")';
} else {
// 凌晨
greeting.innerHTML = '夜深了，注意休息～';
document.body.style.backgroundImage = 'url("night.jpg")';
}
</script>
</body>
</html>六、結(jié)語
數(shù)組、函數(shù)、DOM 與 BOM 是 JavaScript 實現(xiàn)網(wǎng)頁交互與功能拓展的核心支柱，也是從 “會寫基礎(chǔ)代碼” 到 “能做實戰(zhàn)項目” 的關(guān)鍵跨越。數(shù)組讓數(shù)據(jù)管理更高效，函數(shù)讓代碼實現(xiàn)復(fù)用與封裝，DOM 賦予你操控頁面元素的能力，BOM 則打通了與瀏覽器交互的通道 —— 這四大模塊的組合，幾乎能滿足前端開發(fā)中 80% 以上的基礎(chǔ)交互需求。
實戰(zhàn)是掌握這些知識的最佳途徑。文中的案例（如倒計時、密碼顯示隱藏、分時問候）都是實際開發(fā)中高頻出現(xiàn)的場景，核心邏輯可遷移到更多復(fù)雜功能中。學(xué)習(xí)時，建議先理解案例的實現(xiàn)思路，再嘗試獨立編寫，遇到問題時通過控制臺調(diào)試、查看元素狀態(tài)，逐步培養(yǎng) “拆解需求→選擇技術(shù)→編寫代碼→優(yōu)化細(xì)節(jié)” 的編程思維。
需要注意的是，前端技術(shù)一直在迭代，ES6 及后續(xù)版本對數(shù)組、函數(shù)、作用域等有更便捷的語法支持（如箭頭函數(shù)、let/const、數(shù)組方法），但本文講解的核心原理與實戰(zhàn)邏輯是不變的基礎(chǔ)。掌握這些內(nèi)容后，你可以進(jìn)一步學(xué)習(xí)框架、模塊化開發(fā)等進(jìn)階知識，也能更輕松地理解新語法的設(shè)計初衷。
到此這篇關(guān)于JavaScript 進(jìn)階實戰(zhàn)：數(shù)組、函數(shù)、DOM 與 BOM 全解析的文章就介紹到這了,更多相關(guān)js 數(shù)組 函數(shù) dom與bom內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- js數(shù)組高階函數(shù)includes()方法使用示例
- JavaScript數(shù)組some()函數(shù)的語法、用法與實戰(zhàn)示例
- JavaScript數(shù)組操作學(xué)習(xí)之splice()函數(shù)入門與精通
- JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)groupBy函數(shù)詳解
- JavaScript中處理數(shù)組,對象和正則的實用函數(shù)
- js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
- JavaScript原生數(shù)組函數(shù)實例匯總
- JavaScript中DOM和BOM的區(qū)別與用處詳解
- JavaScript中DOM和BOM原理詳析
- JavaScript中BOM,DOM和事件的用法詳解
相關(guān)文章
Three.js中如何使用CSS3DRenderer和CSS3DSprite實現(xiàn)模型標(biāo)簽文字
在Three.js中,使用CSS3DRenderer和CSS3DSprite可以輕松地實現(xiàn)模型標(biāo)簽文字的效果,為場景中的模型提供更直觀的信息展示,本文將介紹如何使用這兩個工具來實現(xiàn)模型標(biāo)簽文字,并提供相應(yīng)的代碼示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
在全局執(zhí)行環(huán)境中使用this，標(biāo)識Global對象，在瀏覽器中就是window對象。2010-03-03
本文主要介紹了JS模擬百度搜索框和選項卡的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
這篇文章主要介紹了探究一道價值25k的螞蟻金服異步串行面試題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了JavaScript中獲取時間的函數(shù)集，通過實例代碼給大家講解，非常詳細(xì)，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
這篇文章主要介紹了深入淺析JSONAPI在PHP中的應(yīng)用,需要的朋友可以參考下2017-12-12
JS使用parseInt解析數(shù)字實現(xiàn)求和的方法
這篇文章主要介紹了JS使用parseInt解析數(shù)字實現(xiàn)求和的方法,涉及javascript表單元素值的獲取及parseInt解析轉(zhuǎn)換字符串為數(shù)字的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了功能強大的Bootstrap使用手冊，分享了Bootstrap使用步驟和常用用法，感興趣的小伙伴們可以參考一下2016-08-08
首先要感謝 EtherDream 的不同觀點，在 巧用cssText屬性批量操作樣式 一篇中由于他的質(zhì)疑態(tài)度使我做了進(jìn)一步的測試。2011-03-03
這篇文章主要幫助大家輕松掌握J(rèn)avaScript中介者模式，告訴大家什么是js中介者模式？js中介者模式的作用是什么，感興趣的小伙伴們可以參考一下2016-08-08