JavaScript DOM Manipulation Fundamentals Quiz — Questions & Answers

This quiz contains 15 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Selecting Elements by ID

   Which method is used to select an element by its unique ID in the DOM?

   • getElementByName
   • selectById
   • getElementById
   • getElementsByClassName
   • querySelectorAll
   Show correct answer

   Correct answer: getElementById

2. Question 2: Using querySelector for Classes

   To select the first element with class 'myClass', which code would you use?

   • document.getElementById('.myClass')
   • document.selectElement('.myClass')
   • document.getElementsByClassName('myClass')[0]
   • document.querySelectorAll('myClass')[0]
   • document.querySelector('.myClass')
   Show correct answer

   Correct answer: document.querySelector('.myClass')

3. Question 3: Changing Text Content

   If you want to set the text inside a paragraph element to 'Hello World', which property do you change?

   • contentText
   • value
   • htmlText
   • innerStyle
   • textContent
   Show correct answer

   Correct answer: textContent

4. Question 4: Updating Element Styles Inline

   Which syntax correctly changes a div's background color to blue using JavaScript?

   • div.setAttribute('background', 'blue');
   • div.css('background-color', 'blue');
   • div.style.set('backgroundColor', 'blue');
   • div.backgroundColor = 'blue';
   • div.style.backgroundColor = 'blue';
   Show correct answer

   Correct answer: div.style.backgroundColor = 'blue';

5. Question 5: Accessing Child Elements

   What property retrieves an array-like collection of a parent element's child elements?

   • childObjects
   • childElements
   • getChildNodes
   • children
   • nodes
   Show correct answer

   Correct answer: children

6. Question 6: Creating a New Element

   Which method creates a new <li> element in JavaScript?

   • createElement('li')
   • document.makeElement('li')
   • document.newElement('li')
   • document.createElement('li')
   • document.addElement('li')
   Show correct answer

   Correct answer: document.createElement('li')

7. Question 7: Appending Elements to the DOM

   What method adds a newly created element to the end of a parent node's child list?

   • appendElement
   • addChild
   • insertChild
   • pushChild
   • appendChild
   Show correct answer

   Correct answer: appendChild

8. Question 8: Removing Elements From the DOM

   Given an element node, which method can you call to remove it from the DOM?

   • exclude
   • erase
   • remove
   • delete
   • clear
   Show correct answer

   Correct answer: remove

9. Question 9: Retrieving Element Value

   How do you get the current value from an input text field using JavaScript?

   • input.textContent
   • input.value
   • input.innerValue
   • input.contents
   • input.getValue
   Show correct answer

   Correct answer: input.value

10. Question 10: Adding an Event Listener

    Which method is used to listen for a 'click' event on a button element?

    • addEventListener
    • onEvent
    • attachEvent
    • buttonListener
    • listenToEvent
    Show correct answer

    Correct answer: addEventListener

11. Question 11: Inner HTML Manipulation

    If you want to insert HTML content into a div, which property should you use?

    • divHTML
    • innerHTML
    • htmlInner
    • textInner
    • outerText
    Show correct answer

    Correct answer: innerHTML

12. Question 12: Selecting Multiple Elements

    Which method returns a NodeList of all elements matching a CSS selector?

    • getElementByTagName
    • selectNodes
    • queryAllSelector
    • getAllElements
    • querySelectorAll
    Show correct answer

    Correct answer: querySelectorAll

13. Question 13: Handling Default Event Behavior

    Which method cancels the default action of an event inside its handler function?

    • event.cancel()
    • event.preventDefault()
    • event.stopDefault()
    • event.stopEvent()
    • event.stopPropagation()
    Show correct answer

    Correct answer: event.preventDefault()

14. Question 14: Setting Element Attributes

    To change the 'src' attribute of an image element by JavaScript, which method would you use?

    • setAttribute
    • setAttr
    • addAttribute
    • updateAttribute
    • assignAttribute
    Show correct answer

    Correct answer: setAttribute

15. Question 15: Removing an Event Listener

    What method is used to detach a previously added event listener from a DOM element?

    • clearListener
    • deleteEventListener
    • removeEventListener
    • unlisten
    • detachListener
    Show correct answer

    Correct answer: removeEventListener