本文聚焦 JavaScript 核心技能 —— 函数与 DOM 操作，通过 100 + 行带注释代码、真实项目案例，从函数定义调用、作用域解析，到 DOM 元素增删改查、事件绑定等核心模块，以 “零基础教学 + 企业级实战” 模式，帮助开发者快速掌握 JavaScript 交互开发能力，适合 CSDN 技术爱好者深度学习。
一、函数：JavaScript 的 “功能军火库”
1.1 函数是什么？
函数是 JavaScript 中封装可复用代码的 “黑匣子”，将重复执行的代码块打包，通过调用实现功能复用。
👉比如：把 “计算两个数之和” 的代码封装成函数，在不同场景重复使用。
1.2 函数的定义与调用
（1）命名函数
// 定义函数：计算两数之和
function add(num1, num2) {
return num1 + num2;
}
// 调用函数
let result = add(5, 3);
console.log(result); // 输出8（2）匿名函数
// 直接定义并调用匿名函数（立即调用函数表达式，IIFE）
let square = function(x) {
return x * x;
};
let result2 = square(4);
console.log(result2); // 输出16（3）箭头函数（ES6 语法，更简洁）
// 计算两数乘积的箭头函数
let multiply = (a, b) => a * b;
let result3 = multiply(6, 7);
console.log(result3); // 输出421.3 函数参数与返回值
| 概念 | 说明 | 代码示例 |
| 形参（形式参数） | 函数定义时的参数名 | function greet(name) {... } |
| 实参（实际参数） | 函数调用时传入的值 | greet('小明'); |
| 返回值 | 函数执行后的输出结果 | return value; |
1.4 函数作用域：变量的 “活动范围”
let globalVar = '我是全局变量';
function outerFunction() {
let localVar = '我是局部变量';
console.log(globalVar); // 可以访问全局变量
console.log(localVar); // 可以访问局部变量
function innerFunction() {
console.log(localVar); // 可以访问父函数的局部变量
}
innerFunction();
}
outerFunction();
// console.log(localVar); 报错！ localVar超出作用域1.5 实战案例：制作一个简易计算器
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
</head>
<body>
<input type="number" id="num1">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="number" id="num2">
<button onclick="calculate()">计算</button>
<div id="result"></div>
<script>
function calculate() {
let num1 = parseFloat(document.getElementById('num1').value);
let operator = document.getElementById('operator').value;
let num2 = parseFloat(document.getElementById('num2').value);
let result;
if (operator === '+') {
result = add(num1, num2);
} else {
result = subtract(num1, num2);
}
document.getElementById('result').innerHTML = `结果是：${result}`;
}
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
</script>
</body>
</html>👉 效果：输入数字和运算符，点击按钮显示计算结果。
二、DOM 操作：JavaScript 的 “网页改造器”
2.1 什么是 DOM？
DOM（文档对象模型）是 HTML 文档在内存中的树形结构表示，JavaScript 通过 DOM 操作来修改网页内容、样式和结构。
👉 DOM 树示意图：
2.2 获取 DOM 元素的 5 种方法
| 方法 | 说明 | 代码示例 |
| getElementById | 通过 id 获取单个元素 | document.getElementById('myDiv'); |
| getElementsByClassName | 通过 class 获取元素集合 | document.getElementsByClassName('btn'); |
| getElementsByTagName | 通过标签名获取元素集合 | document.getElementsByTagName('p'); |
| querySelector | 通过 CSS 选择器获取单个元素 | document.querySelector('div.container'); |
| querySelectorAll | 通过 CSS 选择器获取元素集合 | document.querySelectorAll('a.nav-link'); |
2.3 修改 DOM 元素的内容、样式和属性
（1）修改文本内容
let element = document.getElementById('myParagraph');
element.textContent = '新的文本内容';（2）修改样式
let button = document.getElementById('myButton');
button.style.backgroundColor ='red'; // 修改背景色
button.style.color = 'white'; // 修改文字颜色（3）修改属性
let img = document.getElementById('myImage');
img.src = 'new-image.jpg'; // 修改图片地址2.4 动态创建和删除 DOM 元素
（1）创建元素
// 创建新的段落元素
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是新创建的段落';
// 将新元素添加到指定位置
let parentDiv = document.getElementById('parent');
parentDiv.appendChild(newParagraph);（2）删除元素
let elementToRemove = document.getElementById('oldElement');
let parent = elementToRemove.parentNode;
parent.removeChild(elementToRemove);2.5 事件绑定：让网页 “动” 起来
（1）直接在 HTML 中绑定
<button onclick="showMessage()">点击我</button>
<script>
function showMessage() {
alert('按钮被点击了！');
}
</script>（2）通过 JavaScript 绑定
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('另一种绑定方式！');
});2.6 实战案例：制作一个动态待办事项列表
<!DOCTYPE html>
<html>
<head>
<title>待办事项列表</title>
</head>
<body>
<input type="text" id="newTask" placeholder="输入新任务">
<button id="addButton">添加任务</button>
<ul id="taskList"></ul>
<script>
let addButton = document.getElementById('addButton');
let taskList = document.getElementById('taskList');
addButton.addEventListener('click', function() {
let newTask = document.getElementById('newTask').value;
if (newTask) {
// 创建新的列表项
let listItem = document.createElement('li');
listItem.textContent = newTask;
// 创建删除按钮
let deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', function() {
taskList.removeChild(listItem);
});
listItem.appendChild(deleteButton);
taskList.appendChild(listItem);
// 清空输入框
document.getElementById('newTask').value = '';
}
});
</script>
</body>
</html>👉 效果：输入任务点击添加，显示在列表中，点击删除按钮可移除任务。
三、常见错误与避坑指南
3.1 函数调用错误
错误：函数定义了参数，但调用时未传入对应参数
解决：确保调用函数时传入参数的数量和类型与定义一致
3.2 DOM 元素获取失败
错误：页面 DOM 尚未加载完成就尝试获取元素
解决：将 JavaScript 代码放在<body>标签底部，或使用DOMContentLoaded事件：
document.addEventListener('DOMContentLoaded', function() {
// 在这里获取DOM元素
});3.3 事件绑定重复触发
错误：多次绑定同一事件导致重复执行
解决：先移除旧的事件监听器，再绑定新的，或确保绑定逻辑只执行一次
四、技术笔记：函数与 DOM 操作速查表
4.1 函数常用语法
| 功能 | 语法 | 示例 |
| 定义函数 | function 函数名(参数) {... } | function sum(a, b) { return a + b; } |
| 调用函数 | 函数名(参数); | sum(3, 5); |
| 箭头函数 | (参数) => 表达式 | (x, y) => x * y |
4.2 DOM 操作常用方法
| 功能 | 方法 | 示例 |
| 获取元素 | document.getElementById('id'); | document.getElementById('main'); |
| 创建元素 | document.createElement('标签名'); | document.createElement('div'); |
| 添加元素 | 父元素.appendChild(子元素); | parentDiv.appendChild(newElement); |
| 绑定事件 | 元素.addEventListener('事件名', 回调函数); | button.addEventListener('click', handleClick); |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
