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}（字符串类型）

六、核心注意事项：避免踩坑的关键规则

1. JS 代码需写在 window.onload 中：确保 HTML 元素加载完成后再执行 JS，避免因元素未存在导致的报错；
2. typeof 检测 null 为 object ：这是 JS 设计遗留问题，需特殊记忆，判断 null 应直接用 变量 === null；
3. for...in 遍历对象需过滤原型属性 ：若不想遍历对象原型链上的属性，需加判断 if (obj.hasOwnProperty(key))；
4. 事件绑定优先用 addEventListener：避免 onclick 绑定的覆盖问题，且支持事件捕获/冒泡的控制。

掌握以上知识点，可应对 JS 基础开发与面试中的大部分场景。建议结合实战代码手动练习，尤其是 DOM 操作与事件处理，通过"写代码→调试→优化"的流程强化理解，避免只记理论不落地。