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 method would you use to clone a DOM node?

Select your answer

element.copyNode()

element.duplicateNode()

element.cloneNode()

element.cloneElement()

Question 2/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

addCaptureEvent(event, function)

setCapture(event, function)

addEventListener(event, function, true)

attachEvent(event, function, true)

Question 3/15

What is the purpose of the document.readyState property?

Select your answer

To return a string representing the loading state of the document

To force document readiness

To configure the loading state of external scripts

To execute scripts after the document is fully loaded

Question 4/15

Which property of a DOM element would you use to change its content?

Select your answer

textContent

outerHTML

innerHTML

value

Question 5/15

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

Select your answer

event.mouseX and event.mouseY

event.clientX and event.clientY

event.positionX and event.positionY

event.pageX and event.pageY

Question 6/15

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

Select your answer

clearInterval()

stopInterval()

clearTimeout()

resetInterval()

Question 7/15

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

Select your answer

value

innerHTML

textContent

defaultValue

Question 8/15

Which method allows you to execute a function after a specified number of milliseconds?

Select your answer

setInterval()

delayFunction()

setTimeout()

setTimeInterval()

Question 9/15

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

Select your answer

element.child(0)

element.getFirstChild()

element.firstChild

element.firstElementChild

Question 10/15

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

Select your answer

document.getElementsByClassName()

document.createElement()

document.getElementById()

document.querySelectorAll()

Question 11/15

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

Select your answer

document.getElementById()

document.querySelectorAll()

document.querySelector()

document.getElementsByClassName()

Question 12/15

Which DOM method is used to create a new HTML element?

Select your answer

document.create()

document.createElement()

document.newElement()

document.appendElement()

Question 13/15

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

Select your answer

element.css

element.style

element.changeStyle()

element.setAttribute()

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

parentElement.insertLast(newElement)

parentElement.addChild(newElement)

parentElement.appendChild(newElement)

parentElement.append(newChild)

Question 15/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.history.pushState()

window.location.href

window.location.assign()

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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.cloneNode()

element.cloneElement()

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 2/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

addCaptureEvent(event, function)

setCapture(event, function)

addEventListener(event, function, true)

attachEvent(event, function, true)

element.addEventListener(event, listener, useCapture)

, setting

useCapture

to true makes the event target the capture phase instead of the bubbling phase.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of the <code>document.readyState</code> property?

Available answers

To return a string representing the loading state of the document

To force document readiness

To configure the loading state of external scripts

To execute scripts after the document is fully loaded

The

document.readyState

property describes the loading state of the document. It can be 'loading', 'interactive', or 'complete'.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property of a DOM element would you use to change its content?

Available answers

textContent

outerHTML

innerHTML

value

The

innerHTML

property is used to get or set the HTML content of an element.

Question 5/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.mouseX and event.mouseY

event.clientX and event.clientY

event.positionX and event.positionY

event.pageX and event.pageY

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 6/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()

stopInterval()

clearTimeout()

resetInterval()

The

clearInterval()

method stops the timer set by

setInterval()

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

innerHTML

textContent

defaultValue

The

value

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

Question 8/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

setInterval()

delayFunction()

setTimeout()

setTimeInterval()

The

setTimeout()

method calls a function or evaluates an expression after a specified number of milliseconds.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

element.child(0)

element.getFirstChild()

element.firstChild

element.firstElementChild

The

element.firstChild

property returns the first child of an element.

Question 10/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.getElementsByClassName()

document.createElement()

document.getElementById()

document.querySelectorAll()

The

document.getElementById()

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

Question 11/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.querySelectorAll()

document.querySelector()

document.getElementsByClassName()

The

document.getElementsByClassName()

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

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which DOM method is used to create a new HTML element?

Available answers

document.create()

document.createElement()

document.newElement()

document.appendElement()

The

document.createElement()

method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

element.css

element.style

element.changeStyle()

element.setAttribute()

The

element.style

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

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

parentElement.insertLast(newElement)

parentElement.addChild(newElement)

parentElement.appendChild(newElement)

parentElement.append(newChild)

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

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

Available answers

document.URL

window.history.pushState()

window.location.href

window.location.assign()

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.