当前位置： 首页 > news >正文

JavaScript 核心基础：类型检测、DOM 操作与事件处理

news 2025/8/16 6:46:58

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 中对应写法作用示例
classclassName设置元素的类名（因 class 是 JS 关键字，需用 className 替代）box.className = "active";
innerHTMLinnerHTML设置/获取元素的 HTML 内容（含标签）div.innerHTML = "<p>新内容</p>";
valuevalue设置/获取表单元素（输入框、单选框等）的值input.value = "默认值";
checkedchecked设置/判断单选框、复选框是否选中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 操作与事件处理，通过“写代码→调试→优化”的流程强化理解，避免只记理论不落地。

http://www.lryc.cn/news/621670.html

相关文章：

  • C++——分布式
  • 力扣 —— 二分查找
  • 【JAVA 基础入门】运算符详细介绍
  • 【软件设计模式】工厂方法与抽象工厂
  • 【办公类110-01】20250813 园园通新生分班（python+uibot）
  • 微信小程序 拖拽签章
  • GitHub 热榜项目 - 日榜(2025-08-15)
  • Redis核心架构
  • Java 大视界 -- Java 大数据在智能教育虚拟学习环境构建与学习体验增强中的应用（399）
  • electron之win/mac通知免打扰
  • 基本电子元件：碳膜电阻器
  • iOS App TF 上架多工具协作实战，一次高效的应用内测分发流程
  • iOS 性能监控实战，多工具协作完成全方位分析
  • 高并发场景下限流算法对比与实践指南
  • Day59--图论--47. 参加科学大会（卡码网），94. 城市间货物运输 I（卡码网）
  • 《人形机器人的觉醒：技术革命与碳基未来》——电子皮肤技术路线：压阻式电子皮肤及Stanford可拉伸纳米线网格
  • CSS Houdini 与 React 19 调度器：打造极致流畅的网页体验
  • Backblaze 2025 Q2硬盘故障率报告解读
  • 【机器人-基础知识】ROS1和ROS2对比
  • ABAQUS多边形骨料ITZ混凝土细观受压开裂论文复现
  • 云原生俱乐部-杂谈2
  • Linux入门(十九)定时备份数据库
  • Scrapy + Django爬虫可视化项目实战（二） 详细版
  • gnu arm toolchain中的arm-none-eabi-gdb.exe的使用方法?
  • 力扣hot100 | 普通数组 | 53. 最大子数组和、56. 合并区间、189. 轮转数组、238. 除自身以外数组的乘积、41. 缺失的第一个正数
  • ITM（仪器跟踪宏单元）是什么？
  • 崩溃大陆2 送修改器 PC/手机双端（Crashlands2）免安装中文版
  • C#WPF实战出真汁07--【系统设置】--菜品类型设置
  • go应用注册到kong
  • 网络通讯核心知识