全部学科

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 道配套习题

DOM基础与浏览器API专题

专题说明

本专题系统讲解DOM操作和浏览器API的核心知识，包括事件流机制、元素选择与遍历、节点增删改查、样式操作、本地存储、网络请求等内容。

学习目标

理解DOM事件流的三个阶段（捕获、目标、冒泡）
掌握事件处理、事件委托和事件对象的使用
掌握DOM元素选择器和遍历方法
掌握节点创建、插入、替换、删除操作
掌握classList样式操作和style属性操作
掌握localStorage/sessionStorage/Cookie的使用
掌握Fetch API和网络请求处理

学习内容

DOM事件流：捕获阶段、目标阶段、冒泡阶段
事件处理：addEventListener、事件对象、事件委托
DOM选择器：querySelector、getElementById、getElementsByClassName
节点操作：createElement、appendChild、insertBefore、replaceChild
样式操作：classList方法、style属性、CSS变量
本地存储：localStorage、sessionStorage、Cookie
网络请求：Fetch API、AbortController、Response处理
浏览器BOM：window对象、location、history、screen

学习建议

先理解事件流机制，再学习事件委托等高级应用
区分静态集合（NodeList）和动态集合（HTMLCollection）的差异
注意节点操作方法的返回值和副作用
Fetch API结合Promise使用，理解错误处理机制
存储API需考虑容量限制和安全问题

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

📝 配套习题（20 题）

1

单选题

DOM事件流的正确顺序是什么？

A

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

B

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

C

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

D

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

2

判断题

判断：事件冒泡是指事件从目标元素开始，逐级向上传播到父元素的过程。

A

对

B

错

3

单选题

addEventListener方法的第三个参数为true时，事件处理函数在哪个阶段执行？

A

事件冒泡阶段

B

目标阶段

C

事件捕获阶段

D

所有阶段

4

多选题

以下哪些是事件对象(Event)的常用方法或属性？

A

e.target - 触发事件的元素

B

e.currentTarget - 绑定事件的元素

C

e.stopPropagation() - 阻止事件冒泡

D

e.preventDefault() - 阻止默认行为

E

e.stopDefault() - 阻止默认行为

5

判断题

判断：调用e.preventDefault()会阻止事件的默认行为，同时也会阻止事件的冒泡传播。

A

对

B

错

6

单选题

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

A

在每个子元素上绑定事件

B

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

C

利用事件捕获，阻止事件到达子元素

D

创建自定义事件并手动触发

7

单选题

querySelector和querySelectorAll方法的区别是什么？

A

querySelector返回单个元素，querySelectorAll返回所有匹配元素的集合

B

querySelector返回数组，querySelectorAll返回单个元素

C

querySelector只支持ID选择器，querySelectorAll支持所有选择器

D

两者功能完全相同

8

判断题

判断：document.getElementById()方法如果没有找到匹配元素，会返回null。

A

对

B

错

9

单选题

querySelectorAll返回的NodeList与getElementsByClassName返回的HTMLCollection的主要区别是什么？

A

NodeList是动态集合，HTMLCollection是静态集合

B

NodeList是静态集合，HTMLCollection是动态集合

C

两者都是动态集合

D

两者都是静态集合

10

判断题

判断：classList.toggle('active')方法会在元素有active类时移除它，没有时添加它。

A

对

B

错

11

多选题

classList对象提供以下哪些方法？

A

add() - 添加类名

B

remove() - 移除类名

C

toggle() - 切换类名

D

contains() - 检查类名是否存在

E

append() -追加类名

12

填空题

获取浏览器视口宽度和高度使用__________和___________属性，获取屏幕尺寸使用____________和_____________属性。

13

判断题

判断：Cookie数据会在每次HTTP请求时自动发送到服务器。

A

对

B

错

14

填空题

fetch API中，______选项设置请求方法，_______选项设置请求头，______选项设置请求体，___________选项控制Cookie发送策略。

15

单选题

如何取消一个正在进行的fetch请求？

A

fetch.abort()

B

使用AbortController和signal选项

C

设置timeout选项

D

调用Promise.reject()

16

判断题

判断：appendChild方法将节点添加到父元素的子节点列表末尾。

A

对

B

错

17

多选题

A

元素节点(Element)

B

文本节点(Text)

C

注释节点(Comment)

D

样式节点(Style)

E

文档节点(Document)

18

单选题

A

true克隆节点本身，false不克隆

B

true深拷贝包含子节点，false浅拷贝只克隆节点本身

C

true克隆属性，false不克隆属性

D

true克隆事件绑定，false不克隆事件

19

多选题

A

nodeType - 节点类型数值

B

nodeName - 节点名称

C

nodeValue - 节点值

D

parentNode - 父节点

E

childNodes - 子节点列表

20

多选题

A

replaceChild用newChild替换oldChild

B

replaceChild返回被替换的oldChild节点

C

insertBefore将newNode插入到refNode之前

D

insertBefore如果refNode为null则添加到末尾

E

insertBefore会删除refNode

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

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

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

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