Mastering DOM manipulation is essential for dynamic web development. This chapter explores DOM tree structure, element selection methods, content modification, attribute management, and efficient handling of elements using JavaScript.
DOM Tree Structure
What is the root element of the DOM tree in an HTML document? A) <head> B) <html> C) <body> D) <document>
Which type of node represents the text within an element? A) Element Node B) Text Node C) Attribute Node D) Document Node
What does the DOM represent in a web browser? A) The structure and style of a document B) The internal file system of the browser C) A tree-like representation of an HTML document D) The database of a web application
Which method is used to traverse the DOM tree? A) getElementById() B) parentNode C) querySelector() D) setAttribute()
What is the term for the relationship between a parent and its children in the DOM? A) Sibling relationship B) Hierarchical relationship C) Descendant relationship D) Inheritance
Which property can be used to access the direct child nodes of an element? A) children B) childNodes C) nodeType D) firstElementChild
What does the nodeType property return for an element node? A) 1 B) 2 C) 3 D) 4
Which node represents the entire HTML document in the DOM tree? A) Document Node B) Root Node C) Body Node D) Window Node
Selecting Elements (getElementById, querySelector, etc.)
What does document.getElementById("header") return? A) An array of elements with the ID “header” B) The first element with the ID “header” C) Null if no such ID exists D) Both B and C
What is the difference between querySelector and querySelectorAll? A) querySelector selects all elements, while querySelectorAll selects the first one B) querySelector selects one element, while querySelectorAll selects multiple C) Both methods always return arrays D) Both methods are deprecated
Which method is used to select elements by their class name? A) getElementsByTagName() B) querySelector() C) getElementsByClassName() D) getElementById()
What does querySelectorAll(".btn") return? A) An array of all elements with the class “btn” B) A NodeList of all elements with the class “btn” C) The first element with the class “btn” D) Null
How do you select all <p> elements inside a <div> using querySelector? A) document.querySelector("div p") B) document.querySelectorAll("div > p") C) document.querySelector("div > p") D) document.querySelectorAll("div p")
What does getElementsByTagName("li") return? A) An array of all <li> elements B) A NodeList of all <li> elements C) The first <li> element D) Undefined
Which selector is used to get the last child of a parent element? A) :last-child B) :nth-child() C) :first-child D) :only-child
Modifying Content and Attributes
How do you change the text inside a paragraph with ID para1? A) document.getElementById("para1").innerHTML = "New Text"; B) document.querySelector("para1").value = "New Text"; C) document.getElementById("para1").textContent = "New Text"; D) Both A and C
What does element.setAttribute("class", "active") do? A) Appends the “active” class to the element B) Replaces the current class with “active” C) Removes all attributes from the element D) None of the above
How do you remove an attribute from an element? A) element.removeAttribute("attrName") B) element.clearAttribute("attrName") C) element.deleteAttribute("attrName") D) element.disableAttribute("attrName")
What is the purpose of the classList property? A) To manipulate the style of an element B) To add, remove, or toggle CSS classes C) To apply multiple attributes at once D) To get the content of an element
Which property is used to update the value of an input field? A) innerHTML B) textContent C) value D) setAttribute
Creating, Adding, and Removing Elements
How do you create a new HTML element using JavaScript? A) document.createElement() B) document.addElement() C) document.newElement() D) document.appendChild()
What does appendChild() do in the DOM? A) Removes an element B) Creates a new element C) Adds a new child element to a parent node D) Updates the content of a child element
Which method is used to remove a DOM element? A) parentNode.removeChild() B) element.delete() C) document.removeElement() D) element.removeNode()
What is the difference between innerHTML and appendChild()? A) innerHTML replaces the content, while appendChild adds new content B) appendChild deletes existing content C) Both are identical methods D) Both manipulate styles only
How do you clone an existing DOM element? A) element.cloneNode() B) element.copyNode() C) document.duplicateNode() D) document.replicateNode()
What happens when cloneNode(true) is used? A) Clones only the element without children B) Clones the element along with its children C) Clones only the text inside the element D) None of the above
What is the purpose of removeChild()? A) To delete all children of an element B) To delete a specific child element C) To remove an element’s parent node D) To replace the content of a node
How do you insert a newly created element before an existing one? A) parentNode.insertBefore(newElement, referenceElement) B) parentNode.addChild(newElement, referenceElement) C) parentNode.appendChild(newElement, referenceElement) D) parentNode.prepend(newElement, referenceElement)
How do you check if a DOM element has a specific class? A) element.hasClass("className") B) element.classList.contains("className") C) element.classCheck("className") D) element.verifyClass("className")
Which method is best for creating a text node in the DOM? A) document.createTextNode() B) document.addText() C) document.newText() D) document.insertText()
Answers
QNo
Answer (Option with the text)
1
B) <html>
2
B) Text Node
3
C) A tree-like representation of an HTML document
4
B) parentNode
5
B) Hierarchical relationship
6
A) children
7
A) 1
8
A) Document Node
9
D) Both B and C
10
B) querySelector selects one element, while querySelectorAll selects multiple
11
C) getElementsByClassName()
12
B) A NodeList of all elements with the class “btn”
13
A) document.querySelector("div p")
14
B) A NodeList of all <li> elements
15
A) :last-child
Answers (Continued)
QNo
Answer (Option with the text)
16
D) Both A and C
17
B) Replaces the current class with “active”
18
A) element.removeAttribute("attrName")
19
B) To add, remove, or toggle CSS classes
20
C) value
21
A) document.createElement()
22
C) Adds a new child element to a parent node
23
A) parentNode.removeChild()
24
A) innerHTML replaces the content, while appendChild adds new content
25
A) element.cloneNode()
26
B) Clones the element along with its children
27
B) To delete a specific child element
28
A) parentNode.insertBefore(newElement, referenceElement)
