JavaScript DOM Manipulation Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

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

Select your answer

Question 2/15

Which method would you use to clone a DOM node?

Select your answer

Question 3/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 4/15

What method would you use to add an event listener in the capture phase? 
element.addEventListener('click', function() {
  // Handler logic
}, true);

Select your answer

Question 5/15

If you want to hide an element on a webpage using JavaScript, which CSS property would you modify?

Select your answer

Question 6/15

What method would you use to unregister a previously registered event handler?

Select your answer

Question 7/15

What method can be used to trigger a function when an HTML element is clicked? 
element.addEventListener('click', function() {
  console.log('Element clicked!');
});

Select your answer

Question 8/15

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

Select your answer

Question 9/15

Which event property gives you the position of the mouse cursor when an event occurred?

Select your answer

Question 10/15

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

Select your answer

Question 11/15

When is the resize event fired in the browser?

Select your answer

Question 12/15

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

Select your answer

Question 13/15

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

Select your answer

Question 14/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 15/15

To alter the CSS of an element dynamically, which object should you modify?

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
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 2/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 3/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 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
What method would you use to add an event listener in the capture phase? 
element.addEventListener('click', function() {
  // Handler logic
}, true);

Available answers

In 
element.addEventListener(event, listener, useCapture)
, setting 
useCapture
to true makes the event target the capture phase instead of the bubbling phase.
Question 5/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 6/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 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
What method can be used to trigger a function when an HTML element is clicked? 
element.addEventListener('click', function() {
  console.log('Element clicked!');
});

Available answers

The 
element.addEventListener('click', handler)
method attaches an event listener to the element for the specified event type, i.e., 'click'.
Question 8/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 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which event property gives you the position of the mouse cursor when an event occurred?

Available answers

event.clientX
and 
event.clientY
provide the x and y coordinates of the mouse cursor relative to the viewport at the time the event occurred.
Question 10/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 11/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 12/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 13/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 14/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 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
To alter the CSS of an element dynamically, which object should you modify?

Available answers

The 
element.style
object represents an element's inline style, which can be modified directly with JavaScript.