Multiple Choice Questions on JavaScript DOM Manipulation

📚 Quick Study Guide

• 🏠 DOM (Document Object Model): Represents the structure of an HTML or XML document as a tree-like structure.
• 🌳 Nodes: Individual elements, attributes, or text within the DOM tree.
• 🎯 Selecting Elements:
  • `document.getElementById(id)`: Selects an element by its ID.
  • `document.querySelector(selector)`: Selects the first element that matches a CSS selector.
  • `document.querySelectorAll(selector)`: Selects all elements that match a CSS selector (returns a NodeList).
• ✏️ Modifying Elements:
  • `element.innerHTML`: Gets or sets the HTML content of an element.
  • `element.textContent`: Gets or sets the text content of an element.
  • `element.setAttribute(name, value)`: Sets the value of an attribute on an element.
  • `element.style.property`: Sets the style property of an element.
• ➕ Creating and Appending Elements:
  • `document.createElement(tagName)`: Creates a new element.
  • `document.createTextNode(text)`: Creates a new text node.
  • `element.appendChild(node)`: Adds a node as the last child of an element.
  • `element.removeChild(node)`: Removes a child node from an element.
• 👂 Event Listeners:
  • `element.addEventListener(event, function)`: Attaches an event listener to an element.
  • Common events: `click`, `mouseover`, `mouseout`, `keydown`, `keyup`.

🧪 Practice Quiz

1. What does DOM stand for?
   1. A. Document Object Management
   2. B. Data Object Model
   3. C. Document Object Model
   4. D. Data Output Module
2. Which method is used to select an element by its ID in JavaScript?
   1. A. `getElementByName()`
   2. B. `querySelector()`
   3. C. `getElementById()`
   4. D. `selectElement()`
3. How do you change the text content of an element with the ID "myElement"?
   1. A. `document.getElementById("myElement").changeText = "New Text";`
   2. B. `document.getElementById("myElement").textContent = "New Text";`
   3. C. `document.getElementById("myElement").innerText = "New Text";`
   4. D. `document.getElementById("myElement").text = "New Text";`
4. Which method is used to add a new element as a child to another element?
   1. A. `addElement()`
   2. B. `appendChild()`
   3. C. `insertElement()`
   4. D. `addChild()`
5. How can you add an event listener to an element?
   1. A. `element.onEvent(event, function);`
   2. B. `element.listenEvent(event, function);`
   3. C. `element.addEventListener(event, function);`
   4. D. `element.attachEvent(event, function);`
6. What does the `querySelectorAll()` method return?
   1. A. A single element
   2. B. An array of elements
   3. C. A NodeList of elements
   4. D. A string of HTML
7. How do you set the 'src' attribute of an image element with the ID 'myImage'?
   1. A. `document.getElementById('myImage').src = 'image.jpg';`
   2. B. `document.getElementById('myImage').setAttribute('source', 'image.jpg');`
   3. C. `document.getElementById('myImage').changeAttribute('src', 'image.jpg');`
   4. D. `document.getElementById('myImage').source = 'image.jpg';`