DOM Quiz - Languages JavaScript

Free practice quiz: DOM (Languages JavaScript). 47 multiple-choice questions with answers and explanations. Play online, no sign-up needed.

This Languages JavaScript practice quiz has 47 multiple-choice questions on DOM, and 47 of them come with an explanation. Try the 5 sample questions below (tap an option to check yourself), then play the full quiz online. No sign-up needed.

Sample questions

1. Which method is used to select an HTML element by its ID in the DOM?

   1. getElementsByClassName()
   2. querySelector()
   3. getElementById()
   4. getElementsByTagName()
   Show answer

   Answer: C. getElementById()

   The `getElementById()` method is specifically designed to retrieve a single element from the DOM based on its unique `id` attribute.

2. What is a 'node' in the context of the DOM?

   1. Only an HTML element
   2. Any part of an HTML document, including elements, text, attributes, and comments
   3. A JavaScript function
   4. A CSS rule
   Show answer

   Answer: B. Any part of an HTML document, including elements, text, attributes, and comments

   The DOM represents an HTML document as a tree structure where each component (element, text, attribute, etc.) is considered a node.

3. What is an HTML `data-*` attribute used for?

   1. To define styling for an element.
   2. To store custom data private to the page or application.
   3. To set the element's `id`.
   4. To specify the element's tag name.
   Show answer

   Answer: B. To store custom data private to the page or application.

   `data-*` attributes allow you to embed custom data attributes on all HTML elements, which can then be used by JavaScript or CSS.

4. How do you get the value of a specific attribute, like 'href', from an element?

   1. element.get('href')
   2. element.attributes('href')
   3. element.getAttribute('href')
   4. element.property('href')
   Show answer

   Answer: C. element.getAttribute('href')

   The `getAttribute()` method is used to retrieve the value of a specified attribute.

5. Which method is used to remove a specific attribute from an HTML element?

   1. removeAttribute()
   2. deleteAttribute()
   3. remove(attributeName)
   4. setAttribute(attributeName, null)
   Show answer

   Answer: A. removeAttribute()

   The `removeAttribute(name)` method removes the specified attribute from the element.

More questions in this quiz

Answers and explanations are in the full quiz.

1. What is the primary role of the Document Object Model (DOM) in JavaScript?
2. Which DOM property returns a live HTMLCollection of the child elements of a given element?
3. What is the difference between `innerHTML` and `textContent` properties?
4. Which method is used to add a new attribute to an HTML element?
5. What does the `querySelector()` method return if no matching element is found?
6. Which event is fired when the user clicks on an HTML element?
7. What is the purpose of the `DOMContentLoaded` event?
8. Which of the following correctly inserts a new node before a reference node?
9. Which method returns an HTMLCollection of all elements with a given tag name?
10. What is the difference between `childNodes` and `children`?
11. Which property is used to access the parent node of an element?
12. What does `document.createElement('div')` do?
13. Which method allows you to select all elements that match a given CSS selector?
14. What is the `document.body` property?
15. Which event is fired when an input element's value has changed and the element loses focus?
16. Which method is used to append a new node to the end of the list of children of a parent node?
17. Which property returns the text content of an element, ignoring HTML tags?
18. Which method can be used to find all elements matching a CSS selector, returning a static NodeList?
19. What is the significance of the `window` object in the DOM?
20. Which event fires continuously as the user is typing in an input field?
21. What is the purpose of `element.classList`?
22. Which method is used to create a text node?
23. What does `element.style.propertyName` allow you to do?
24. Which of the following is NOT a type of node in the DOM?
25. What is the difference between an `HTMLCollection` and a `NodeList` when returned by `getElementsByTagName` or `querySelectorAll` respectively?
26. What is the purpose of `document.createComment(text)`?
27. Which event is triggered when a user presses a key on the keyboard?
28. What does `element.hasChildNodes()` return?
29. Which property returns the first element child of a node?
30. What is the primary purpose of event listeners in DOM manipulation?
31. Which method is used to get the next sibling of a node?
32. What does `document.body.appendChild(newElement)` do?
33. Which CSS property can be directly manipulated using `element.style` in JavaScript?
34. What does `element.cloneNode(deep)` do?
35. Which event is typically used to execute JavaScript code after the entire page, including all linked resources (like images), has finished loading?
36. What is the main difference between `element.outerHTML` and `element.innerHTML`?
37. What does `element.hasAttribute(name)` return?
38. Which event handler is fired when the user's mouse pointer moves over an element?
39. What is the purpose of `document.createDocumentFragment()`?
40. Which of the following properties directly accesses the `id` attribute of an element?
41. Which event occurs when the browser window is resized?
42. What is the primary function of `document.write()`?

More quizzes

• ES6+▶ Play
• Frameworks▶ Play
• Syntax▶ Play

Browse all JavaScript quizzes

More to play