JavaScript数组、函数、DOM 与 BOM 实战全解析
更新时间：2026年01月15日 09:03:51 作者：一天 24h
文章总结了JavaScript中数组、函数、DOM和BOM的基本概念和操作方法,包括数组的创建和操作、函数的声明与调用、DOM元素的获取和操作、BOM对象的使用以及一些实战案例,感兴趣的朋友跟随小编一起看看吧
一、数组：高效管理数据集合
（一）数组的创建
- 字面量方式（推荐）：
var arr = ['小白', 12, true];，可存放任意类型数据； - new 关键字方式：
var arr = new Array();（创建空数组）。
（二）核心操作
- 获取元素：通过索引（从 0 开始），
arr[0]获取第一个元素，索引越界返回 undefined； - 遍历数组：结合
arr.length（数组长度）用 for 循环遍历：
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
- 新增元素：
arr[arr.length] = 新元素（在数组末尾添加）； - 修改长度：
arr.length = 新长度，超过原长度补空白元素，不足则删除多余元素。
二、函数：封装可复用代码块
（一）函数的声明与调用
- 命名函数：
function 函数名(形参1, 形参2) {
// 函数体
}
函数名(实参1, 实参2); // 调用
- 匿名函数（函数表达式）：
var 函数名 = function() {
// 函数体
};
函数名(); // 调用需在声明后
（二）核心特性
- 参数：形参默认值为 undefined，实参个数可与形参不一致（多则忽略，少则多余形参为 undefined）；
- 返回值：用
return返回结果，执行 return 后函数停止运行，无 return 则返回 undefined； - arguments：内置对象，存储所有实参，伪数组形式（有 length、索引，无数组方法）；
- 作用域：ES6 前分为全局作用域（script 或独立 JS 文件）和局部作用域（函数内），变量分为全局变量（浏览器关闭时销毁）和局部变量（函数执行完销毁）。
三、DOM 操作：操控网页元素
（一）获取页面元素
document.getElementById(id)：根据 ID 获取单个元素；document.getElementsByTagName(标签名)：根据标签名获取伪数组；- H5 新增：
getElementsByClassName(类名)、querySelector(选择器)（返回第一个匹配元素）、querySelectorAll(选择器)（返回所有匹配元素）； - 特殊元素：
document.body（body 元素）、document.documentElement（html 元素）。
（二）事件处理机制
- 事件三要素：事件源（触发元素）、事件类型（如 click、mouseover）、事件处理程序（函数）；
- 常用鼠标事件：onclick（点击）、onmouseout（鼠标离开）、onfocus（获得焦点）、onblur（失去焦点）；
- 执行流程：获取事件源→绑定事件→编写处理程序。
（三）操作元素内容与样式
- 修改内容：
innerText：去除 HTML 标签和空格；innerHTML：保留 HTML 标签和空格，支持解析 HTML；
- 属性操作：修改 src、href、id、alt 等，如
img.src = "new.jpg"； - 表单属性：disabled（禁用）、checked（选中）、selected（选中），值为布尔型；
- 样式操作：
- 行内样式：
element.style.fontSize = "16px"（驼峰命名）； - 类名样式：
element.className = "新类名"（适合多样式修改，会覆盖原有类名）。
- 行内样式：
四、BOM 操作：控制浏览器行为
（一）核心对象 window
浏览器顶级对象，全局变量和函数自动成为其属性和方法，可省略 window 前缀（如alert()等价于window.alert()）。
（二）常用功能
- 页面加载事件：
window.onload：页面完全加载（含图片、CSS）后触发，可将 JS 代码写在页面上方；DOMContentLoaded：DOM 加载完成即触发（不含图片），加载速度更快，IE9 + 支持。
- 定时器：
setTimeout(回调函数, 延迟毫秒数)：延迟执行一次（炸弹定时器），案例：5 秒后关闭广告；setInterval(回调函数, 间隔毫秒数)：重复执行（闹钟定时器），案例：倒计时、短信验证码倒计时；- 停止定时器：
clearTimeout(定时器标识)、clearInterval(定时器标识)。
- 窗口操作：
window.onresize：窗口大小改变时触发，可实现响应式布局；window.innerWidth：获取窗口宽度。
- this 指向：
- 全局 / 普通函数：指向 window；
- 事件处理函数：指向触发事件的元素；
- 构造函数：指向实例对象。
五、实战案例参考
1、倒计时功能：用 setInterval 实现秒数递减，通过 innerHTML 更新页面：
核心逻辑：
- 用总秒数计算时、分、秒，避免处理时间进制问题；
- 封装函数实现逻辑复用，初始调用一次防止页面空白；
- 不足 10 的数字补零，保证显示美观；
- 秒数为 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');
// 总秒数（示例：1小时20分39秒 = 1*3600 + 20*60 + 39 = 4839秒）
var totalSeconds = 4839;
// 2. 封装更新倒计时函数
function updateCountdown() {
if (totalSeconds <= 0) {
clearInterval(timer); // 秒数为0时停止定时器
return;
}
// 计算时、分、秒
var h = Math.floor(totalSeconds / 3600);
var m = Math.floor((totalSeconds % 3600) / 60);
var s = totalSeconds % 60;
// 补零（确保显示两位数）
hour.innerHTML = h < 10 ? '0' + h : h;
minute.innerHTML = m < 10 ? '0' + m : m;
second.innerHTML = s < 10 ? '0' + s : s;
// 总秒数递减
totalSeconds--;
}
// 3. 先调用一次函数，避免初始空白
updateCountdown();
// 4. 开启定时器，每秒更新一次
var timer = setInterval(updateCountdown, 1000);
</script>
</body>
</html>2、短信验证码倒计时：点击按钮后禁用，60 秒后恢复初始状态：
核心逻辑：
- 用
disabled属性禁用按钮，防止重复发送； - 定时器每秒递减倒计时数字，更新按钮文本；
- 倒计时结束后清除定时器，恢复按钮初始状态；
- 添加
isSending标志，避免快速点击导致多个定时器冲突。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>短信验证码倒计时</title>
</head>
<body>
<button class="code-btn">发送验证码</button>
<script>
// 1. 获取按钮元素
var codeBtn = document.querySelector('.code-btn');
var isSending = false; // 防止重复点击
// 2. 绑定点击事件
codeBtn.addEventListener('click', function() {
if (isSending) return; // 正在发送时阻止重复点击
isSending = true;
var count = 60;
// 禁用按钮并修改文本
codeBtn.disabled = true;
codeBtn.innerHTML = `重新发送(${count}s)`;
// 3. 开启定时器
var timer = setInterval(function() {
count--;
codeBtn.innerHTML = `重新发送(${count}s)`;
// 倒计时结束，恢复按钮状态
if (count <= 0) {
clearInterval(timer);
codeBtn.disabled = false;
codeBtn.innerHTML = '发送验证码';
isSending = false;
}
}, 1000);
});
</script>
</body>
</html>3、密码框显示隐藏：切换 input 的 type 属性（password/text）：
核心逻辑：
- 通过切换
input的type属性（password/text）实现显示隐藏； - 用
isShow变量标记当前状态，点击时取反； - 同步修改眼睛图标，提升用户体验。
<!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; // 标记是否显示密码
// 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、分时问候：根据系统时间修改页面图片和问候语：
核心逻辑：
- 用
new Date()获取当前时间，getHours()获取小时数； - 多分支判断小时区间，对应不同问候语和背景图；
- 通过
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. 获取当前小时（0-23）
var now = new Date();
var hour = now.getHours();
// 3. 根据小时判断问候语和背景图
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>六、结语
数组、函数、DOM 与 BOM 是 JavaScript 实现网页交互与功能拓展的核心支柱，也是从 “会写基础代码” 到 “能做实战项目” 的关键跨越。数组让数据管理更高效，函数让代码实现复用与封装，DOM 赋予你操控页面元素的能力，BOM 则打通了与浏览器交互的通道 —— 这四大模块的组合，几乎能满足前端开发中 80% 以上的基础交互需求。
实战是掌握这些知识的最佳途径。文中的案例（如倒计时、密码显示隐藏、分时问候）都是实际开发中高频出现的场景，核心逻辑可迁移到更多复杂功能中。学习时，建议先理解案例的实现思路，再尝试独立编写，遇到问题时通过控制台调试、查看元素状态，逐步培养 “拆解需求→选择技术→编写代码→优化细节” 的编程思维。
需要注意的是，前端技术一直在迭代，ES6 及后续版本对数组、函数、作用域等有更便捷的语法支持（如箭头函数、let/const、数组方法），但本文讲解的核心原理与实战逻辑是不变的基础。掌握这些内容后，你可以进一步学习框架、模块化开发等进阶知识，也能更轻松地理解新语法的设计初衷。
到此这篇关于JavaScript 进阶实战：数组、函数、DOM 与 BOM 全解析的文章就介绍到这了,更多相关js 数组 函数 dom与bom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Three.js中如何使用CSS3DRenderer和CSS3DSprite实现模型标签文字
在Three.js中,使用CSS3DRenderer和CSS3DSprite可以轻松地实现模型标签文字的效果,为场景中的模型提供更直观的信息展示,本文将介绍如何使用这两个工具来实现模型标签文字,并提供相应的代码示例,感兴趣的朋友跟随小编一起看看吧2024-05-05
在全局执行环境中使用this，标识Global对象，在浏览器中就是window对象。2010-03-03
本文主要介绍了JS模拟百度搜索框和选项卡的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
这篇文章主要介绍了探究一道价值25k的蚂蚁金服异步串行面试题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了JavaScript中获取时间的函数集，通过实例代码给大家讲解，非常详细，感兴趣的朋友一起学习吧2016-08-08
这篇文章主要介绍了深入浅析JSONAPI在PHP中的应用,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了JS使用parseInt解析数字实现求和的方法,涉及javascript表单元素值的获取及parseInt解析转换字符串为数字的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了功能强大的Bootstrap使用手册，分享了Bootstrap使用步骤和常用用法，感兴趣的小伙伴们可以参考一下2016-08-08
首先要感谢 EtherDream 的不同观点，在 巧用cssText属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。2011-03-03
这篇文章主要帮助大家轻松掌握JavaScript中介者模式，告诉大家什么是js中介者模式？js中介者模式的作用是什么，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论