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
How can you access the first child of a DOM element?
Select your answer
Question 2/15
What method would you use to unregister a previously registered event handler?
Select your answer
Question 3/15
If you want to hide an element on a webpage using JavaScript, which CSS property would you modify?
Select your answer
Question 4/15
Which method allows you to execute a function after a specified number of milliseconds?
Select your answer
Question 5/15
How can you prevent a form submission in JavaScript?
form.addEventListener('submit', function(event) {
event.preventDefault();
});
Select your answer
Question 6/15
Which DOM method is used to create a new HTML element?
Select your answer
Question 7/15
What method would you use to select an element by its ID in the DOM?
Select your answer
Question 8/15
When using
insertBefore()
, where is the new node placed?
var parent = document.getElementById('parent');
parent.insertBefore(newNode, referenceNode);
Select your answer
Question 9/15
When is the
resize
event fired in the browser?
Select your answer
Question 10/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 11/15
To add a new class to an element's class list, which method would you use?
Select your answer
Question 12/15
Which method is used to append a new element as the last child of a parent element?
// Example of appending a new child
parentElement.appendChild(newElement);
Select your answer
Question 13/15
How do you remove a child node from a parent node in the DOM?
// Example to remove a child element
element.removeChild(childElement);
Select your answer
Question 14/15
Which method would you use to clone a DOM node?
Select your answer
Question 15/15
To get all elements of a specific class, which method would you use?
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
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 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What method would you use to unregister a previously registered event handler?
Available answers
The
removeEventListener()
method removes an event handler that has been attached with addEventListener()
.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If you want to hide an element on a webpage using JavaScript, which CSS property would you modify?
Available answers
Setting the
style.display
property to 'none' hides the element from view, breaking the page flow.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which method allows you to execute a function after a specified number of milliseconds?
Available answers
The
setTimeout()
method calls a function or evaluates an expression after a specified number of milliseconds.
Question 5/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 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which DOM method is used to create a new HTML element?
Available answers
The
document.createElement()
method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.
Question 7/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 8/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 9/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 10/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 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
To add a new class to an element's class list, which method would you use?
Available answers
The
element.classList.add()
method adds the specified class value to the element's class attribute.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which method is used to append a new element as the last child of a parent element?
// Example of appending a new child
parentElement.appendChild(newElement);
Available answers
The
parentElement.appendChild(newElement)
method adds a node to the end of the list of children of a specified parent node.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you remove a child node from a parent node in the DOM?
// Example to remove a child element
element.removeChild(childElement);
Available answers
The correct method to remove a child node is
parentNode.removeChild(childNode)
, where you specify the parentNode and the childNode you want to remove.
Question 14/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 15/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.