JavaScript數(shù)組、函數(shù)、DOM 與 BOM 實(shí)戰(zhàn)全解析
更新時間：2026年01月15日 09:03:51 作者：一天 24h
文章總結(jié)了JavaScript中數(shù)組、函數(shù)、DOM和BOM的基本概念和操作方法,包括數(shù)組的創(chuàng)建和操作、函數(shù)的聲明與調(diào)用、DOM元素的獲取和操作、BOM對象的使用以及一些實(shí)戰(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 = 新長度，超過原長度補(bǔ)空白元素，不足則刪除多余元素。
二、函數(shù)：封裝可復(fù)用代碼塊
（一）函數(shù)的聲明與調(diào)用
- 命名函數(shù)：
function 函數(shù)名(形參1, 形參2) {
// 函數(shù)體
}
函數(shù)名(實(shí)參1, 實(shí)參2); // 調(diào)用
- 匿名函數(shù)（函數(shù)表達(dá)式）：
var 函數(shù)名 = function() {
// 函數(shù)體
};
函數(shù)名(); // 調(diào)用需在聲明后
（二）核心特性
- 參數(shù)：形參默認(rèn)值為 undefined，實(shí)參個數(shù)可與形參不一致（多則忽略，少則多余形參為 undefined）；
- 返回值：用
return返回結(jié)果，執(zhí)行 return 后函數(shù)停止運(yùn)行，無 return 則返回 undefined； - arguments：內(nèi)置對象，存儲所有實(shí)參，偽數(shù)組形式（有 length、索引，無數(shù)組方法）；
- 作用域：ES6 前分為全局作用域（script 或獨(dú)立 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（點(diǎn)擊）、onmouseout（鼠標(biāo)離開）、onfocus（獲得焦點(diǎn)）、onblur（失去焦點(diǎn)）；
- 執(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()等價(jià)于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í)行（鬧鐘定時器），案例：倒計(jì)時、短信驗(yàn)證碼倒計(jì)時；- 停止定時器：
clearTimeout(定時器標(biāo)識)、clearInterval(定時器標(biāo)識)。
- 窗口操作：
window.onresize：窗口大小改變時觸發(fā)，可實(shí)現(xiàn)響應(yīng)式布局；window.innerWidth：獲取窗口寬度。
- this 指向：
- 全局 / 普通函數(shù)：指向 window；
- 事件處理函數(shù)：指向觸發(fā)事件的元素；
- 構(gòu)造函數(shù)：指向?qū)嵗龑ο蟆?/li>
五、實(shí)戰(zhàn)案例參考
1、倒計(jì)時功能：用 setInterval 實(shí)現(xiàn)秒數(shù)遞減，通過 innerHTML 更新頁面：
核心邏輯：
- 用總秒數(shù)計(jì)算時、分、秒，避免處理時間進(jìn)制問題；
- 封裝函數(shù)實(shí)現(xiàn)邏輯復(fù)用，初始調(diào)用一次防止頁面空白；
- 不足 10 的數(shù)字補(bǔ)零，保證顯示美觀；
- 秒數(shù)為 0 時停止定時器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計(jì)時案例</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. 封裝更新倒計(jì)時函數(shù)
function updateCountdown() {
if (totalSeconds <= 0) {
clearInterval(timer); // 秒數(shù)為0時停止定時器
return;
}
// 計(jì)算時、分、秒
var h = Math.floor(totalSeconds / 3600);
var m = Math.floor((totalSeconds % 3600) / 60);
var s = totalSeconds % 60;
// 補(bǔ)零（確保顯示兩位數(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、短信驗(yàn)證碼倒計(jì)時：點(diǎn)擊按鈕后禁用，60 秒后恢復(fù)初始狀態(tài)：
核心邏輯：
- 用
disabled屬性禁用按鈕，防止重復(fù)發(fā)送； - 定時器每秒遞減倒計(jì)時數(shù)字，更新按鈕文本；
- 倒計(jì)時結(jié)束后清除定時器，恢復(fù)按鈕初始狀態(tài)；
- 添加
isSending標(biāo)志，避免快速點(diǎn)擊導(dǎo)致多個定時器沖突。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>短信驗(yàn)證碼倒計(jì)時</title>
</head>
<body>
<button class="code-btn">發(fā)送驗(yàn)證碼</button>
<script>
// 1. 獲取按鈕元素
var codeBtn = document.querySelector('.code-btn');
var isSending = false; // 防止重復(fù)點(diǎn)擊
// 2. 綁定點(diǎn)擊事件
codeBtn.addEventListener('click', function() {
if (isSending) return; // 正在發(fā)送時阻止重復(fù)點(diǎn)擊
isSending = true;
var count = 60;
// 禁用按鈕并修改文本
codeBtn.disabled = true;
codeBtn.innerHTML = `重新發(fā)送(${count}s)`;
// 3. 開啟定時器
var timer = setInterval(function() {
count--;
codeBtn.innerHTML = `重新發(fā)送(${count}s)`;
// 倒計(jì)時結(jié)束，恢復(fù)按鈕狀態(tài)
if (count <= 0) {
clearInterval(timer);
codeBtn.disabled = false;
codeBtn.innerHTML = '發(fā)送驗(yàn)證碼';
isSending = false;
}
}, 1000);
});
</script>
</body>
</html>3、密碼框顯示隱藏：切換 input 的 type 屬性（password/text）：
核心邏輯：
- 通過切換
input的type屬性（password/text）實(shí)現(xiàn)顯示隱藏； - 用
isShow變量標(biāo)記當(dāng)前狀態(tài)，點(diǎn)擊時取反； - 同步修改眼睛圖標(biāo)，提升用戶體驗(yàn)。
<!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. 綁定點(diǎn)擊事件
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")'; // 替換為實(shí)際圖片路徑
} 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 實(shí)現(xiàn)網(wǎng)頁交互與功能拓展的核心支柱，也是從 “會寫基礎(chǔ)代碼” 到 “能做實(shí)戰(zhàn)項(xiàng)目” 的關(guān)鍵跨越。數(shù)組讓數(shù)據(jù)管理更高效，函數(shù)讓代碼實(shí)現(xiàn)復(fù)用與封裝，DOM 賦予你操控頁面元素的能力，BOM 則打通了與瀏覽器交互的通道 —— 這四大模塊的組合，幾乎能滿足前端開發(fā)中 80% 以上的基礎(chǔ)交互需求。
實(shí)戰(zhàn)是掌握這些知識的最佳途徑。文中的案例（如倒計(jì)時、密碼顯示隱藏、分時問候）都是實(shí)際開發(fā)中高頻出現(xiàn)的場景，核心邏輯可遷移到更多復(fù)雜功能中。學(xué)習(xí)時，建議先理解案例的實(shí)現(xiàn)思路，再嘗試獨(dú)立編寫，遇到問題時通過控制臺調(diào)試、查看元素狀態(tài)，逐步培養(yǎng) “拆解需求→選擇技術(shù)→編寫代碼→優(yōu)化細(xì)節(jié)” 的編程思維。
需要注意的是，前端技術(shù)一直在迭代，ES6 及后續(xù)版本對數(shù)組、函數(shù)、作用域等有更便捷的語法支持（如箭頭函數(shù)、let/const、數(shù)組方法），但本文講解的核心原理與實(shí)戰(zhàn)邏輯是不變的基礎(chǔ)。掌握這些內(nèi)容后，你可以進(jìn)一步學(xué)習(xí)框架、模塊化開發(fā)等進(jìn)階知識，也能更輕松地理解新語法的設(shè)計(jì)初衷。
到此這篇關(guān)于JavaScript 進(jìn)階實(shí)戰(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ù)的語法、用法與實(shí)戰(zhàn)示例
- JavaScript數(shù)組操作學(xué)習(xí)之splice()函數(shù)入門與精通
- JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)groupBy函數(shù)詳解
- JavaScript中處理數(shù)組,對象和正則的實(shí)用函數(shù)
- js?fill函數(shù)填充數(shù)組或?qū)ο蟮慕鉀Q方法
- JavaScript原生數(shù)組函數(shù)實(shí)例匯總
- JavaScript中DOM和BOM的區(qū)別與用處詳解
- JavaScript中DOM和BOM原理詳析
- JavaScript中BOM,DOM和事件的用法詳解
相關(guān)文章
詳解html-webpack-plugin插件(用法總結(jié))
這篇文章主要介紹了詳解html-webpack-plugin插件(用法總結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
使用JavaScript實(shí)現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)
這篇文章主要介紹了 使用JavaScript實(shí)現(xiàn)在頁面中顯示距離2017年中秋節(jié)的天數(shù)的相關(guān)資料,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了兩個JS之間的函數(shù)互相調(diào)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
原生JavaScript實(shí)現(xiàn)購物車效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)購物車效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要是對js實(shí)現(xiàn)日期級聯(lián)效果的實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
用JavaScript實(shí)現(xiàn)字符串切分功能
用JavaScript實(shí)現(xiàn)字符串切分功能...2007-01-01
Bootstrap實(shí)現(xiàn)省市區(qū)三級聯(lián)動(親測可用)
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)省市區(qū)三級聯(lián)動，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
超強(qiáng)推薦的js編程中的簡潔寫法收集...2007-08-08
微信小程序中target和currentTarget的區(qū)別小結(jié)
這篇文章主要給大家介紹了關(guān)于微信小程序中target和currentTarget區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JavaScript創(chuàng)建對象的七種方式(推薦)
JavaScript創(chuàng)建對象的方式有很多，通過Object構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個對象，顯然這兩種方式會產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。接下來介紹七種非常經(jīng)典的創(chuàng)建對象的方式，他們也各有優(yōu)缺點(diǎn)2017-06-06