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
OR
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
Question 2/15
To get all elements of a specific class, which method would you use?
Select your answer
Question 3/15
How can you access the first child of a DOM element?
Select your answer
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
Question 5/15
What method would you use to select an element by its ID in the DOM?
Select your answer
Question 6/15
How can you prevent a form submission in JavaScript?
form.addEventListener('submit', function(event) {
event.preventDefault();
});
Select your answer
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
Question 8/15
If you want to replace text content in an element, what property should you use?
Select your answer
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
Question 10/15
When is the
resize
event fired in the browser?
Select your answer
Question 11/15
What is the purpose of
event.currentTarget
in an event handler?
Select your answer
Question 12/15
When using
insertBefore()
, where is the new node placed?
var parent = document.getElementById('parent');
parent.insertBefore(newNode, referenceNode);
Select your answer
Question 13/15
Which method would you use to clone a DOM node?
Select your answer
Question 14/15
To set the value of an input field using JavaScript, which property would you use?
Select your answer
Question 15/15
Which method is used to clear all timers set with
setInterval()
?
Select your answer
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
The
clearInterval()
method stops the timer set by setInterval()
.