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 必返回 “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
}

三、DOM 操作：元素获取与属性设置
DOM（文档对象模型）是 JS 操作 HTML 的桥梁，核心是“获取元素”与“操作元素”，需熟练掌握选择器与属性设置规则。

1. 元素获取：querySelector/querySelectorAll 万能方案
这两个方法是现代 JS 推荐的元素获取方式，可替代 ID 选择器、类选择器、标签选择器等所有传统方式，语法灵活：

// 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 属性的对应关系：

关键提醒：尽量避免“DOM 嵌入”（即直接在 HTML 标签中写 onclick="xxx()"），这种方式会导致 HTML 与 JS 紧密耦合，不利于维护。