JS - DOM 语法 | UonIra‘s Blog

type

Post

status

Published

date

slug

jsdom

summary

浏览器会把 HTML 解析成一棵 DOM 树，JavaScript 通过 DOM API 操作这棵树。

DOM 操作和事件处理

前端核心基础：浏览器会把 HTML 解析成一棵 DOM 树，JavaScript 通过 DOM API 操作这棵树。

1. 选择元素

2. 修改内容

3. 修改样式

4. 修改属性

5. 创建和插入元素

6. 删除元素

7. 事件监听

8. 常见事件类型

鼠标事件：

事件	说明
`click`	点击
`dblclick`	双击
`mouseenter`	鼠标移入
`mouseleave`	鼠标移出

键盘事件：

表单事件：

9. 事件委托

事件委托的核心思路：不给每个子元素单独绑定事件，而是把事件监听绑定在父元素上。利用事件冒泡机制，通过 event.target 判断实际触发事件的是哪个子元素。

事件委托的好处：

动态添加的元素也能响应事件。

只绑定一个监听器，性能更好。

代码更简洁。

10. localStorage 本地存储

重点总结

选择元素

修改内容

修改样式

创建插入

事件

事件委托：把事件绑定在父元素上，通过 event.target 判断实际触发事件的子元素。