Async / Await in JavaScript Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
DOM Manipulation in JavaScript
Test your knowledge of DOM manipulation in JavaScript, including selecting elements, changing content and styles, creating elements, handling events, and modifying the document structure.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
Asynchronous JavaScript & Promises Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
JavaScript Arrays & Array Methods Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Control Flow & Loops in JavaScript
15 questions · 12 min · Medium
Error Handling in JavaScript
15 questions · 12 min · Medium
ES6+ Features in JavaScript
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. What does DOM stand for?
- A. Document Object Model
- B. Data Object Management
- C. Document Oriented Module
- D. Dynamic Object Model
Show answer
A. Document Object Model
DOM stands for Document Object Model. It represents an HTML document as a tree of objects that JavaScript can interact with.
-
2. Which method is commonly used to select an element by its ID?
- A. document.getElementById()
- B. document.getElementByClass()
- C. document.selectId()
- D. document.findId()
Show answer
A. document.getElementById()
getElementById() returns the element whose id attribute matches the supplied string.
-
3. Which method returns the first element that matches a CSS selector?
- A. querySelector()
- B. querySelectorAll()
- C. getSelector()
- D. findElement()
Show answer
A. querySelector()
querySelector() returns the first element in the document that matches the specified CSS selector.
-
4. Which method returns all elements matching a CSS selector?
- A. querySelector()
- B. querySelectorAll()
- C. getAllSelector()
- D. selectElements()
Show answer
B. querySelectorAll()
querySelectorAll() returns a static NodeList containing all elements that match the specified CSS selector.
-
5. Which property is commonly used to change the HTML content inside an element?
- A. innerHTML
- B. outerTextOnly
- C. htmlContentOnly
- D. documentHTML
Show answer
A. innerHTML
The innerHTML property gets or sets the HTML markup contained within an element.
-
6. Which property is commonly used to change or retrieve the text content of an element?
- A. textContent
- B. htmlText
- C. textHTML
- D. contentTextOnly
Show answer
A. textContent
textContent gets or sets the text content of an element and its descendants.
-
7. Which property can be used to directly modify an element's inline CSS styles?
- A. style
- B. cssTextOnly
- C. cssProperty
- D. design
Show answer
A. style
The style property provides access to an element's inline CSS styles, such as element.style.color.
-
8. Which method creates a new HTML element?
- A. document.createElement()
- B. document.newElement()
- C. document.makeElement()
- D. document.createHTML()
Show answer
A. document.createElement()
document.createElement() creates a new element node of the specified element type.
-
9. Which method can be used to add a node to the end of a parent element?
- A. appendChild()
- B. addNodeEnd()
- C. insertLast()
- D. pushElement()
Show answer
A. appendChild()
appendChild() adds a node as the last child of a specified parent node.
-
10. Which method is commonly used to remove a child node from its parent?
- A. removeChild()
- B. deleteChild()
- C. removeElementChild()
- D. deleteNode()
Show answer
A. removeChild()
removeChild() removes a specified child node from its parent node.
-
11. Which method is commonly used to attach an event handler to an element?
- A. addEventListener()
- B. attachEventOnly()
- C. addHandler()
- D. listenEvent()
Show answer
A. addEventListener()
addEventListener() registers a function to be called when a specified event occurs on an element.
-
12. What does the following code do: `document.querySelector('#title').textContent = 'Hello';`?
- A. Creates a new element with the ID title
- B. Changes the text content of the element with ID title
- C. Deletes the element with ID title
- D. Changes the document title automatically
Show answer
B. Changes the text content of the element with ID title
querySelector('#title') selects the element with the ID title, and textContent replaces its text content with Hello.
-
13. Which property can be used to read or modify an element's class attribute as a token-based collection?
- A. classList
- B. classArray
- C. cssClasses
- D. styleClasses
Show answer
A. classList
classList provides methods such as add(), remove(), toggle(), and contains() for manipulating an element's CSS classes.
-
14. Which method can be used to set the value of an HTML attribute?
- A. setAttribute()
- B. setProperty()
- C. changeAttribute()
- D. modifyAttribute()
Show answer
A. setAttribute()
setAttribute() sets the value of the specified attribute on an HTML element.
-
15. Which event is commonly triggered when a user clicks an element?
- A. click
- B. press
- C. select
- D. activate
Show answer
A. click
The click event is dispatched when the user clicks an element, and it can be handled using addEventListener('click', handler).