JavaScript 基础实战：DOM 操作、数据类型与常见需求实现
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、boolean | 1. 存储的是“具体值”，不允许添加自定义属性 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 基础实战的核心思路
- DOM 操作：优先利用事件冒泡减少事件绑定，通过
querySelector/querySelectorAll精准获取元素，核心属性（value、checked、tagName）要记牢； - 数据类型：明确值类型与引用类型的区别，避免“给值类型加属性”的陷阱；
- 数组/对象遍历：数组用
for循环，对象用for...in，复杂场景可结合forEach（ES6+）； - 工具方法：善用内置方法（如
array.join()、JSON.stringify()/JSON.parse()），提升开发效率。
这些案例覆盖了面试高频考点与项目基础需求，建议结合代码手动敲写，通过“默写式练习”强化记忆与理解，避免只看不动手的误区。