Loading... Login Loading... Register

JavaScript DOM Manipulation Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which property would you use to change the URL in the browser's address bar without reloading the page?

Select your answer

document.URL

window.location.assign()

window.location.href

window.history.pushState()

Question 2/15

To get all elements of a specific class, which method would you use?

Select your answer

document.getElementById()

document.getElementsByClassName()

document.querySelector()

document.querySelectorAll()

Question 3/15

How can you access the first child of a DOM element?

Select your answer

element.firstElementChild

element.getFirstChild()

element.child(0)

element.firstChild

Question 4/15

How would you stop the propagation of an event in the capture or bubbling phases?

element.addEventListener('click', function(event) {
  event.stopPropagation();
});

Select your answer

event.preventDefault()

event.stopPropagation()

event.stopImmediatePropagation()

event.halt()

Question 5/15

What method would you use to select an element by its ID in the DOM?

Select your answer

document.createElement()

document.querySelectorAll()

document.getElementById()

document.getElementsByClassName()

Question 6/15

How can you prevent a form submission in JavaScript?

form.addEventListener('submit', function(event) {
  event.preventDefault();
});

Select your answer

form.stop()

event.stopPropagation()

event.preventDefault()

form.cancelSubmit()

Question 7/15

How can you detect that the DOM content is fully loaded and parsed with JavaScript?

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM fully loaded and parsed');
});

Select your answer

document.readyState

document.addEventListener('DOMContentLoaded', function)

document.onReady()

window.onload

Question 8/15

If you want to replace text content in an element, what property should you use?

Select your answer

innerHTML

nodeValue

textContent

outerHTML

Question 9/15

Which of the following properties retrieves all descendant elements of a specified element?

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Select your answer

element.childNodes

element.descendants

element.querySelectorAll('*')

element.children

Question 10/15

When is the resize event fired in the browser?

Select your answer

When a form is submitted

When the document view is resized

When content is printed

When a new DOM element is added

Question 11/15

What is the purpose of event.currentTarget in an event handler?

Select your answer

It always refers to the element to which the event handler is attached

It refers to the last element clicked

It refers to the element that was clicked

It refers to the first child of the clicked element

Question 12/15

When using insertBefore(), where is the new node placed?

var parent = document.getElementById('parent');
parent.insertBefore(newNode, referenceNode);

Select your answer

At the beginning of the parentNode's child list

Anywhere after the reference node inside its parent

At the end of the parentNode's child list

Before the reference node as a child of the specified parent node

Question 13/15

Which method would you use to clone a DOM node?

Select your answer

element.copyNode()

element.duplicateNode()

element.cloneElement()

element.cloneNode()

Question 14/15

To set the value of an input field using JavaScript, which property would you use?

Select your answer

value

defaultValue

innerHTML

textContent

Question 15/15

Which method is used to clear all timers set with setInterval()?

Select your answer

clearInterval()

clearTimeout()

stopInterval()

resetInterval()

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property would you use to change the URL in the browser's address bar without reloading the page?

Available answers

document.URL

window.location.assign()

window.location.href

window.history.pushState()

The

history.pushState()

method adds a new entry to the browser's session history stack, allowing you to change the URL without triggering a page reload.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

To get all elements of a specific class, which method would you use?

Available answers

document.getElementById()

document.getElementsByClassName()

document.querySelector()

document.querySelectorAll()

The

document.getElementsByClassName()

method returns a live HTMLCollection of elements with the specified class name.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you access the first child of a DOM element?

Available answers

element.firstElementChild

element.getFirstChild()

element.child(0)

element.firstChild

The

element.firstChild

property returns the first child of an element.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you stop the propagation of an event in the capture or bubbling phases?

element.addEventListener('click', function(event) {
  event.stopPropagation();
});

Available answers

event.preventDefault()

event.stopPropagation()

event.stopImmediatePropagation()

event.halt()

Calling

event.stopPropagation()

during any phase of event flow prevents further propagation of the current event.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

What method would you use to select an element by its ID in the DOM?

Available answers

document.createElement()

document.querySelectorAll()

document.getElementById()

document.getElementsByClassName()

The

document.getElementById()

method returns an element object representing the element whose id property matches the specified string.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you prevent a form submission in JavaScript?

form.addEventListener('submit', function(event) {
  event.preventDefault();
});

Available answers

form.stop()

event.stopPropagation()

event.preventDefault()

form.cancelSubmit()

Calling

event.preventDefault()

on a form submission event prevents the form from being submitted.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you detect that the DOM content is fully loaded and parsed with JavaScript?

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM fully loaded and parsed');
});

Available answers

document.readyState

document.addEventListener('DOMContentLoaded', function)

document.onReady()

window.onload

The

DOMContentLoaded

event is fired when the DOM is fully loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

If you want to replace text content in an element, what property should you use?

Available answers

innerHTML

nodeValue

textContent

outerHTML

The

textContent

property sets or returns the text content of the specified node, removing all child elements and replacing them with a single text node.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following properties retrieves all descendant elements of a specified element?

<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Available answers

element.childNodes

element.descendants

element.querySelectorAll('*')

element.children

The

element.children

property returns a live HTMLCollection containing all of the child elements of the element upon which it was called.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

When is the <code>resize</code> event fired in the browser?

Available answers

When a form is submitted

When the document view is resized

When content is printed

When a new DOM element is added

The

resize

event is fired when the document view (window) has been resized.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of <code>event.currentTarget</code> in an event handler?

Available answers

It always refers to the element to which the event handler is attached

It refers to the last element clicked

It refers to the element that was clicked

It refers to the first child of the clicked element

In an event handler,

event.currentTarget

consistently refers to the element to which the event handler is attached, regardless of where the event originally occurred.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

When using <code>insertBefore()</code>, where is the new node placed?

var parent = document.getElementById('parent');
parent.insertBefore(newNode, referenceNode);

Available answers

At the beginning of the parentNode's child list

Anywhere after the reference node inside its parent

At the end of the parentNode's child list

Before the reference node as a child of the specified parent node

The

insertBefore(newNode, referenceNode)

method inserts newNode into the DOM before referenceNode as a child of the specified parent node.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which method would you use to clone a DOM node?

Available answers

element.copyNode()

element.duplicateNode()

element.cloneElement()

element.cloneNode()

The

element.cloneNode()

method returns a duplicate of the node on which it is called, while the parameter indicates whether or not to include child nodes.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

To set the value of an input field using JavaScript, which property would you use?

Available answers

value

defaultValue

innerHTML

textContent

The

value

property is used to set or return the value of the element.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which method is used to clear all timers set with <code>setInterval()</code>?

Available answers

clearInterval()

clearTimeout()

stopInterval()

resetInterval()

The

clearInterval()

method stops the timer set by

setInterval()