Free Practice Quiz Question List

6 The DOM and Browser Events Online Quiz Questions

Use this free practice quiz with 20 questions to review 6 The DOM and Browser Events, test your knowledge, and prepare for your next test or exam.

20 questions

True or false

1 point

True or false: If you call document.querySelectorAll(), the returned collection is static, so it does not update automatically when the document later changes.

A
True
B
False

Written response

1 point

Which DOM method creates a new element that JavaScript can later insert into the document?

True or false

1 point

True or false: Adding defer to the example’s script lets the browser finish parsing the document before the script runs its element selectors.

A
True
B
False

Written response

1 point

An event listener needs to identify the object whose listener is currently running. Which event object property provides that information?

Choose one

1 point

A control should switch the CSS class selected on an element: add it when absent and remove it when present. Which expression does this?

A
element.className.toggle("selected")
B
element.classList.toggle("selected")
C
element.toggleClass("selected")
D
element.classList.replace("selected")

Choose one

1 point

A page variant may not contain an element matching #notice. What should code using document.querySelector("#notice") account for before trying to update the result?

A
It returns an empty static collection.
B
It creates a matching element automatically.
C
It returns null.
D
It throws an error whenever a selector has no match.

Choose one

1 point

A task form should add an item whether the user activates its submit button or submits from the keyboard. Which event should the handler listen for?

A
Listen only for clicks on the Add task button.
B
Listen for the form's submit event.
C
Listen only for key presses on the input.
D
Listen for changes to the task list.

True or false

1 point

True or false: When displaying user-supplied text, assigning it to textContent treats it as text rather than parsing it as HTML markup.

A
True
B
False

Choose all

1 point

A list has one click listener for its nested Remove buttons. Which statements correctly describe how this event-delegation approach can work? Select all that apply.

A
A click on a nested button can reach a listener on an ancestor list because clicks bubble.
B
A handler can use closest() to find a matching button related to the event target.
C
Every event bubbles, so delegation works identically for all event types.
D
A parent listener receives a descendant's click only if the descendant is removed first.

Fill in the blank

1 point

For an event that bubbles, it travels toward its target during the phase, runs target listeners at the target, and then travels back up through ancestors during the phase.

Fill in the blank

1 point

Complete each statement. For a cancelable event, event.preventDefault() but does not stop propagation. event.stopPropagation() but does not cancel the default browser action.

Choose all

1 point

In the example, what happens after the form handler receives a nonempty task? Select all that apply.

A
It creates a list item and appends it to the task list.
B
It resets the form after adding the task.
C
It allows the browser's normal form navigation to occur.
D
It focuses the task input after adding the task.

Open ended

1 point

In the task-list example, what happens when the user submits an input containing only whitespace? Explain why no task item is added.

Choose one

1 point

An application displays text supplied by a user. Which DOM update is recommended to show the value as text rather than parse it as markup?

A
Set the element's innerHTML to the supplied value.
B
Set the element's textContent to the supplied value.
C
Pass the supplied value to document.createElement().
D
Add the supplied value as a CSS class with classList.add().

Choose one

1 point

A script calls document.querySelectorAll(".notice") when no elements match. Later, it adds an element with class notice. What should the script expect from the collection returned by the original call?

A
The collection is static, so later matching elements are not added to it.
B
The collection is live, so it automatically includes later matching elements.
C
The result is null because the selector initially matches no elements.
D
The call returns only the first matching element.

Choose one

1 point

A task list receives new remove buttons as tasks are added. Which approach lets the list handle clicks on both existing and future buttons with one listener?

A
Attach a separate click listener to every button after each button is created.
B
Use querySelectorAll() once and assume its collection will include future buttons.
C
Attach one click listener to the list and identify clicked buttons in the handler.
D
Prevent the click event's default action so it reaches the list.

Choose one

1 point

A click on a button inside a list reaches a click listener attached to the list. In that listener, what do event.target and event.currentTarget identify?

A
target identifies where the event originated; currentTarget identifies the object whose listener is running.
B
target identifies the object whose listener is running; currentTarget identifies where the event originated.
C
Both properties always identify the object whose listener is running.
D
Both properties always identify the first ancestor that received the event.

Choose one

1 point

A form's submit handler calls event.preventDefault(). Which outcome is expected for a cancelable submit event?

A
It stops the event from reaching any ancestor but leaves the default action unchanged.
B
It cancels the event's default browser action but does not stop propagation.
C
It stops propagation and also cancels every browser default action.
D
It has no effect on a form's normal submission.

Written response

1 point

What JavaScript method registers a callback to run for a specified event type on an event target?

Written response

1 point

Which DOM property replaces an element's child content with text when assigned a new value?