全部学科

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Web前端

TypeScript vue CSS HTML javascript npm pinia vite

通用技术

redis git docker nginx mysql zookeeper rabbitmq

GO后端

golang gorm gin

Python全栈

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

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

A

对

B

错

2

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

A

对

B

错

3

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

A

对

B

错

4

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

A

对

B

错

5

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

A

对

B

错

6

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

A

对

B

错

单选题

7

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

A

在每个子元素上绑定事件

B

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

C

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

D

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

8

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

A

fetch.abort()

B

使用AbortController和signal选项

C

设置timeout选项

D

调用Promise.reject()

9

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

A

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

B

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

C

两者都是动态集合

D

两者都是静态集合

10

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

A

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

B

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

C

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

D

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

11

element.cloneNode(true)和element.cloneNode()或element.cloneNode(false)的区别是什么？

A

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

B

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

C

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

D

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

12

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

A

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

B

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

C

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

D

两者功能完全相同

13

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

A

事件冒泡阶段

B

目标阶段

C

事件捕获阶段

D

所有阶段

多选题

14

以下哪些是DOM节点类型？

A

元素节点(Element)

B

文本节点(Text)

C

注释节点(Comment)

D

样式节点(Style)

E

文档节点(Document)

15

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

A

e.target - 触发事件的元素

B

e.currentTarget - 绑定事件的元素

C

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

D

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

E

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

16

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

A

add() - 添加类名

B

remove() - 移除类名

C

toggle() - 切换类名

D

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

E

append() -追加类名

17

以下哪些是DOM节点的属性？

A

nodeType - 节点类型数值

B

nodeName - 节点名称

C

nodeValue - 节点值

D

parentNode - 父节点

E

childNodes - 子节点列表

18

parent.replaceChild(newChild, oldChild)和parent.insertBefore(newNode, refNode)的作用是什么？

A

replaceChild用newChild替换oldChild

B

replaceChild返回被替换的oldChild节点

C

insertBefore将newNode插入到refNode之前

D

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

E

insertBefore会删除refNode

填空题

19

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

20

获取浏览器视口宽度和高度使用____________和____________属性，获取屏幕尺寸使用____________和screen.height属性。

参考答案

1.正确 2.正确 3.正确 4.正确 5.错误 6.正确 7.B 8.B 9.B 10.B 11.B 12.A 13.C 14.A;B;C;E 15.A;B;C;D 16.A;B;C;D 17.A;B;C;D;E 18.A;B;C;D 19.method;headers;body 20.innerWidth;innerHeight;screen.width

想在手机上练习这套专题？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码