JSDOM操作与事件专题测试
考察知识点
- DOM选择器：querySelector、querySelectorAll、getElementById、getElementsByClassName 等选择器方法的使用与区别
- DOM节点操作：createElement、appendChild、insertBefore、removeChild、cloneNode 等节点操作方法
- DOM样式操作：style 属性、className、classList、getComputedStyle 等样式操作方式
- 事件监听：addEventListener、removeEventListener、事件监听器配置（capture、once、passive）
- 事件对象：target、currentTarget、preventDefault、stopPropagation 等事件对象属性与方法
- 事件冒泡与捕获：事件传播三阶段、阻止冒泡、捕获阶段监听
- 事件委托：事件委托原理、适用场景、target 判断方式
- 常见事件类型：click、input、change、keydown、keyup、focus、blur、submit、DOMContentLoaded 等
💡 参考答案在文末
判断题
1
element.remove() 方法可以直接将元素从 DOM 中移除，不需要通过父元素操作。
2
所有 DOM 事件都会经历捕获和冒泡两个阶段。
3
keydown 事件在按键被按下时触发，keyup 事件在按键被释放时触发。
4
element.classList.add('new-class') 会为元素添加一个新类名，不会覆盖已有的类名。
单选题
5
要通过 JavaScript 设置元素的内联样式 color 为 red，正确的写法是？
6
document.querySelectorAll('div.box') 返回的结果类型是什么？
7
以下哪个事件在用户修改输入框内容时实时触发？
8
DOM 事件传播的三个阶段顺序是？
9
以下哪个方法可以获取页面中第一个 class 为 "active" 的元素？
10
要将一个新创建的元素 node 添加到父元素 parent 的末尾，应该使用哪个方法？
11
以下哪个方法用于创建一个新的 DOM 元素节点？
12
以下哪种方式可以为按钮添加 click 事件监听器？
多选题
13
使用事件委托时，以下哪些方式可以判断触发事件的子元素？
14
以下哪些事件不适合使用事件委托？
15
以下哪些事件属于表单相关事件？
填空题
16
键盘事件对象中，用于获取按下按键的字符编码的属性是 ____________，用于获取按键名称（如 "Enter"、"Escape"）的属性是 ____________。
17
要获取元素的父元素，使用 ____________ 属性；要获取元素的所有子元素节点，使用 ____________ 属性。
18
事件冒泡的传播方向是从 ____________ 向 ____________ 传播，直到到达 ____________ 或 window 对象。
参考答案
1.正确
2.错误
3.正确
4.正确
5.A
6.C
7.B
8.B
9.B
10.B
11.A
12.addEventListener 是标准的事件监听方法，第一个参数是事件类型（不带 on），第二个参数是事件处理函数。onclick（小写）是传统的事件属性绑定方式。
13.A;B;C
14.B;C
15.A;B;C;D
16.event.keyCode;event.key
17.element.parentNode;element.children
18.子元素;父元素;document
想在手机上练习这套试卷？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码
