JavaScript 前端基础笔记（网页交互核心）

.Cnn2026-04-19 22:43

本文整理JavaScript核心基础知识点，涵盖引入方式、核心语法、DOM操作、事件监听、模块化等内容，适合前端新手快速掌握

### 文章目录

  • [@[toc]](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [一、JavaScript 核心作用](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [二、JS 引入方式](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [2.1 内部脚本](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [2.2 外部脚本](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [三、基础输出方式](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [四、JavaScript 核心语法](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.1 变量和常量](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.2 数据类型](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [基本数据类型](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.3 模板字符串](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.4 函数](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.4.1 具名函数](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.4.2 匿名函数](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.5 自定义对象](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [定义格式](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [调用格式](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4.6 JSON](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [概念](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [核心转换方法](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [格式特点](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [五、DOM 操作](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [5.1 概念](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [5.2 DOM 作用](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [5.3 DOM 操作核心思想](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [5.4 DOM 操作步骤](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [5.5 获取DOM元素](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [六、事件监听](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [6.1 基础概念](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [6.2 事件监听语法](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [6.3 事件监听三要素](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [6.4 常见事件类型](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [1. 鼠标事件](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [2. 键盘事件](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [3. 焦点事件（表单元素专用）](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [4. 表单事件](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [七、JS 程序优化与模块化](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [7.1 JS 模块化](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [1. 导出模块（export）](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)
  • [2. 引入模块（import）](#文章目录 @[toc] 一、JavaScript 核心作用 二、JS 引入方式 2.1 内部脚本 2.2 外部脚本 三、基础输出方式 四、JavaScript 核心语法 4.1 变量和常量 4.2 数据类型 基本数据类型 4.3 模板字符串 4.4 函数 4.4.1 具名函数 4.4.2 匿名函数 4.5 自定义对象 定义格式 调用格式 4.6 JSON 概念 核心转换方法 格式特点 五、DOM 操作 5.1 概念 5.2 DOM 作用 5.3 DOM 操作核心思想 5.4 DOM 操作步骤 5.5 获取DOM元素 六、事件监听 6.1 基础概念 6.2 事件监听语法 6.3 事件监听三要素 6.4 常见事件类型 1. 鼠标事件 2. 键盘事件 3. 焦点事件（表单元素专用） 4. 表单事件 七、JS 程序优化与模块化 7.1 JS 模块化 1. 导出模块（export） 2. 引入模块（import）)

一、JavaScript 核心作用

负责网页的行为（交互效果），是前端三大核心技术（HTML结构 + CSS样式 + JS行为）之一。

二、JS 引入方式

2.1 内部脚本

  • 将JS代码直接定义在HTML页面中
  • JS代码必须包裹在 <script></script> 标签之间
  • HTML文档中可在任意位置 放置任意数量的<script>标签
  • 最佳实践 ：脚本置于<body>底部，可优化页面显示速度

2.2 外部脚本

  • 将JS代码写在独立的.js外部文件中
  • 通过<script>标签的src属性引入到HTML页面

三、基础输出方式

JavaScript 提供三种常用输出方式：

  1. alert() ：输出内容到浏览器弹出框
  2. console.log() ：输出内容到控制台（开发调试最常用）
  3. document.write() ：输出内容到页面body区域（不常用）

四、JavaScript 核心语法

4.1 变量和常量

JS是弱类型语言，变量可以存放任意类型的值

  • let ：声明变量（值可修改）
  • const ：声明常量（值不可修改）

4.2 数据类型

基本数据类型
类型 说明
number 数字（整数、小数、NaN：Not a Number）
boolean 布尔值（true / false）
null 空值
undefined 未初始化，声明变量未赋值时的默认值
string 字符串（单引号/双引号/反引号均可，推荐单引号）

4.3 模板字符串

  • 使用反引号 ````` 定义字符串
  • 变量拼接：通过${变量名}嵌入内容
javascript 复制代码 
let name = "张三";
console.log(`你好，我是${name}`);

4.4 函数

JavaScript函数通过function关键字定义，分为具名函数 和匿名函数。

4.4.1 具名函数

定义语法：

javascript 复制代码 
function functionName(参数1,参数2,...){
    //执行代码
}

调用语法：函数名称(实际参数列表)

javascript 复制代码 
let result = add(10, 20);
alert(result);

注意：形参、返回值不需要指定类型；调用时参数个数建议与形参个数一致

4.4.2 匿名函数

没有名称的函数，通过函数表达式 和箭头函数定义，定义后通过变量调用。

  1. 函数表达式
javascript 复制代码 
let add = function(a, b){
    return a + b;
}
  1. 箭头函数
javascript 复制代码 
let add = (a, b) => {
    return a + b;
}

重点：箭头函数中this不指向当前对象，指向当前对象的父级

调用示例：

javascript 复制代码 
let result = add(10, 20);
alert(result);

4.5 自定义对象

定义格式
javascript 复制代码 
let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    方法名: function(形参列表){ }
    // 注意：定义对象方法时，尽量不要使用箭头函数（this指向问题）
}
调用格式
javascript 复制代码 
对象名.属性名;   // 获取/修改属性
对象名.方法名(); // 调用对象方法

示例：

javascript 复制代码 
console.log(user.name);
user.sing();

4.6 JSON

概念

JSON（JavaScript Object Notation）：JavaScript对象标记法，是一种轻量级数据格式，多用于网络数据传输，语法简单、层级结构鲜明。

核心转换方法
方法 作用
JSON.stringify() JS对象 → JSON字符串
JSON.parse() JSON字符串 → JS对象
格式特点
  • JSON的key必须使用双引号包裹
  • JSON仅用于存储数据，无函数方法

示例：

javascript 复制代码 
// JS对象
let person = {
    name: '张三',
    age : 18,
    sex : '男'
}

// JS对象 -> JSON字符串
alert(JSON.stringify(person));

// JSON字符串 -> JS对象
let personJson = '{"name":"张三","age":18,"sex":"男"}';
alert(JSON.parse(personJson).name);

五、DOM 操作

5.1 概念

DOM（Document Object Model）：文档对象模型

将标记语言的各个组成部分封装为对应的对象：

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

5.2 DOM 作用

JavaScript通过DOM，可以对HTML实现以下操作：

  • 改变HTML元素内容
  • 改变HTML元素的样式（CSS）
  • 对HTML DOM事件做出反应
  • 添加和删除HTML元素

5.3 DOM 操作核心思想

将网页中所有的元素当做对象来处理（标签的所有属性对应对象的属性）。

5.4 DOM 操作步骤

  1. 获取要操作的 DOM 元素对象
  2. 操作 DOM 对象的属性或方法

5.5 获取DOM元素

  1. 获取单个元素 ：document.querySelector('CSS选择器')（匹配第一个元素）
  2. 获取多个元素 ：document.querySelectorAll('CSS选择器')（匹配所有元素）

注意：querySelectorAll返回NodeList节点集合，是伪数组（有长度、索引，无完整数组方法）

示例：

html 复制代码 
<h1 id="title">111</h1>
<h1>222</h1>
<h1>333</h1>

<script>
    // 修改第一个h1标签的文本内容
    let h1 = document.querySelector('#title');
    h1.innerHTML = '修改后的文本内容';

    let hs = document.querySelectorAll('h1');
    hs[0].innerHTML = '修改后的文本内容2';
</script>

六、事件监听

6.1 基础概念

  • 事件：HTML元素上发生的动作（按钮点击、鼠标移入、键盘按键等）
  • 事件监听：JS监听事件触发，执行对应函数（也叫事件绑定/注册）

6.2 事件监听语法

标准语法（推荐）：

javascript 复制代码 
事件源.addEventListener('事件类型', 事件触发执行的函数);

早期写法：

javascript 复制代码 
事件源.on事件 = function() { ... }

区别：addEventListener可多次绑定同一事件；on方式多次绑定会覆盖

6.3 事件监听三要素

  1. 事件源：触发事件的DOM元素（需提前获取DOM对象）
  2. 事件类型 ：触发方式（如鼠标点击click）
  3. 执行函数：事件触发后运行的逻辑代码

示例：

javascript 复制代码 
// 1. 获取事件源（按钮元素）
const btn = document.querySelector('button');

// 2. 添加点击事件监听
btn.addEventListener('click', function() {
    console.log('按钮被点击了！');
});

6.4 常见事件类型

1. 鼠标事件
  • click：鼠标点击元素时触发
  • mouseenter：鼠标移入元素时触发（不冒泡）
2. 键盘事件
  • keydown：键盘按键按下时触发
  • keyup：键盘按键抬起时触发
3. 焦点事件（表单元素专用）
  • focus：元素获得焦点时触发
  • blur：元素失去焦点时触发
4. 表单事件
  • input：用户输入内容时实时触发
  • submit：表单提交时触发（默认会刷新页面，通常需要阻止默认行为）

七、JS 程序优化与模块化

7.1 JS 模块化

通过export和import实现代码模块化拆分，提升代码可维护性。

1. 导出模块（export）
javascript 复制代码 
// 工具类文件 utils.js
export function printlog(msg){
    console.log(msg);
}
2. 引入模块（import）
html 复制代码 
<!-- 引入时必须添加 type="module" -->
<script src="js/eventDemo.js" type="module"></script>
javascript 复制代码 
// 导入模块方法
import { printlog } from "./utils.js";
相关推荐
醉酒的李白、2 小时前
Vue3 组件通信本质：Props 下发，Emits 回传
前端·javascript·vue.js
anOnion2 小时前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
NotFound4862 小时前
实战分享Python爬虫，如何实现高效解析 Web of Science 文献数据并导出 CSV
前端·爬虫·python
九成宫2 小时前
IT项目管理期末复习——Chapter 10 项目沟通管理
笔记·项目管理·软件工程
23471021273 小时前
4.14 学习笔记
笔记·python·学习
徐小夕3 小时前
PDF无限制预览！Jit-Viewer V1.5.0开源文档预览神器正式发布
前端·vue.js·github
WangJunXiang63 小时前
Haproxy搭建Web群集
前端
吴声子夜歌3 小时前
Vue.js——自定义指令
前端·vue.js·flutter
邪修king3 小时前
UE5 零基础入门第三弹: 碰撞与触发交互，解锁场景机关与蓝图封装(高娱乐性学习)
学习·ue5·交互
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free04AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析05零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）06从零部署 Hermes Agent：一只"会成长的 AI 马"保姆级安装教程07GPT-6发布日深度解析-Symphony架构200万Token实战08从旧版到 v0.20.5：Ollama 升级避坑全流程（附命令复制即用）09智元机器人发布4款新品，2026营收目标5亿元10从限购到畅通：GLM-5.1 Coding Plan接入攻略