当前位置： 首页 > news >正文

JavaScript 基础实战：DOM 操作、数据类型与常见需求实现

news 2025/8/16 6:27:37

JavaScript 是前端开发的核心语言，掌握 DOM 操作、数据类型特性和常见功能实现，是应对项目开发与面试的关键。本文整理了 7 个高频实战案例，结合原理解析与代码实现，帮你夯实基础、提升实战能力。

一、DOM 事件实战：点击标签弹窗标签名

需求

鼠标点击页面任意标签，通过 alert 显示该标签的名称（如点击 <div> 显示“div”）。

实现代码（事件冒泡方案）

window.onload = function() {// 利用事件冒泡：给最顶层父元素（html）绑定点击事件document.documentElement.onclick = function(e) {// e.target：获取实际被点击的目标标签// tagName：获取标签名（返回大写，用toLowerCase()转为小写更友好）const tagName = e.target.tagName.toLowerCase();alert(`当前点击的标签：${tagName}`);};
};

核心原理：事件冒泡

  • 定义：事件触发后，会从“最特定的目标元素”（如点击的 <span>）向“最不特定的父元素”（如 <html>）逐级传播，这一过程就是事件冒泡。
  • 优势：无需给每个标签单独绑定事件，只需给父元素绑定一次，减少代码冗余，提升性能（尤其页面标签较多时）。

二、数据类型陷阱：String 值类型与引用类型的区别

题目

分析以下代码的执行结果，并说明原因：

var s1 = "abc";
var s2 = new String(s1);
s1.color = "blue";
s2.color = "red";
console.log(s1 === s2, s1.color, s2.color);

答案

false，undefined，red

原理解析：值类型 vs 引用类型

类型分类包含数据类型特性示例表现
值类型string、number、boolean1. 存储的是“具体值”，不允许添加自定义属性
2. 赋值时复制“完整值”		s1 是值类型，添加 color 属性无效，打印 undefined
引用类型Object（含 Array、Function、new String 等）1. 存储的是“内存地址”，允许添加自定义属性
2. 赋值时复制“地址”		s2 是 new String() 创建的引用类型，添加 color 属性有效，打印 red
  • 补充：s1 === s2 为 false，是因为两者类型不同（s1 是 string，s2 是 object），严格相等运算符会同时比较值和类型。

三、数组操作：创建数组并通过 for 循环遍历打印

需求

创建 3 个包含不同内容的数组，用 for 循环遍历并打印每个元素。

实现代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>数组遍历</title>
</head>
<script>// 1. 创建 3 个数组var arr1 = ["诗书画唱1", "三连1", "关注1"];var arr2 = ["诗书画唱2", "三连2", "关注2"];var arr3 = ["诗书画唱3", "三连3", "关注3"];// 2. for 循环遍历（i 从 0 开始，小于数组长度，避免越界）for (var i = 0; i < arr1.length; i++) {console.log(arr1[i]); // 依次打印：诗书画唱1、三连1、关注1}for (var i = 0; i < arr2.length; i++) {console.log(arr2[i]); // 依次打印：诗书画唱2、三连2、关注2}for (var i = 0; i < arr3.length; i++) {console.log(arr3[i]); // 依次打印：诗书画唱3、三连3、关注3}
</script>
<body></body>
</html>

关键要点

  • 数组遍历核心：for (var i = 0; i < 数组.length; i++)，i 是索引，数组[i] 是当前索引对应的元素。
  • 查看结果：打开浏览器 F12 控制台，在“Console”面板查看打印内容。

四、对象操作：创建对象并通过 for…in 遍历属性

需求

创建 3 个包含“id、name、age、sex”的对象，用 for...in 遍历对象属性并打印属性值。

实现代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>对象遍历</title>
</head>
<script>// 1. 创建 3 个对象var obj1 = { id: '1', name: '诗书画唱1', age: 21, sex: '男' };var obj2 = { id: '2', name: '诗书画唱2', age: 22, sex: '男' };var obj3 = { id: '3', name: '诗书画唱3', age: 23, sex: '男' };// 2. for...in 遍历对象（i 是属性名，obj[i] 是属性值）for (var i in obj1) {console.log(obj1[i]); // 打印：1、诗书画唱1、21、男}for (var i in obj2) {console.log(obj2[i]); // 打印：2、诗书画唱2、22、男}for (var i in obj3) {console.log(obj3[i]); // 打印：3、诗书画唱3、23、男}
</script>
<body></body>
</html>

关键要点

  • for...in 遍历对象的核心：for (var 变量 in 对象)，变量存储的是“属性名”，通过 对象[属性名] 获取属性值（注意：不能用 对象.属性名，因为属性名是变量）。

五、表单控件：单选框与多选框的值获取

1. 单选框：获取选中值并打印

实现代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>单选框值获取</title>
</head>
<script>window.onload = function() {// 给两个单选框分别绑定点击事件document.querySelector('#sex1').onclick = function(e) {console.log(e.target.value); // 点击“男”，打印“男”};document.querySelector('#sex2').onclick = function(e) {console.log(e.target.value); // 点击“女”，打印“女”};};
</script>
<body><!-- name 属性相同，确保单选框互斥 --><input type="radio" id="sex1" name="sex" value="男" checked />男<input type="radio" id="sex2" name="sex" value="女" />女
</body>
</html>

2. 多选框：获取所有选中值，用逗号拼接后打印

实现代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>多选框值获取</title>
</head>
<script>window.onload = function() {// 点击按钮时触发获取逻辑document.querySelector('#button').onclick = function() {var result = ""; // 存储最终拼接的字符串// 1. 获取所有多选框（通过[type="checkbox"]选择器）var checkboxes = document.querySelectorAll('[type="checkbox"]');// 2. 遍历多选框，判断是否选中for (var i = 0; i < checkboxes.length; i++) {if (checkboxes[i].checked) { // checked 为 true 表示选中result += checkboxes[i].value + ","; // 拼接选中值，加逗号分隔}}// 3. 去除最后一个多余的逗号（若有选中值）result = result.slice(0, -1) || "未选中任何选项";console.log(result); // 如选中“点赞”“收藏”，打印“点赞,收藏”};};
</script>
<body><input type="checkbox" value="点赞" />点赞<input type="checkbox" value="投币" />投币<input type="checkbox" value="收藏" />收藏<button id="button">打印选中值</button>
</body>
</html>

六、下拉框：动态添加选项并设置默认选中

需求

创建空下拉框，通过 JS 动态添加“本科、大专、高中、初中”选项，并将“大专”设为默认选中。

实现代码（老师方案优化版）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>下拉框动态操作</title>
</head>
<script>window.onload = function() {// 1. 获取下拉框元素var select = document.querySelector('#sel');// 2. 动态添加选项（new Option(显示文本, 实际值)）select.add(new Option('本科', '本科'));select.add(new Option('大专', '大专'));select.add(new Option('高中', '高中'));select.add(new Option('初中', '初中'));// 3. 设置“大专”为默认选中（值与 Option 的“实际值”一致）select.value = '大专';// 额外演示：数组 join 方法（将数组转为字符串，用@分隔）var arr = ['bar', 'foo', 'mee'];console.log(arr.join('@')); // 打印：bar@foo@mee};
</script>
<body><select id="sel"></select>
</body>
</html>

关键要点

  • 动态添加选项：select.add(new Option(显示文本, 实际值))，第一个参数是用户看到的文本，第二个参数是提交时的实际值。
  • 默认选中：通过 select.value = "目标值" 实现，值需与 Option 的第二个参数完全一致。

七、数组拼接：将数组元素转为用逗号分隔的字符串

需求

将数组 ['bar','foo','mee'] 拼接成 bar,foo,mee 的字符串（两种方案）。

方案 1：for 循环手动拼接（基础版）

var arr4 = ['bar', 'foo', 'mee'];
var result = arr4[0]; // 初始化：取第一个元素
// 从索引 1 开始遍历，逐个加逗号和元素
for (var i = 1; i < arr4.length; i++) {result += "," + arr4[i];
}
console.log(result); // 打印：bar,foo,mee

方案 2：数组 join 方法（高效版）

var arr4 = ['bar', 'foo', 'mee'];
// join(分隔符)：将数组转为字符串，元素用分隔符连接
var result = arr4.join(',');
console.log(result); // 打印：bar,foo,mee

对比

  • 手动拼接：适合理解循环逻辑，代码较繁琐；
  • join 方法：JS 内置方法，简洁高效，实际开发首选（分隔符可自定义，如 join('@') 会得到 bar@foo@mee）。

总结：JS 基础实战的核心思路

  1. DOM 操作：优先利用事件冒泡减少事件绑定，通过 querySelector/querySelectorAll 精准获取元素，核心属性（value、checked、tagName）要记牢；
  2. 数据类型：明确值类型与引用类型的区别，避免“给值类型加属性”的陷阱；
  3. 数组/对象遍历：数组用 for 循环，对象用 for...in，复杂场景可结合 forEach（ES6+）；
  4. 工具方法：善用内置方法（如 array.join()、JSON.stringify()/JSON.parse()），提升开发效率。

这些案例覆盖了面试高频考点与项目基础需求，建议结合代码手动敲写，通过“默写式练习”强化记忆与理解，避免只看不动手的误区。

http://www.lryc.cn/news/621624.html

相关文章：

  • IT资讯 | VMware ESXi高危漏洞影响国内服务器
  • 从应用场景看国产化FPGA潜力，紫光同创研讨会武汉·北京站回顾
  • Linux搭建ftp服务器
  • Unity：PlayerPrefs笔记
  • Python入门第3课：Python中的条件判断与循环语句
  • 戴永红×数图：重构零售空间价值，让陈列创造效益！
  • Vue 侦听器（watch 与 watchEffect）全解析1
  • 从CAD数据访问到3D协作，HOOPS SDK如何提升PLM解决方案竞争力？
  • 机械学习---- PCA 降维深度解析
  • p5.js 3D盒子的基础用法
  • 用 Enigma Virtual Box 将 Qt 程序打包成单 exe
  • Helm 常用命令 + Bitnami 中间件部署速查表
  • 北京JAVA基础面试30天打卡10
  • JVM核心原理与实战优化指南
  • Java 调用 Python 脚本：实现 HelloWorld
  • Android 欧盟网络安全EN18031 要求对应的基本表格填写
  • 电脑上练打字用什么软件最好：10款打字软件评测
  • 【Linux】编辑器vim的使用
  • IDE：vscode的vue3模板
  • STM32 - Embedded IDE - GCC - 解决LWRB库在GCC编译器会编译失败，在ARMCC编译器时却正常编译
  • collections：容器数据类型
  • 《R for Data Science (2e)》免费中文翻译 (第4章) --- Workflow: code style
  • uniapp 开发微信小程序，获取经纬度并且转化详细地址（单独封装版本）
  • 启动electron桌面项目控制台输出中文时乱码解决
  • 解锁AI大模型：Prompt工程全面解析
  • 玻璃pcb是什么材质？哪家工厂可以生产？
  • C++：stl-＞ list的模拟实现
  • NAT 和 PNAT
  • Oracle按照特定列值排序和C#统计特定列值的所有行
  • 当云手机出现卡顿怎么办？