前端入门学习-JavaScript DOM 交互实战 - 从文本操作到综合布局
前端入门学习笔记（Day05）：JavaScript DOM 交互实战 - 从文本操作到综合布局
引入：
一、基础文本与样式操作
DOM（Document Object Model）是浏览器将 HTML 文档解析成的 “对象树”，JavaScript 通过 DOM API 就能操作页面中的元素。基础文本与样式操作是入门 DOM 的第一步，核心是 “找到元素→修改属性”。
1.1核心原理：“获取元素” 是前提
要修改元素，首先得通过 DOM API “找到” 它。Day05 中使用的getElementById是最常用的元素获取方式，需注意两点：
- 唯一性：id是页面中元素的唯一标识，一个页面不能有重复id，否则getElementById只会返回第一个匹配的元素；
- DOM 加载顺序：若 JS 代码写在<head>中（在 HTML 元素之前加载），直接调用getElementById会返回null（此时元素还未被解析），需通过window.onload确保 DOM 加载完成后再执行代码。
代码示例：
// 修改元素内容
document.getElementById("traget").innerHTML = "HELLO WORLD";
// 修改文本颜色
document.getElementById("traget").style.color = "red";
// 修改背景颜色
document.getElementById("traget").style.background = "yellow";
1.2关键知识点与避坑指南
- innerHTML vs textContent：
- innerHTML：可解析 HTML 标签（如<strong>会显示加粗），但存在 XSS 安全风险（若内容来自用户输入，可能注入恶意代码）；
- textContent：仅渲染纯文本，忽略 HTML 标签，安全性更高，推荐优先使用（除非需要插入 HTML 结构）。
- 样式命名规则：JS 中操作style属性时，CSS 的 “短横线命名” 需转为 “驼峰命名”（如background-color→backgroundColor、font-size→fontSize），避免与 JS 语法冲突。
- 样式优先级：通过style属性设置的样式是 “内联样式”，优先级最高，会覆盖 CSS 文件或<style>标签中的样式（若需优先级更低的动态样式，后续可学习classList操作）。
这种直接操作 DOM 元素样式的方式，让我们可以动态改变页面呈现效果。
二、鼠标交互与图片切换
鼠标交互是网页最基础的用户反馈形式，Day05 通过 “鼠标悬停切换图片” 案例，学习了onmouseover事件（鼠标移入）的使用，核心是 “监听事件→控制元素显示 / 隐藏”。
代码示例：
// 鼠标悬停第一辆车时显示对应图片
odiv1.onmouseover = function(){
oimage1.style.display = "block";
oimage2.style.display = "none";
oimage3.style.display = "none";
}
```
这种交互模式广泛应用于产品展示、图片画廊等场景。
三、页面跳转与倒计时
页面跳转和倒计时是 “流程化场景” 的核心功能（如支付成功后跳转首页、登录超时跳转登录页），Day05 通过js3.html（支付页）和success.html（成功页）模拟了这一流程，核心是location.href（页面跳转）和setInterval（定时器）。
3.1 场景逻辑：支付流程的 “成功→倒计时→跳转”
- 用户在（支付页）点击 “支付” 按钮，跳转至success.html（支付成功页）；
- success.html加载后，启动 10 秒倒计时，显示 “10 秒后自动返回支付页”；
- 倒计时结束，自动跳转回支付页。
部分代码示例：
// 页面跳转
location.href = "./success.html";
// 倒计时功能
window.onload = function(){
let time = 10;
setInterval(()=>{
time--;
document.getElementById("jumpTo").innerText = time;
if(time == 0){
location.href = "./js3.html";
}
}, 1000);
}
`setInterval` 函数用于定时执行代码，配合 `location.href` 实现了自动跳转功能。
3.2核心知识点与注意事项
- location对象常用属性：
- location.href：完整 URL（如http://localhost/success.html），修改它会跳转页面；
- location.reload()：刷新当前页面（如 “重新支付” 功能）；
- location.pathname：当前页面路径（如/success.html），可用于判断当前页面位置。
- 定时器的 “创建与清除”：
- setInterval(fn, delay)：每隔delay毫秒执行一次fn，返回 “定时器 ID”；
- clearInterval(timerID)：通过定时器 ID 停止定时器，必须在倒计时结束或页面跳转前清除，否则定时器会继续运行（导致内存泄漏，甚至跳转后仍执行代码）。
- 实际开发场景拓展：
- 支付成功后，应先通过后端接口确认 “真正支付成功”（而非前端直接跳转，避免伪造成功页）；
- 倒计时期间，可提供 “取消跳转” 按钮（如clearInterval(timer)），提升用户体验。
四、进度条动画效果
`js4.html` 实现了一个动态进度条，通过定时器逐步改变元素宽度来实现动画效果：
```javascript
insBut.onclick = function(){
let num = 0;
time = setInterval(()=>{
num++;
sondiv.style.width = num + 'px';
spanvalue.innerText = Math.ceil(num/400*100);
if(num == 400){
clearInterval(time); // 清除定时器
}
}, 10);
}```
这个实例展示了如何通过 JavaScript 实现简单的动画效果，`clearInterval` 用于在动画完成后停止定时器。
五、复选框操作
下面的代码实现了复选框的全选、全不选和反选功能，主要通过操作复选框的 `checked` 属性：
```javascript
function getAll(num){
for(var i=0; i<input.length; i++){
if(num == 0){// 全选功能
input[i].checked = true;
}else if(num == 1){//全不选
input[i].checked = false;
}else if(num == 2){
input[i].checked = !input[i].checked; // 反选
}
}
}通过循环遍历所有复选框并设置其状态，实现了批量操作的效果。
六、综合页面布局实践
Day05 的综合实践聚焦 “迎新网” 静态页面开发，该页面以 “服务新生” 为核心，整合了 HTML 结构搭建与 CSS 样式设计，为后续添加 JavaScript 交互功能（如通知公告动态加载、快捷链接跳转逻辑）奠定基础。页面采用模块化布局，涵盖头部、导航栏、核心功能区（快捷方式、通知公告、特色内容）、专题板块（军训专题）及返回顶部组件，以下是部分代码与布局解析。
6.1分层式结构设计（贴合新生使用逻辑）
头部区域：用线性渐变实现品牌感，校徽、标题、快捷链接横向对齐，强化学校标识：
.header {
background: linear-gradient(to bottom, #fff 0%, #fff 90%, #a52a2a 90%, #a52a2a 100%); /* 白→红过渡 */
}
.header-content {
display: flex; /* 横向对齐校徽、标题、链接 */
justify-content: space-between;
align-items: center;
}导航栏：红色主色调 + hover 反馈，聚焦核心功能（网上报到、入学指南）：
.nav { background-color: #a52a2a; } /* 校色红色 */
.nav ul { display: flex; } /* 横向排列导航项 */
.nav li a:hover { background-color: #8b2323; } /* hover加深背景，提升交互感 */主体三栏布局：按 “功能→通知→专题” 划分，符合新生使用路径：
.quick-notice { display: flex; justify-content: space-between; } /* 三栏弹性布局 */
.quick-links { width: 25%; } /* 左侧快捷功能区 */
.notices { width: 45%; } /* 中间通知公告区（占比最大，优先展示） */
.right-content { width: 25%; } /* 右侧专题内容区 */6.2功能模块视觉与交互优化
军训专题卡片：图片 hover 放大增强吸引力，日期标签突出时效性：
.card img:hover { transform: scale(1.2); } /* 图片hover放大 */
.card-date { background-color: #f8a5a5; color: #fff; } /* 红色系日期标签 */色彩区分快捷功能：用不同底色明确功能分类，降低新生认知成本：
.quick-link.blue { background-color: #87ceeb; } /* 学院简介（蓝色） */
.quick-link.yellow { background-color: #ffd700; } /* 辅导员风采（黄色） */6.3辅助功能提升体验
返回顶部按钮：固定定位 + 圆形设计，解决长页面滚动痛点：
.back-to-top {
position: fixed; bottom: 20px; right: 20px; /* 固定在右下角 */
width: 40px; height: 40px; border-radius: 50%; /* 圆形样式 */
background-color: #a52a2a; color: #fff;
}七、学习总结
- 核心能力聚焦：掌握 “DOM 操作 + 事件监听 + 定时器” 三大 JS 交互核心，实现从 “静态页面” 到 “动态效果” 的突破，如文本修改、图片切换、倒计时跳转等。
- 实践逻辑串联：所有案例均对应真实场景（产品展示、支付流程、表单操作），需注意 “元素获取时机（window.onload）”“定时器清除（clearInterval）”“事件绑定效率（循环绑定避免冗余）” 等细节。
- 布局与交互结合：河北大学迎新网案例体现 “静态布局为基础，动态交互为延伸” 的前端开发逻辑 —— 先用 CSS 实现模块化、用户友好的布局，再通过 JS 补充交互功能（后续可拓展通知公告动态加载、快捷功能点击反馈等）。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
27
0- 0
已为社区贡献35条内容
所有评论(0)