JSDOM操作与事件专题测试

18 题 40 分钟难度：

考察知识点

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 等

单选题

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

document.getElementsByClassName('active')

document.querySelector('.active')

document.querySelectorAll('.active')

document.getElementById('active')

单选题

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

HTMLElement

HTMLCollection

NodeList

Array

单选题

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

document.createElement()

document.appendChild()

document.cloneNode()

document.createTextNode()

单选题

要将一个新创建的元素 node 添加到父元素 parent 的末尾，应该使用哪个方法？

parent.insertBefore(node)

parent.appendChild(node)

parent.prepend(node)

parent.addNode(node)

单选题

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

element.style.color = 'red'

element.color = 'red'

element.styles.color = 'red'

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

单选题

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

button.onClick = handleClick

button.addEventListener('click', handleClick)

button.addEvent('click', handleClick)

button.click = handleClick

单选题

以下哪个事件在用户修改输入框内容时实时触发？

change

input

submit

focus

单选题

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

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

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

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

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

判断题

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

对

错

判断题

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

对

错

判断题

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

对

错

判断题

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

对

错

填空题

键盘事件对象中，用于获取按下按键的字符编码的属性是 _____________，用于获取按键名称（如 "Enter"、"Escape"）的属性是 _________。

填空题

要获取元素的父元素，使用 __________________ 属性；要获取元素的所有子元素节点，使用 ________________ 属性。

填空题

事件冒泡的传播方向是从 ______ 向 ______ 传播，直到到达 ________ 或 window 对象。

多选题

使用事件委托时，以下哪些方式可以判断触发事件的子元素？

event.target.tagName

event.target.classList.contains()

event.target.matches('selector')

event.currentTarget

多选题

以下哪些事件不适合使用事件委托？

click

focus

blur

mouseover

多选题

以下哪些事件属于表单相关事件？

submit

reset

focus

blur

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

想参加完整模拟考试？

小程序提供计时考试、自动评分和详细解析

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