全部学科

Python全栈

GO后端

golang gorm gin

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Web前端

TypeScript vue CSS HTML javascript pinia vite

通用技术

redis git docker nginx mysql zookeeper rabbitmq

NodeJS全栈

小程序首页

📝 1 篇文章 20 道配套习题

JS DOM操作与事件

专题说明

本专题系统讲解JavaScript DOM操作与事件处理的核心知识，涵盖元素选择、节点增删改、样式操作、事件监听与处理、事件传播机制、事件委托等实用技能。

学习目标

掌握DOM选择器的使用方法
理解DOM节点的创建、插入、删除、替换操作
学会通过JavaScript操作元素样式
掌握事件监听的添加与移除
理解事件对象及其常用属性
掌握事件冒泡与捕获机制
学会使用事件委托优化事件处理

学习内容

本专题涵盖以下核心知识点：

DOM选择器：querySelector、querySelectorAll、getElementById、getElementsByClassName等
DOM节点操作：createElement、appendChild、insertBefore、removeChild、cloneNode等
DOM样式操作：style属性、className、classList、getComputedStyle等
事件监听：addEventListener、removeEventListener、事件绑定方式对比
事件对象：target、currentTarget、preventDefault、stopPropagation等
常见事件类型：click、input、change、keydown、keyup、focus、blur等
事件冒泡与捕获：事件传播三阶段、eventPhase、阻止传播
事件委托：委托原理、适用场景、实现方式

学习建议

先掌握DOM选择器，理解不同方法的返回类型差异
重点练习节点操作方法，注意参数顺序
区分style内联样式与getComputedStyle计算样式
理解target与currentTarget的区别，这是事件委托的关键
掌握事件传播机制，理解stopPropagation与preventDefault的作用
实践事件委托，优化动态元素的事件处理

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1

单选题

以下哪个方法可以获取页面中第一个 class 为 "active" 的元素？

A

document.getElementsByClassName('active')

B

document.querySelector('.active')

C

document.querySelectorAll('.active')

D

document.getElementById('active')

2

单选题

document.querySelectorAll('div.box') 返回的结果类型是什么？

A

HTMLElement

B

HTMLCollection

C

NodeList

D

Array

3

单选题

以下哪个方法用于创建一个新的 DOM 元素节点？

A

document.createElement()

B

document.appendChild()

C

document.cloneNode()

D

document.createTextNode()

4

判断题

element.remove() 方法可以直接将元素从 DOM 中移除，不需要通过父元素操作。

A

对

B

错

5

单选题

要通过 JavaScript 设置元素的内联样式 color 为 red，正确的写法是？

A

element.style.color = 'red'

B

element.color = 'red'

C

element.styles.color = 'red'

D

element.setAttribute('color', 'red')

6

判断题

element.classList.add('new-class') 会为元素添加一个新类名，不会覆盖已有的类名。

A

对

B

错

7

单选题

以下哪种方式可以为按钮添加 click 事件监听器？

A

button.onClick = handleClick

B

button.addEventListener('click', handleClick)

C

button.addEvent('click', handleClick)

D

button.click = handleClick

8

判断题

keydown 事件在按键被按下时触发，keyup 事件在按键被释放时触发。

A

对

B

错

9

单选题

事件对象的 target 属性和 currentTarget 属性有什么区别？

A

target 是绑定事件的元素，currentTarget 是触发事件的元素

B

target 是触发事件的元素，currentTarget 是绑定事件的元素

C

target 和 currentTarget 始终相同

D

target 是父元素，currentTarget 是子元素

10

单选题

以下哪个方法可以阻止表单的默认提交行为？

A

event.stopPropagation()

B

event.preventDefault()

C

event.stopImmediatePropagation()

D

event.cancelBubble = true

11

单选题

DOM 事件传播的三个阶段顺序是？

A

冒泡阶段 → 目标阶段 → 捕获阶段

B

捕获阶段 → 目标阶段 → 冒泡阶段

C

目标阶段 → 捕获阶段 → 冒泡阶段

D

捕获阶段 → 冒泡阶段 → 目标阶段

12

判断题

所有 DOM 事件都会经历捕获和冒泡两个阶段。

A

对

B

错

13

单选题

事件委托（Event Delegation）的核心原理是什么？

A

在每个子元素上单独绑定事件

B

利用事件冒泡，在父元素上统一处理子元素的事件

C

使用捕获阶段监听事件

D

通过克隆节点传递事件

14

判断题

事件委托的优势之一是可以自动处理后续动态添加的子元素，无需重新绑定事件。

A

对

B

错

15

单选题

要将元素 newNode 插入到 parent 元素的 referenceNode 之前，正确的调用方式是？

A

parent.insertBefore(referenceNode, newNode)

B

parent.insertBefore(newNode, referenceNode)

C

parent.insertBefore(newNode, before: referenceNode)

D

referenceNode.insertBefore(newNode)

16

多选题

鼠标事件对象中，以下哪些属性可以获取鼠标位置信息？

A

clientX / clientY

B

pageX / pageY

C

offsetX / offsetY

D

screenX / screenY

17

单选题

要获取元素经过 CSS 计算后的最终样式值（包括继承的样式），应使用哪个方法？

A

element.style.backgroundColor

B

element.getAttribute('style')

C

window.getComputedStyle(element)

D

element.computedStyle

18

填空题

使用事件委托时，判断点击的是列表项 <li> 元素的代码是：if (____________.tagName === ______) 或使用 matches 方法：if (____________.matches('______'))。

19

单选题

event.stopImmediatePropagation() 与 event.stopPropagation() 的区别是什么？

A

前者阻止冒泡，后者阻止默认行为

B

前者阻止冒泡和同元素其他监听器，后者只阻止冒泡

C

前者只阻止同元素其他监听器，后者阻止冒泡

D

两者功能完全相同

20

多选题

同一元素上绑定了多个相同事件的监听器，以下说法正确的是？

A

按绑定顺序依次执行

B

可以通过 stopImmediatePropagation 阻止后续监听器

C

后绑定的监听器会覆盖先绑定的

D

使用 addEventListener 可以绑定多个不冲突的监听器

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验