JavaScript 核心基础：类型检测、DOM 操作与事件处理
JavaScript 作为松散类型语言，掌握类型检测规则、DOM 元素获取方式及事件处理逻辑，是写出健壮代码的基础。本文系统梳理 JS 高频基础知识点，结合实战场景解析原理与用法，帮你建立清晰的知识框架。
一、JS 数据类型与类型检测（typeof 运算符）
1. 数据类型分类
JS 共 6 种数据类型，分为“基本类型”和“引用类型”，面试回答需准确区分：
- 5 种基本数据类型：Number（数字）、String（字符串）、Boolean（布尔）、Undefined（未定义）、Null（空值）
- 1 种引用类型：Object（对象，包含 Array 数组、Function 函数、Date 日期等）
2. typeof 运算符：检测类型的核心工具
typeof 是检测变量类型的常用运算符，返回值是表示类型的字符串（共 6 种可能），需牢记其检测规则与特殊情况：
| 变量定义 | typeof 检测结果 | 关键说明 |
|---|---|---|
var x = 1; | “number” | 所有数字（整数、浮点数）均返回 “number” |
var str = "abc"; | “string” | 字符串字面量或 new String() 均返回 “string” |
var isTrue = true; | “boolean” | 布尔值 true/false 均返回 “boolean” |
var a;（未赋值） | “undefined” | 变量声明未赋值，或直接使用 undefined，均返回 “undefined” |
var b = null; | “object” | 特殊情况：null 是“空对象引用”，typeof 检测返回 “object” |
var obj = new Object(); | “object” | 所有对象（含数组、普通对象）均返回 “object” |
var arr = [1,2,3]; | “object” | 数组本质是 Object 子类，typeof 检测仍返回 “object” |
var fn = function(){}; | “function” | 特殊情况：函数虽属于引用类型，但 typeof 单独返回 “function”（可理解为 Object 的特殊子类型） |
关键记忆点
- 变量未赋值时，typeof 必返回 “undefined”；
- 只要是对象（含数组、null），typeof 基本返回 “object”，唯一例外是函数返回 “function”。
二、遍历方式：数组与对象的 2 种核心遍历
JS 中遍历主要依赖 for 循环和 for...in（常称“forEach 式遍历”），需根据遍历目标选择对应方式：
1. for 循环：适合数组遍历
核心场景：遍历数组（需通过索引访问元素），或需要精确控制遍历顺序、终止条件的场景。
语法示例：
var arr = [1, 2, 3];
// i 为索引，从 0 开始，小于数组长度（避免越界）
for (var i = 0; i < arr.length; i++) {console.log(arr[i]); // 依次打印：1、2、3
}
2. for…in 循环：适合对象遍历
核心场景：遍历对象的属性（获取属性名与属性值），也可用于数组（但不推荐，因可能遍历到原型链属性）。
语法示例：
var obj = { name: "张三", age: 20 };
// key 为对象的属性名（字符串类型）
for (var key in obj) {console.log(key + ": " + obj[key]); // 依次打印：name: 张三、age: 20
}
关键区别
| 遍历方式 | 适用目标 | 访问方式 | 注意事项 |
|---|---|---|---|
| for 循环 | 数组 | 数组[索引] | 需控制索引范围，避免越界 |
| for…in | 对象 | 对象[属性名] | 遍历对象时，需注意过滤原型链属性（可用 obj.hasOwnProperty(key)） |
三、DOM 操作：元素获取与属性设置
DOM（文档对象模型）是 JS 操作 HTML 的桥梁，核心是“获取元素”与“操作元素”，需熟练掌握选择器与属性设置规则。
1. 元素获取：querySelector/querySelectorAll 万能方案
这两个方法是现代 JS 推荐的元素获取方式，可替代 ID 选择器、类选择器、标签选择器等所有传统方式，语法灵活：
| 选择器语法 | 作用 | 示例 | 返回结果 |
|---|---|---|---|
#id | 获取指定 ID 的元素 | document.querySelector("#btn") | 单个元素（若有多个相同 ID，只返回第一个） |
.class | 获取指定类名的所有元素 | document.querySelectorAll(".box") | 元素集合（类数组，需遍历访问） |
标签名 | 获取指定标签的所有元素 | document.querySelectorAll("div") | 元素集合（类似标签选择器） |
[name="xxx"] | 获取指定 name 属性的元素 | document.querySelectorAll('[name="sex"]') | 元素集合（常用于单选框、复选框） |
实战示例：
// 1. 获取 ID 为 "btn" 的按钮（单个元素）
var btn = document.querySelector("#btn");// 2. 获取类名为 "box" 的所有元素（集合，需遍历）
var boxes = document.querySelectorAll(".box");
for (var i = 0; i < boxes.length; i++) {console.log(boxes[i].innerHTML); // 打印每个 .box 元素的内容
}// 3. 获取 name 为 "sex" 的单选框（常用于表单）
var radios = document.querySelectorAll('[name="sex"]');
for (var i = 0; i < radios.length; i++) {if (radios[i].checked) { // checked 为 true 表示选中console.log("选中的性别：" + radios[i].value);}
}
2. 元素属性设置：核心属性与注意事项
操作元素属性时，需注意 JS 关键字与 HTML 属性的对应关系：
| HTML 属性 | JS 中对应写法 | 作用 | 示例 |
|---|---|---|---|
| class | className | 设置元素的类名（因 class 是 JS 关键字，需用 className 替代） | box.className = "active"; |
| innerHTML | innerHTML | 设置/获取元素的 HTML 内容（含标签） | div.innerHTML = "<p>新内容</p>"; |
| value | value | 设置/获取表单元素（输入框、单选框等）的值 | input.value = "默认值"; |
| checked | checked | 设置/判断单选框、复选框是否选中 | radio.checked = true;（设为选中） |
关键提醒：尽量避免“DOM 嵌入”（即直接在 HTML 标签中写 onclick="xxx()"），这种方式会导致 HTML 与 JS 紧密耦合，不利于维护。
四、事件处理：绑定方式与事件冒泡
事件处理是交互逻辑的核心，需掌握不同绑定方式的区别，以及事件冒泡的原理与控制。
1. 事件绑定的 2 种方式：覆盖 vs 多播
方式 1：onclick 直接绑定（会覆盖）
特点：同一元素多次绑定同一事件，后绑定的会覆盖前绑定的，最终只有最后一个事件生效。
示例：
var btn = document.querySelector("#btn");
// 第一个事件：被覆盖，不生效
btn.onclick = function() {alert("第一个点击事件");
};
// 第二个事件：覆盖第一个，最终生效
btn.onclick = function() {alert("第二个点击事件");
};
方式 2：addEventListener 绑定（多播，不覆盖）
特点：同一元素多次绑定同一事件，所有事件按绑定顺序依次执行，不会覆盖（称为“多播事件委托”）。
示例：
var btn = document.querySelector("#btn");
// 第一个事件：正常执行
btn.addEventListener("click", function() {alert("第一个点击事件");
});
// 第二个事件：在第一个之后执行
btn.addEventListener("click", function() {alert("第二个点击事件");
});
2. 事件冒泡：从子元素到父元素的事件传播
原理
当元素触发事件（如点击）时，事件会从“最内层子元素”向“最外层父元素”逐级传播，这一过程称为“事件冒泡”。
示例场景：div 包裹 form，form 包裹按钮，三者均绑定点击事件：
<div id="parent"><form id="child"><button id="btn">点击</button></form>
</div><script>
window.onload = function() {// 按钮点击事件（最内层）document.querySelector("#btn").addEventListener("click", function() {alert("按钮事件");});// form 点击事件（中间层）document.querySelector("#child").addEventListener("click", function() {alert("form 事件");});// div 点击事件（最外层）document.querySelector("#parent").addEventListener("click", function() {alert("div 事件");});
};
</script>
执行顺序：点击按钮后，依次弹出“按钮事件”→“form 事件”→“div 事件”（从内到外传播）。
阻止事件冒泡
若需避免父元素事件触发，可通过事件对象的 stopPropagation() 方法阻止冒泡：
document.querySelector("#btn").addEventListener("click", function(e) {alert("按钮事件");e.stopPropagation(); // 阻止事件向上传播，父元素事件不再执行
});
五、JSON 转换：字符串与 JS 对象的互转
JSON 是前后端数据交互的常用格式，需掌握“字符串转对象”和“对象转字符串”的核心方法：
1. 字符串转 JS 对象（解析）
将 JSON 格式的字符串（值类型）转为 JS 对象（引用类型），才能访问其属性（如 pwd、act），有 2 种常用方法：
| 方法 | 语法 | 说明 |
|---|---|---|
| JSON.parse() | JSON.parse(jsonStr) | 推荐方法，安全且高效，专门用于解析 JSON 字符串 |
| eval() | eval('(' + jsonStr + ')') | 不推荐，eval 会执行字符串中的任意代码，有安全风险 |
示例：
// JSON 格式的字符串（值类型，无法直接访问属性）
var jsonStr = '{"act":"admin","pwd":"123456"}';// 1. JSON.parse() 解析（推荐）
var obj1 = JSON.parse(jsonStr);
console.log(obj1.act); // 打印：admin（可正常访问属性）// 2. eval() 解析（不推荐）
var obj2 = eval('(' + jsonStr + ')');
console.log(obj2.pwd); // 打印：123456
2. JS 对象转字符串（序列化）
将 JS 对象（引用类型）转为 JSON 字符串（值类型），用于数据传输（如接口请求），使用 JSON.stringify() 方法：
// JS 对象（引用类型）
var user = { name: "张三", age: 20 };// 转为 JSON 字符串
var jsonStr = JSON.stringify(user);
console.log(jsonStr); // 打印：{"name":"张三","age":20}（字符串类型）
六、核心注意事项：避免踩坑的关键规则
- JS 代码需写在 window.onload 中：确保 HTML 元素加载完成后再执行 JS，避免因元素未存在导致的报错；
- typeof 检测 null 为 object：这是 JS 设计遗留问题，需特殊记忆，判断 null 应直接用
变量 === null； - for…in 遍历对象需过滤原型属性：若不想遍历对象原型链上的属性，需加判断
if (obj.hasOwnProperty(key))； - 事件绑定优先用 addEventListener：避免 onclick 绑定的覆盖问题，且支持事件捕获/冒泡的控制。
掌握以上知识点，可应对 JS 基础开发与面试中的大部分场景。建议结合实战代码手动练习，尤其是 DOM 操作与事件处理，通过“写代码→调试→优化”的流程强化理解，避免只记理论不落地。