js结构梳理 TODO

js 核心主要有3大部分组成，分别是：ECMAScript、DOM、BOM

• ECMAScript： 是 js 的核心， 提供了 js 的基本语法， 数据类型， 运算符， 语句， 函数， 对象， 类等
• DOM： 是 js 操作 html 的核心， 提供了 js 操作 html 的 api
• BOM： 是 js 操作浏览器的核心， 提供了 js 操作浏览器的 api

1. ECMAScript

1.1. 基本语法(变量声明、运算符、流程控制等)

1.2. 数据类型

1.3. 函数与作用域(函数声明、闭包、参数传递、作用域链等)

1.4. 面向对象编程(类、继承、封装等)

2. DOM (document) 文档对象模型

2.1. 通过节点（Node）模型实现页面元素的增删改查‌

• 增
  • createElement 新建元素
  • appendChild 添加子元素
  • insertBefore 插入元素到父元素
  • insertAdjacentHTML 插入元素到目标元素‌任意位置
• 删
  • removeChild
  • remove
  • removeAttribute
  • empty
• 改
  • setAttribute
  • innerHTML
  • textContent
• 查
  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • querySelector
  • querySelectorAll

2.2. 支持事件处理（如点击、表单提交等交互行为）

• 事件监听
  • addEventListener
  • removeEventListener
• 自定义事件
  • Event
  • CustomEvent

2.3. 动态修改页面内容及样式‌

• 样式操作
  • style
  • className
  • classList
  • getComputedStyle
• 内容操作
  • innerHTML
  • textContent
  • createTextNode

3. BOM 浏览器对象模型

3.1. 浏览器窗口的操作 Window（如打开新窗口、调整大小、移动位置等）

• open 打开新窗口

  window.open(url, target, features);

  • target 目标窗口名称 默认_blank（新窗口打开）， _self 当前窗口打开
  • features 字符串，窗口特征， 如 width, height
• close 关闭窗口
• resizeTo 调整窗口大小
• moveTo 移动窗口位置
• scrollTo 滚动窗口位置

3.2. 浏览器的地址栏Location （如获取当前 URL、修改 URL 等）

• href 获取当前 URL
• search 获取 URL 查询字符串
• hash 获取 URL 哈希值
• reload() 刷新页面
• replace() 替换当前 URL， 不记录历史
• assign() 跳转到新 URL， 记录历史

3.3. 浏览器的历史History （如前进、后退、刷新等）

• back() 后退
• forward() 前进
• go() 跳转
• length 获取历史记录长度

3.4. 浏览器的网络请求 http fetch（如发送 HTTP 请求、处理响应等）

• XMLHttpRequest
• fetch

3.5. 浏览器的存储（如本地存储、会话存储等）

• localStorage
• sessionStorage
• cookie

3.6. 实现弹窗控制、屏幕尺寸获取等功能‌

• 弹窗控制
  • alert 弹出警告框
  • confirm 弹出确认框
  • prompt 弹出输入框
• 屏幕尺寸获取
  • window.innerWidth
  • window.innerHeight
  • window.outerWidth