Web APIs-Day3

最新推荐文章于 2025-08-02 13:40:10 发布

2401_84433974

最新推荐文章于 2025-08-02 13:40:10 发布

阅读量534

点赞数 22

CC 4.0 BY-SA版权

分类专栏：程序员文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/2401_84433974/article/details/138322167

程序员专栏收录该内容

191 篇文章

订阅专栏

本文详细介绍了DOM的核心概念，包括元素创建、增删改查操作，重点讲解了事件监听、事件流模型（捕获、冒泡）、事件对象的使用以及解决兼容性问题的方法。涵盖了removeChild方法、动态生成元素、事件注册与解绑，以及鼠标事件案例的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三、DOM核心的总结
- 3.1 创建元素
3.2 增
3.3 删
3.4 改
3.5 查（获取）
3.6 属性操作
3.7 事件操作(重点)
四、事件高级
- 4.1 注册事件的两种方式
4.2 事件监听
4.3 事件监听兼容性解决方案
4.4 删除事件（解绑事件）
4.5 删除事件的兼容性解决方案（解绑事件）
4.6 DOM事件流
- 4.6.1 DOM事件流
- 4.6.1.1 事件冒泡
4.6.1.2 事件捕获
4.6.2事件对象
- 4.6.2.1什么是事件对象
4.6.2.2 事件对象的使用
4.6.2.3 事件对象的兼容性处理
4.6.2.4 事件对象的属性和方法
4.6.2.5 e.target 和 this的区别
4.6.3阻止默认行为
4.6.4 阻止事件冒泡
4.6.5 事件委托
- 4.6.5.1什么是事件委托
4.6.5.2 事件委托的原理
4.6.5.3 事件委托的作用
4.7 常用鼠标事件
- 4.7.1 案例：禁止选中文字和禁止右键菜单
4.7.2 鼠标事件对象
4.7.3 获取鼠标在页面中的坐标
4.7.4 案例：跟随鼠标的天使
结束

前言

=================================================================

提示：这里可以添加本文要记录的大概内容：

学习目标：

能够使用removeChild()方法删除节点

能够完成动态生成表格案例

能够使用传统方式和监听方式给元素注册事件

能够说出事件流执行的三个阶段

能够在事件处理函数中获取事件对象

能够使用事件对象取消默认行为

能够使用事件对象阻止事件冒泡

能够使用事件对象获取鼠标的位置

能够完成跟随鼠标的天使案例

提示：以下是本篇文章正文内容，下面案例可供参考

一、节点操作

=====================================================================

1.1 删除节点

在这里插入图片描述

代码如下（示例）：

删除

熊大
熊二
光头强
注：removeChild(child),返回的是删除的那个节点；

1.2 案例：删除留言

代码如下（示例）：

发布
1.3 复制克隆节点
1111
2
3
1.4 案例：动态生成表格

代码如下（示例）：

二、创建元素的三种方式

==========================================================================

2.1 innerTHML和createElement效率对比

innerHTML字符串拼接方式（效率低）

createElement方式（效率一般）

innerHTML数组方式（效率高）

注：innerHTML在不使用字符串拼接的方式（用数组接收元素），执行效率高。但createElement（）结构清晰。

三、DOM核心的总结

=========================================================================

3.1 创建元素

1、document.createElement

2、innerHTML

3、doucumen.write()

注：3存在页面重绘的问题，不推荐使用

3.2 增

1、appendChild（）；

2、insertBefore（）；

3.3 删

1、removeChild（）；

3.4 改

主要修改Dom元素的内容、属性、表单值、样式等

1、修改元素的属性：src、title、alt等

2、修改元素的内容：innerHTML、innerText

3、修改表单元素：value、type、disabled、selected；

修改元素样式：style、className；

3.5 查（获取）

主要是回去查询DOM元素

1、DOM提供的传统方法：getElementById（）、getElementByTagName（）

2、H5新增方法（推荐使用）：quserySelector（）、quserySelectorAll（）；

3、利用父、子、兄节点关系获取：父：parentNode；

子：children; 兄：（上一个兄弟）nextElementSibling、（下一个兄弟）previousElementSibling；

3.6 属性操作

1、设置自定义属性：setAttribute（‘属性名’，属性值）;

2、获取属性值：getAttribue（‘属性名’）；

3、移除属性：removeAttribute（‘属性名’）；

3.7 事件操作(重点)

四、事件高级

=====================================================================

4.1 注册事件的两种方式

4.2 事件监听

**addEventListener()事件监听（IE9以后支持）

注：addEventListener（）中的第三个参数是布尔型变量默认是flase，如果输入true，是阻止事件冒泡的意思（后面即将学习stopProtagation()）;**

attachEventListener()事件监听（IE9以后支持）

代码如下（示例）：

传统注册事件

方法监听注册事件

ie9 attachEvent

注：主要记住传统的用on绑定事件和addElementListener（）两种方式注册侦听事件；

4.3 事件监听兼容性解决方案

封装一个函数，函数中判断浏览器的类型：

4.4 删除事件（解绑事件）

1

2

3

注：记住1、传统的解绑方式给鼠标点击事件赋值null；2、removeEventListener（）（常用）；

4.5 删除事件的兼容性解决方案（解绑事件）

4.6 DOM事件流

 4.6.1 DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。

当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

那么是先执行父元素的单击事件，还是先执行div的单击事件？？？

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。

当时的2大浏览器霸主谁也不服谁！

IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。

Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。

江湖纷争，武林盟主也脑壳疼！！！

最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —–— 先捕获再冒泡。

现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

DOM 事件流会经历3个阶段：
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

4.6.1.1 事件冒泡

代码如下（示例）：

son盒子