DOM Manipulation Quiz

This quiz will challenge your knowledge on the various JavaScript methods to select elements, modify content, and create new elements.

Question 1/15

What is the method used to select the first element that matches a CSS selector in JavaScript?

Question 2/15

What will the following code produce? 
<body>
  <div id="myDiv">
    <p>Hello, world!</p>
  </div>
  <script>
    var div = document.getElementById("myDiv");
    var newPara = document.createElement("p");
    newPara.textContent = "Goodbye, world!";
    var oldPara = div.querySelector("p");
    div.replaceChild(newPara, oldPara);
  </script>
</body>

Question 3/15

Which method is used to get or set the HTML content of an element in JavaScript?

Question 4/15

What is the method used to create a new HTML element in JavaScript?

Question 5/15

Which of the following statements best describes the difference between replaceWith() and replaceChild() in JavaScript?

Question 6/15

What will the following code produce? 
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <script>
    var list = document.querySelector("ul");
    var item = document.createElement("li");
    item.textContent = "Item 3";
    list.insertBefore(item, list.firstElementChild);
  </script>
</body>

Question 7/15

Which method is used to add a class to an HTML element in JavaScript?

Question 8/15

What is the method used to remove an HTML element from the DOM in JavaScript?

Question 9/15

Which of the following statements best describes the difference between getElementsByClassName() and querySelectorAll()?

Question 10/15

Which method is used to replace an HTML element with another HTML element in JavaScript?

Question 11/15

What will the following code produce? 
<body>
  <div id="myDiv">
    <p>Hello, world!</p>
  </div>
  <script>
    var div = document.getElementById("myDiv");
    var newPara = document.createElement("p");
    newPara.textContent = "Goodbye, world!";
    div.appendChild(newPara);
  </script>
</body>

Question 12/15

What is the method used to remove a class from an HTML element in JavaScript?

Question 13/15

Which method is used to add an HTML element to the end of a parent element in JavaScript?

Question 14/15

What is the method used to check if an HTML element has a particular class in JavaScript?

Question 15/15

What is the method used to select an element by its ID in JavaScript?
You did not answer any questions correctly.

Your Answers

Question 1/15

What is the method used to select the first element that matches a CSS selector in JavaScript?

The querySelector() method is used to select the first element that matches a CSS selector in JavaScript. This method returns the first element that matches the specified selector.

Question 2/15

What will the following code produce? 
<body>
  <div id="myDiv">
    <p>Hello, world!</p>
  </div>
  <script>
    var div = document.getElementById("myDiv");
    var newPara = document.createElement("p");
    newPara.textContent = "Goodbye, world!";
    var oldPara = div.querySelector("p");
    div.replaceChild(newPara, oldPara);
  </script>
</body>

The code selects the HTML div element with the ID "myDiv" using the getElementById() method and assigns it to the variable div. It then creates a new paragraph element using the createElement() method and assigns it to the variable newPara. The textContent property of the new paragraph is set to "Goodbye, world!". The querySelector() method is then used to select the existing paragraph element inside the div, and the replaceChild() method is used to replace it with the new paragraph element.

Question 3/15

Which method is used to get or set the HTML content of an element in JavaScript?

The innerHTML() method is used to get or set the HTML content of an element in JavaScript. This method returns the HTML content of the specified element, or sets the HTML content to the specified value.

Question 4/15

What is the method used to create a new HTML element in JavaScript?

The createElement() method is used to create a new HTML element in JavaScript. This method returns a new element object that can be added to the DOM using other DOM manipulation methods.

Question 5/15

Which of the following statements best describes the difference between replaceWith() and replaceChild() in JavaScript?

Both replaceWith() and replaceChild() are JavaScript methods used to replace one HTML element with another. However, there are some key differences between these methods.

The replaceWith() method is used to replace an HTML element with one or more new elements. It takes one or more element or text node arguments, which are inserted into the DOM in place of the original element. The original element is then removed from the DOM.

On the other hand, the replaceChild() method is used to replace a single child element of a parent element with a new element. It takes two arguments: the new element to be inserted and the existing child element to be replaced. The new element is inserted into the DOM in place of the existing child element, and the existing child element is removed from the DOM.

Another difference between these methods is their browser compatibility. The replaceWith() method is a relatively new addition to the DOM API and is not supported by some older browsers, whereas the replaceChild() method is more widely supported.

In summary, the main differences between replaceWith() and replaceChild() are the type of replacement operation, the number of elements that can be replaced, and the browser compatibility of the methods.

Question 6/15

What will the following code produce? 
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <script>
    var list = document.querySelector("ul");
    var item = document.createElement("li");
    item.textContent = "Item 3";
    list.insertBefore(item, list.firstElementChild);
  </script>
</body>

The code selects the first HTML unordered list using the querySelector() method and assigns it to the variable list. It then creates a new list item using the createElement() method and assigns it to the variable item. The textContent property of the new list item is set to "Item 3". The insertBefore() method is then used to insert the new list item before the first list item in the list. Therefore, the correct answer is a) A list with three items: "Item 3", "Item 1", and "Item 2".

Question 7/15

Which method is used to add a class to an HTML element in JavaScript?

The classList.add() method is used to add a class to an HTML element in JavaScript. This method takes one argument: the name of the class to be added.

Question 8/15

What is the method used to remove an HTML element from the DOM in JavaScript?

The removeChild() method is used to remove an HTML element from the DOM in JavaScript. This method removes the specified child element from its parent element.

Question 9/15

Which of the following statements best describes the difference between getElementsByClassName() and querySelectorAll()?

Both getElementsByClassName() and querySelectorAll() are JavaScript methods used to select elements from the DOM. However, there are some key differences between these methods.

The getElementsByClassName() method selects elements by their class name and returns a live HTMLCollection of elements that match the specified class name. This means that any changes to the DOM that affect the selected elements will be automatically reflected in the returned collection.

On the other hand, the querySelectorAll() method selects elements by any valid CSS selector and returns a static NodeList of elements that match the selector. This means that the returned NodeList will not be updated if the DOM changes after the method is called.

Another difference between these methods is their browser compatibility. The getElementsByClassName() method is supported by most modern web browsers, including older versions of Internet Explorer, whereas the querySelectorAll() method is not supported by some older browsers.

Question 10/15

Which method is used to replace an HTML element with another HTML element in JavaScript?

 The replaceChild() method is used to replace an HTML element with another HTML element in JavaScript. This method replaces the specified child element with the specified new element.

Question 11/15

What will the following code produce? 
<body>
  <div id="myDiv">
    <p>Hello, world!</p>
  </div>
  <script>
    var div = document.getElementById("myDiv");
    var newPara = document.createElement("p");
    newPara.textContent = "Goodbye, world!";
    div.appendChild(newPara);
  </script>
</body>

The code selects the HTML div element with the ID "myDiv" using the getElementById() method and assigns it to the variable div. It then creates a new paragraph element using the createElement() method and assigns it to the variable newPara. The textContent property of the new paragraph is set to "Goodbye, world!". The appendChild() method is then used to add the new paragraph element to the end of the div. 

Question 12/15

What is the method used to remove a class from an HTML element in JavaScript?

The classList.remove() method is used to remove a class from an HTML element in JavaScript. This method takes one argument: the name of the class to be removed.

Question 13/15

Which method is used to add an HTML element to the end of a parent element in JavaScript?

The appendChild() method is used to add an HTML element to the end of a parent element in JavaScript. This method appends the specified element as the last child of the parent element.

Question 14/15

What is the method used to check if an HTML element has a particular class in JavaScript?

The classList.contains() method is used to check if an HTML element has a particular class in JavaScript. This method returns a Boolean value indicating whether the element has the specified class.

Question 15/15

What is the method used to select an element by its ID in JavaScript?

getElementById() method is used to select an element by its ID in JavaScript. This method returns a single element object that matches the ID provided.

Take Another Quiz

Advanced CSS Quiz

Advanced CSS Quiz designed to test your knowledge of advanced CSS concepts, including layout, positioning, blending, and responsive design. Start quiz

Agile Methodologies Quiz

Test your understanding of Agile methodologies, including Scrum, Kanban, and Lean. Understand how to use Agile principles to enhance the efficiency and productivity of your software development projects. Start quiz

Basic HTML & CSS Quiz

From basic tags and selectors to layout and positioning, this quiz covers essential topics that every beginner frontend web developer should know. Start quiz

Basic JavaScript Quiz

Test your understanding of the fundamental concepts and syntax of JavaScript, including variables, data types, conditionals, loops, and functions. Start quiz

CSS Box Model Quiz

Identify the correct box model properties for various layout scenarios and determine how changes to these properties affect the appearance of an element. Start quiz

CSS Flexbox Quiz

Test your knowledge of the CSS Flexbox layout module with multiple choice questions and their explanations. Start quiz