MCQs Of Day 10: DOM Manipulation
1. What does DOM stand for in JavaScript?
- A) Data Object Model
- B) Document Object Model
- C) Document Operational Model
- D) Data Operative Model
Answer: B) Document Object Model
Explanation: The DOM (Document Object Model) represents the structure of an HTML document as a tree of nodes, where each node is an object representing part of the page.
2. Which method is used to select an element by its ID in JavaScript?
- A) document.querySelector()
- B) document.getElementById()
- C) document.selectById()
- D) document.querySelectorAll()
Answer: B) document.getElementById()
Explanation: document.getElementById() is used to select an element by its ID.
3. How do you change the inner HTML of an element in JavaScript?
- A) element.innerText = "new text"
- B) element.textContent = "new text"
- C) element.innerHTML = "new HTML"
- D) element.changeHTML = "new content"
Answer: C) element.innerHTML = "new HTML"
Explanation: innerHTML is used to get or set the HTML content inside an element.
4. Which of the following is used to select the first element that matches a CSS selector?
- A) document.querySelector()
- B) document.getElementsByClassName()
- C) document.querySelectorAll()
- D) document.getElementById()
Answer: A) document.querySelector()
Explanation: document.querySelector() returns the first element that matches the specified selector.
5. What is the purpose of document.querySelectorAll()?
- A) Selects only one element by ID
- B) Selects all elements by class name
- C) Selects all elements that match a given CSS selector
- D) Selects the first child element
Answer: C) Selects all elements that match a given CSS selector
Explanation: document.querySelectorAll() selects all elements that match the given CSS selector and returns a NodeList.
6. Which of the following is used to create a new HTML element in JavaScript?
- A) document.createElement()
- B) document.addElement()
- C) document.newElement()
- D) document.insertElement()
Answer: A) document.createElement()
Explanation: document.createElement() is used to create a new HTML element dynamically.
7. Which property is used to get or set the text content of an element?
- A) innerHTML
- B) textContent
- C) value
- D) contentText
Answer: B) textContent
Explanation: textContent is used to get or set the text content of an element, excluding HTML tags.
8. Which method is used to add a new class to an element in JavaScript?
- A) element.addClass()
- B) element.classList.add()
- C) element.classList.append()
- D) element.setClass()
Answer: B) element.classList.add()
Explanation: classList.add() adds a new class to an element.
9. How can you remove a class from an element?
- A) element.removeClass()
- B) element.classList.remove()
- C) element.removeClassList()
- D) element.classList.delete()
Answer: B) element.classList.remove()
Explanation: classList.remove() removes a class from an element.
10. What method is used to remove an element from the DOM?
- A) removeElement()
- B) element.removeChild()
- C) parent.removeChild()
- D) parent.removeElement()
Answer: C) parent.removeChild()
Explanation: parent.removeChild() removes a child element from the DOM.
11. Which of the following methods is used to add an event listener to an element?
- A) element.onClick()
- B) element.addEventListener()
- C) element.addListener()
- D) element.addEvent()
Answer: B) element.addEventListener()
Explanation: addEventListener() is used to attach an event listener to an element.
12. Which event occurs when a user clicks on an element?
- A) onChange
- B) onClick
- C) onHover
- D) onMouseDown
Answer: B) onClick
Explanation: onClick is triggered when a user clicks on an element.
13. How do you prevent the default behavior of an event in JavaScript?
- A) event.stopPropagation()
- B) event.preventDefault()
- C) event.cancel()
- D) event.stopDefault()
Answer: B) event.preventDefault()
Explanation: event.preventDefault() is used to prevent the default action associated with the event.
14. What does event.stopPropagation() do?
- A) Prevents the event from bubbling up to the parent elements
- B) Prevents the default action of an event
- C) Prevents the event from triggering
- D) Does nothing
Answer: A) Prevents the event from bubbling up to the parent elements
Explanation: event.stopPropagation() prevents the event from propagating (bubbling) up to parent elements.
15. What does document.getElementsByClassName() return?
- A) A single DOM element
- B) A NodeList of matching elements
- C) An HTMLCollection of matching elements
- D) A string of class names
Answer: C) An HTMLCollection of matching elements
Explanation: document.getElementsByClassName() returns an HTMLCollection of elements that match the specified class name.
16. What method is used to change the style of an element?
- A) element.changeStyle()
- B) element.setStyle()
- C) element.style.property
- D) element.setProperty()
Answer: C) element.style.property
Explanation: You can change the style of an element by modifying the style property of the element, such as element.style.color = "red".
17. How can you set an attribute of an element in JavaScript?
- A) element.setAttribute()
- B) element.setAttr()
- C) element.addAttribute()
- D) element.changeAttribute()
Answer: A) element.setAttribute()
Explanation: setAttribute() is used to set an attribute of an element.
18. Which of the following methods is used to get an element by its tag name?
- A) document.getElementsByName()
- B) document.getElementsByTagName()
- C) document.querySelector()
- D) document.querySelectorAll()
Answer: B) document.getElementsByTagName()
Explanation: document.getElementsByTagName() selects all elements with the specified tag name and returns an HTMLCollection.
19. How can you change the background color of an element using JavaScript?
- A) element.setStyle("background-color", "red")
- B) element.style.background = "red"
- C) element.setBackgroundColor("red")
- D) element.background = "red"
Answer: B) element.style.background = "red"
Explanation: You can change the background color of an element by setting style.background.
20. What is the difference between textContent and innerHTML?
- A) innerHTML can be used to set or get HTML tags, while textContent only retrieves text
- B) textContent can be used to set or get HTML tags, while innerHTML only retrieves text
- C) Both properties work the same way
- D) textContent is for getting text, and innerHTML is for reading and writing styles
Answer: A) innerHTML can be used to set or get HTML tags, while textContent only retrieves text
Explanation: innerHTML can handle HTML tags (it can get and set HTML content), whereas textContent retrieves or sets only text, ignoring HTML tags.
21. Which method is used to add a new element to the DOM?
- A) appendChild()
- B) insertBefore()
- C) createElement()
- D) All of the above
Answer: D) All of the above
Explanation: appendChild(), insertBefore(), and createElement() can all be used to add elements to the DOM.
22. What is the function of document.body in JavaScript?
- A) Represents the document’s head section
- B) Represents the content of the HTML document (inside the <body> tag)
- C) Represents the document’s footer
- D) Represents the document’s root
Answer: B) Represents the content of the HTML document (inside the <body> tag)
Explanation: document.body gives access to the <body> element of the document, which holds the visible content.
23. How can you hide an element using JavaScript?
- A) element.style.visibility = "hidden"
- B) element.style.display = "none"
- C) element.hidden = true
- D) All of the above
Answer: D) All of the above
Explanation: All three methods can hide an element, but they differ in how they affect layout (e.g., display: none removes the element from the layout).
24. How do you get the value of an input field?
- A) input.value()
- B) input.text()
- C) input.getValue()
- D) input.value
Answer: D) input.value
Explanation: The value property is used to get or set the value of an input field.
25. Which method is used to trigger a click event programmatically in JavaScript?
- A) element.click()
- B) element.trigger()
- C) element.fire()
- D) element.mouseClick()
Answer: A) element.click()
Explanation: The click() method triggers a click event on the element.
26. Which of the following methods returns all the child nodes of an element in JavaScript?
- A) element.children()
- B) element.childNodes()
- C) element.childNodes
- D) element.children
Answer: C) element.childNodes
Explanation: childNodes returns a NodeList of all child nodes, including text and comment nodes.
27. How do you modify an element's attribute using JavaScript?
- A) element.setAttribute(attribute, value)
- B) element.changeAttribute(attribute, value)
- C) element.updateAttribute(attribute, value)
- D) element.addAttribute(attribute, value)
Answer: A) element.setAttribute(attribute, value)
Explanation: setAttribute() is used to modify the value of an attribute of an element.
28. What does the innerHTML property return?
- A) Only the text content of an element
- B) The text content and HTML markup of an element
- C) Only the HTML markup of an element
- D) The content of an element including comments
Answer: B) The text content and HTML markup of an element
Explanation: innerHTML returns both the text content and any HTML tags within an element.
29. Which of the following is true about the querySelector() method?
- A) It selects all matching elements in the document
- B) It returns a NodeList of matching elements
- C) It selects only the first element that matches the specified selector
- D) It only works with ID selectors
Answer: C) It selects only the first element that matches the specified selector
Explanation: querySelector() returns the first matching element that matches the specified selector.
30. How do you add an event listener for the 'mouseover' event in JavaScript?
- A) element.addEventListener("mouseover", function)
- B) element.onmouseover(function)
- C) element.addListener("mouseover", function)
- D) element.mouseover(function)
Answer: A) element.addEventListener("mouseover", function)
Explanation: The addEventListener() method is used to attach an event handler for the "mouseover" event.
31. How can you hide an element without removing it from the DOM?
- A) element.style.display = "none"
- B) element.style.visibility = "hidden"
- C) element.style.opacity = "0"
- D) All of the above
Answer: D) All of the above
Explanation: All three methods hide the element, but they do so differently. display: none removes the element from the layout, visibility: hidden keeps its space in the layout, and opacity: 0 makes it invisible but still interactive.
32. Which of the following methods allows you to get the parent element of a DOM element?
- A) element.parentNode
- B) element.getParent()
- C) element.parentElement
- D) A and C are correct
Answer: D) A and C are correct
Explanation: Both parentNode and parentElement can be used to get the parent element of a DOM node.
33. What is the correct way to select an element with a specific class name?
- A) document.getElementsByClassName(".class-name")
- B) document.getElementsByClassName("class-name")
- C) document.querySelectorAll(".class-name")
- D) Both B and C are correct
Answer: D) Both B and C are correct
Explanation: document.getElementsByClassName("class-name") and document.querySelectorAll(".class-name") both allow selecting elements with a specific class name, but querySelectorAll() returns a NodeList.
34. Which event occurs when a user moves the mouse over an element?
- A) onClick
- B) onFocus
- C) onMouseOver
- D) onChange
Answer: C) onMouseOver
Explanation: onMouseOver is triggered when the mouse pointer hovers over an element.
35. Which of the following methods is used to insert new HTML content at the beginning of an element?
- A) element.insertBefore()
- B) element.prepend()
- C) element.insertFirst()
- D) element.appendChild()
Answer: B) element.prepend()
Explanation: prepend() is used to insert new content at the beginning of an element.
36. How do you remove all child elements of an element using JavaScript?
- A) element.removeChildren()
- B) element.innerHTML = ""
- C) element.deleteChildren()
- D) element.clearChildren()
Answer: B) element.innerHTML = ""
Explanation: Setting innerHTML to an empty string removes all child elements from the DOM.
37. What does the nodeValue property return?
- A) The value of an element
- B) The HTML content of an element
- C) The text content of a node
- D) The value of an input field
Answer: C) The text content of a node
Explanation: The nodeValue property retrieves or sets the value of a text node.
38. How can you set an input field's value using JavaScript?
- A) input.text = "new value"
- B) input.value = "new value"
- C) input.setValue("new value")
- D) input.innerText = "new value"
Answer: B) input.value = "new value"
Explanation: The value property is used to get or set the value of an input field.
39. Which method is used to attach a click event handler to an element in JavaScript?
- A) element.addEventListener("click", function)
- B) element.onClick = function
- C) element.attachEvent("click", function)
- D) Both A and B are correct
Answer: D) Both A and B are correct
Explanation: Both addEventListener() and assigning a function to onClick can be used to attach a click event handler.
40. Which of the following is used to remove an event listener from an element?
- A) element.removeEventListener()
- B) element.removeListener()
- C) element.detachEventListener()
- D) element.removeHandler()
Answer: A) element.removeEventListener()
Explanation: removeEventListener() is used to remove an event listener that was previously attached.
41. Which of the following methods allows you to add an element at the end of a parent element?
- A) element.appendChild()
- B) parent.insertChild()
- C) parent.addChild()
- D) element.appendChild()
Answer: A) element.appendChild()
Explanation: appendChild() is used to add an element as the last child of a parent element.
42. Which method is used to retrieve the value of a CSS property from an element?
- A) getComputedStyle()
- B) element.style.getPropertyValue()
- C) element.getPropertyValue()
- D) element.style.getValue()
Answer: A) getComputedStyle()
Explanation: getComputedStyle() is used to get the computed styles of an element, including values set by external stylesheets.
43. What does element.scrollTop represent?
- A) The total height of an element
- B) The position of the vertical scrollbar of an element
- C) The current scroll position of the page
- D) The width of the element’s content
Answer: B) The position of the vertical scrollbar of an element
Explanation: scrollTop returns or sets the number of pixels that an element’s content is scrolled vertically.
44. How can you check whether an element has a specific class using JavaScript?
- A) element.hasClass("class-name")
- B) element.containsClass("class-name")
- C) element.classList.contains("class-name")
- D) element.hasClassName("class-name")
Answer: C) element.classList.contains("class-name")
Explanation: classList.contains() checks if an element has a specific class.
45. How do you add an event listener to listen for when a user presses a key?
- A) element.addEventListener("keypress", function)
- B) element.onKeyPress(function)
- C) element.keyListener("press", function)
- D) element.addEventListener("keydown", function)
Answer: D) element.addEventListener("keydown", function)
Explanation: keydown event is used to listen for key presses on an element.
46. Which method is used to get all elements with a specific class name?
- A) document.querySelector(".class-name")
- B) document.getElementsByClassName(".class-name")
- C) document.querySelectorAll(".class-name")
- D) document.getElementsByClassName("class-name")
Answer: D) document.getElementsByClassName("class-name")
Explanation: getElementsByClassName("class-name") retrieves all elements with the specified class name. It returns a live HTMLCollection.
47. What will the getElementById() method return if no matching element is found?
- A) null
- B) undefined
- C) error
- D) false
Answer: A) null
Explanation: getElementById() returns null if no element with the given ID exists.
48. Which of the following methods is used to add a class to an element?
- A) element.addClass("new-class")
- B) element.classList.add("new-class")
- C) element.className.add("new-class")
- D) element.add("new-class")
Answer: B) element.classList.add("new-class")
Explanation: The classList.add() method adds one or more classes to an element.
49. How can you get the first child of an element?
- A) element.firstChild
- B) element.firstElementChild
- C) element.childElementAt(0)
- D) A and B are correct
Answer: D) A and B are correct
Explanation: Both firstChild and firstElementChild can be used to get the first child of an element, with the latter excluding text and comment nodes.
50. What is the purpose of event.preventDefault() in event handling?
- A) It cancels the event's default action
- B) It prevents the event from bubbling up
- C) It stops the event handler from executing
- D) It prevents the event from firing
Answer: A) It cancels the event's default action
Explanation: event.preventDefault() prevents the browser’s default action associated with the event (e.g., submitting a form).
51. Which method is used to get the element that is currently focused in the document?
- A) document.getFocusedElement()
- B) document.activeElement
- C) document.getElementByFocus()
- D) document.focusElement()
Answer: B) document.activeElement
Explanation: document.activeElement returns the element that currently has focus.
52. How can you remove a class from an element?
- A) element.classList.remove("class-name")
- B) element.removeClass("class-name")
- C) element.className.remove("class-name")
- D) element.className.removeClass("class-name")
Answer: A) element.classList.remove("class-name")
Explanation: The classList.remove() method is used to remove a class from an element.
53. Which method can be used to create a new HTML element in JavaScript?
- A) document.createElement()
- B) document.appendChild()
- C) document.newElement()
- D) element.create()
Answer: A) document.createElement()
Explanation: document.createElement() creates a new HTML element with the specified tag name.
54. How can you remove an HTML element from the DOM?
- A) element.delete()
- B) element.removeChild()
- C) element.remove()
- D) element.destroy()
Answer: C) element.remove()
Explanation: The remove() method removes the element from the DOM.
55. What does the innerText property return?
- A) The text content of an element, including hidden text
- B) The HTML content of an element
- C) The text content of an element without HTML tags
- D) The outer content of an element
Answer: C) The text content of an element without HTML tags
Explanation: innerText returns the plain text content of an element, excluding HTML tags.
56. Which of the following is used to change the style of an HTML element?
- A) element.style = "background-color: red;"
- B) element.setStyle("background-color", "red")
- C) element.style.backgroundColor = "red"
- D) element.setStyle("backgroundColor", "red")
Answer: C) element.style.backgroundColor = "red"
Explanation: The style property allows you to modify the inline style of an element, and backgroundColor is the specific property to change the background color.
57. Which of the following methods will select the first element with the class 'example'?
- A) document.getElementByClass("example")
- B) document.querySelector(".example")
- C) document.querySelectorAll(".example")[0]
- D) Both B and C are correct
Answer: D) Both B and C are correct
Explanation: Both querySelector(".example") and querySelectorAll(".example")[0] return the first element with the class 'example', but querySelectorAll returns a NodeList.
58. Which of the following events occurs when a user clicks on an element?
- A) onClick
- B) onTouch
- C) onFocus
- D) onSubmit
Answer: A) onClick
Explanation: The onClick event is triggered when an element is clicked.
59. How can you get the height of an element including padding, but not the border or margin?
- A) element.offsetHeight
- B) element.clientHeight
- C) element.scrollHeight
- D) element.height
Answer: B) element.clientHeight
Explanation: clientHeight includes the element's padding but excludes the border and margin.
60. How do you stop the propagation of an event to other elements?
- A) event.preventDefault()
- B) event.stopPropagation()
- C) event.stopImmediatePropagation()
- D) event.preventEvent()
Answer: B) event.stopPropagation()
Explanation: stopPropagation() prevents the event from propagating (bubbling) to the parent elements.
61. Which of the following methods can be used to select the last child element of a parent?
- A) element.lastChild
- B) element.lastElementChild
- C) element.childElementAt(element.length-1)
- D) Both A and B are correct
Answer: D) Both A and B are correct
Explanation: Both lastChild and lastElementChild can be used to select the last child node or element, respectively.
62. How can you insert an element before another element in the DOM?
- A) element.insertBefore(newElement, referenceElement)
- B) element.appendChild(newElement)
- C) element.prependChild(newElement)
- D) element.addBefore(newElement, referenceElement)
Answer: A) element.insertBefore(newElement, referenceElement)
Explanation: The insertBefore() method inserts a new element before a specified reference element.
63. Which of the following methods is used to select all elements with a specific tag name?
- A) document.getElementsByTagName("tag-name")
- B) document.querySelector("tag-name")
- C) document.querySelectorAll("tag-name")
- D) document.getTag("tag-name")
Answer: A) document.getElementsByTagName("tag-name")
Explanation: getElementsByTagName() selects all elements with the specified tag name.
64. What is the correct syntax for adding an event listener for a 'mouseover' event?
- A) element.addEventListener("mouseover", myFunction)
- B) element.addEventListener("mouseHover", myFunction)
- C) element.onMouseOver(myFunction)
- D) element.mouseOver(myFunction)
Answer: A) element.addEventListener("mouseover", myFunction)
Explanation: addEventListener() attaches a 'mouseover' event handler to the element.
65. How can you change the text content of an element?
- A) element.text = "new text"
- B) element.changeText("new text")
- C) element.innerHTML = "new text"
- D) element.innerText = "new text"
Answer: D) element.innerText = "new text"
Explanation: The innerText property allows you to change the text content of an element.
66. How can you check if an element has a specific class?
- A) element.hasClass("class-name")
- B) element.classList.contains("class-name")
- C) element.classList.exists("class-name")
- D) element.className.check("class-name")
Answer: B) element.classList.contains("class-name")
Explanation: The classList.contains() method checks if the element contains the specified class.
67. Which method is used to get the first element that matches a CSS selector?
- A) document.querySelector()
- B) document.querySelectorAll()
- C) document.getElementById()
- D) document.getElementsByClassName()
Answer: A) document.querySelector()
Explanation: querySelector() returns the first element that matches the specified CSS selector.
68. What does the innerHTML property do?
- A) Sets or gets the content of an element, including HTML tags
- B) Sets or gets only the text content of an element
- C) Sets or gets only the HTML tags of an element
- D) Sets or gets the attributes of an element
Answer: A) Sets or gets the content of an element, including HTML tags
Explanation: innerHTML allows you to set or retrieve the HTML content of an element, including any tags within it.
69. How can you remove a class from an element?
- A) element.classList.remove("class-name")
- B) element.removeClass("class-name")
- C) element.remove("class-name")
- D) element.className.delete("class-name")
Answer: A) element.classList.remove("class-name")
Explanation: classList.remove() removes a specified class from an element.
70. What is the result of the getElementById() method when no matching element is found?
- A) Returns null
- B) Returns undefined
- C) Returns an empty string
- D) Throws an error
Answer: A) Returns null
Explanation: getElementById() returns null when no element with the specified ID is found.
71. Which event is triggered when a user clicks on an element?
- A) onFocus
- B) onClick
- C) onSubmit
- D) onLoad
Answer: B) onClick
Explanation: The onClick event occurs when a user clicks on an element.
72. How can you add an event listener to an element?
- A) element.addEventListener(event, function)
- B) element.onEvent(event, function)
- C) element.addEvent(event, function)
- D) element.listenEvent(event, function)
Answer: A) element.addEventListener(event, function)
Explanation: The addEventListener() method attaches an event listener to an element, allowing it to listen for specific events.
73. Which method is used to find an element by its class name?
- A) document.querySelector(".class-name")
- B) document.getElementsByClassName("class-name")
- C) document.querySelectorAll(".class-name")
- D) document.getElementByClass("class-name")
Answer: B) document.getElementsByClassName("class-name")
Explanation: getElementsByClassName() selects all elements with the specified class name.
74. How do you stop the propagation of an event?
- A) event.preventDefault()
- B) event.stopPropagation()
- C) event.stopImmediatePropagation()
- D) Both B and C
Answer: D) Both B and C
Explanation: stopPropagation() prevents the event from bubbling up the DOM, while stopImmediatePropagation() also prevents other listeners on the same element from being called.
75. What will happen if you use element.innerText = "<div>hello</div>"?
- A) The text "<div>hello</div>" will be added as plain text
- B) The HTML <div>hello</div> will be rendered inside the element
- C) An error will occur
- D) The element will be removed from the DOM
Answer: A) The text "<div>hello</div>" will be added as plain text
Explanation: The innerText property inserts the content as plain text, not as HTML tags.
76. Which method can be used to add an element as a child to another element?
- A) element.appendChild(newElement)
- B) element.insertChild(newElement)
- C) element.addChild(newElement)
- D) element.addChildTo(newElement)
Answer: A) element.appendChild(newElement)
Explanation: appendChild() adds a new child element to the specified parent element.
77. How do you get the width of an element including padding and border, but not margin?
- A) element.clientWidth
- B) element.offsetWidth
- C) element.scrollWidth
- D) element.width
Answer: B) element.offsetWidth
Explanation: offsetWidth returns the width of an element including padding and border but excluding margin.
78. What is the purpose of document.createElement()?
- A) To create a new document element
- B) To create a new HTML tag
- C) To create a new DOM element
- D) To create a new JavaScript function
Answer: C) To create a new DOM element
Explanation: document.createElement() is used to create a new element node in the DOM.
79. How can you get the text inside an element?
- A) element.getText()
- B) element.innerText
- C) element.getTextContent()
- D) element.textContent
Answer: D) element.textContent
Explanation: textContent returns the plain text inside an element, including text from child elements, but excludes HTML tags.
80. How do you set a new attribute for an element?
- A) element.setAttribute(attribute, value)
- B) element.addAttribute(attribute, value)
- C) element.newAttribute(attribute, value)
- D) element.createAttribute(attribute, value)
Answer: A) element.setAttribute(attribute, value)
Explanation: setAttribute() sets the specified attribute and its value on the given element.
81. Which of the following methods is used to remove an event listener?
- A) element.removeEventListener()
- B) element.detachEventListener()
- C) element.removeEvent()
- D) element.stopEventListener()
Answer: A) element.removeEventListener()
Explanation: removeEventListener() is used to remove an event listener that was previously added with addEventListener().
82. What is the purpose of event.target in an event handler?
- A) It refers to the element that triggered the event
- B) It refers to the parent element of the target element
- C) It prevents the event from bubbling up
- D) It stops the default action of the event
Answer: A) It refers to the element that triggered the event
Explanation: event.target refers to the element that triggered the event.
83. Which method can be used to get all child elements of an element?
- A) element.getChildren()
- B) element.childNodes()
- C) element.getElementsByClassName()
- D) element.children
Answer: D) element.children
Explanation: children returns all child elements of the specified element (ignores text and comment nodes).
84. What happens if you use element.innerHTML = "" on an element?
- A) The element will be hidden
- B) The element will be removed from the DOM
- C) The content inside the element will be cleared
- D) The element will be reset to its default state
Answer: C) The content inside the element will be cleared
Explanation: Setting innerHTML to an empty string clears the content inside the element.
85. How can you get an element by its tag name?
- A) document.getElementByTagName("tag-name")
- B) document.querySelectorAll("tag-name")
- C) document.getElementsByTagName("tag-name")
- D) document.getElementByTag("tag-name")
Answer: C) document.getElementsByTagName("tag-name")
Explanation: getElementsByTagName() returns all elements with the specified tag name.
86. Which property is used to change the background color of an element?
- A) element.backgroundColor
- B) element.style.backgroundColor
- C) element.bgColor
- D) element.setBackground("color")
Answer: B) element.style.backgroundColor
Explanation: The style property allows you to manipulate an element’s CSS, including the background color, using backgroundColor.
87. What does the document.querySelectorAll() method return?
- A) The first element matching the selector
- B) A list of all elements matching the selector
- C) A single element matching the selector
- D) An array of all elements in the document
Answer: B) A list of all elements matching the selector
Explanation: querySelectorAll() returns a NodeList containing all elements that match the specified CSS selector.
88. Which of the following is used to change the style of an element dynamically?
- A) element.setStyle()
- B) element.style.cssText
- C) element.style()
- D) element.modifyStyle()
Answer: B) element.style.cssText
Explanation: style.cssText allows you to set or get inline CSS styles directly on an element.
89. How do you select the last child of a parent element using CSS selectors?
- A) document.querySelector("
")
- B) document.querySelector("parent
")
- C) document.querySelector(".parent > last-child")
- D) document.querySelector(".parent
")
Answer: A) document.querySelector("
")
Explanation: :last-child is a CSS pseudo-class that selects the last child element within a parent.
90. How can you trigger a click event on an element programmatically?
- A) element.click()
- B) element.trigger("click")
- C) element.dispatchEvent("click")
- D) element.addEventListener("click", function)
Answer: A) element.click()
Explanation: click() triggers the click event on the specified element programmatically.
91. What does the event.preventDefault() method do?
- A) Stops the event from bubbling up
- B) Prevents the default action associated with the event
- C) Stops the event listener from being executed
- D) Prevents the event from being triggered
Answer: B) Prevents the default action associated with the event
Explanation: preventDefault() prevents the default action that belongs to the event (like submitting a form or following a link).
92. Which of the following methods adds a new HTML element as the last child of another element?
- A) element.insertBefore(newElement, null)
- B) element.appendChild(newElement)
- C) element.addChild(newElement)
- D) element.addLastChild(newElement)
Answer: B) element.appendChild(newElement)
Explanation: appendChild() adds a new element as the last child of the parent element.
93. How can you remove a child element from a parent element?
- A) element.removeChild(childElement)
- B) parent.removeChild(childElement)
- C) parent.deleteChild(childElement)
- D) parent.remove(childElement)
Answer: B) parent.removeChild(childElement)
Explanation: The removeChild() method removes a specified child element from the parent.
94. What method would you use to set or get the value of an input field?
- A) element.innerText
- B) element.value
- C) element.getValue()
- D) element.textContent
Answer: B) element.value
Explanation: The value property of input elements allows you to retrieve or set the current value of the input field.
95. Which of the following events is triggered when the user moves the mouse over an element?
- A) onmouseover
- B) onmouseenter
- C) onhover
- D) onmousemove
Answer: A) onmouseover
Explanation: The onmouseover event occurs when the mouse pointer moves over an element.
96. What method allows you to add a new CSS class to an element?
- A) element.addClass("class-name")
- B) element.classList.add("class-name")
- C) element.add("class-name")
- D) element.appendClass("class-name")
Answer: B) element.classList.add("class-name")
Explanation: classList.add() adds the specified class to an element.
97. How can you remove all child nodes of an element?
- A) element.clearChildren()
- B) element.innerHTML = ""
- C) element.removeChild()
- D) element.removeAllChildren()
Answer: B) element.innerHTML = ""
Explanation: Setting innerHTML to an empty string removes all child nodes and content within the element.
98. What is the purpose of document.getElementById("id")?
- A) To get all elements with the specified id
- B) To get the first element with the specified id
- C) To get the last element with the specified id
- D) To create a new element with the specified id
Answer: B) To get the first element with the specified id
Explanation: getElementById() returns the first element with the specified id or null if no element is found.
99. How can you attach a click event to multiple elements at once?
- A) Using querySelectorAll() and looping through each element
- B) Using addEventListener() on each element
- C) Both A and B
- D) None of the above
Answer: C) Both A and B
Explanation: You can attach an event to multiple elements by either using querySelectorAll() to select all elements and looping through them or attaching addEventListener() on each individual element.
100. Which property allows you to check the current width of an element, including padding and border?
- A) element.offsetWidth
- B) element.scrollWidth
- C) element.clientWidth
- D) element.width
Answer: A) element.offsetWidth
Explanation: offsetWidth returns the width of an element including padding, border, but not margin.
These questions continue to build upon fundamental DOM manipulation concepts such as element selection, event handling, and dynamic changes to content and styles in JavaScript.
