DOM stands for Document Object Model, which is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
2. How can you access an element by its ID in the DOM?
a) document.getElement('id')
b) document.getElementById('id')
c) document.querySelector('#id')
d) Both b and c
Answer:
d) Both b and c
Explanation:
To access an element by its ID in the DOM, you can use document.getElementById('id') or document.querySelector('#id').
3. Which method is used to create a new element in the DOM?
a) document.createElement('element')
b) document.createNewElement('element')
c) document.addElement('element')
d) document.newElement('element')
Answer:
a) document.createElement('element')
Explanation:
The document.createElement('element') method is used to create a new element in the DOM.
4. How can you add a child element to a parent element in the DOM?
a) parent.appendChild(child)
b) parent.addChild(child)
c) parent.addElement(child)
d) parent.appendElement(child)
Answer:
a) parent.appendChild(child)
Explanation:
The appendChild(child) method is used to add a child element to the end of the list of children of a specified parent element.
5. What does the querySelector method do in the DOM?
a) Finds the first element that matches a specified CSS selector
b) Queries all elements in the document
c) Creates a new CSS selector
d) Returns the entire DOM structure
Answer:
a) Finds the first element that matches a specified CSS selector
Explanation:
querySelector returns the first element that matches a specified CSS selector in the document.
6. How do you change the text content of an element in the DOM?
a) element.textContent = 'new text'
b) element.changeText('new text')
c) element.text = 'new text'
d) element.setText('new text')
Answer:
a) element.textContent = 'new text'
Explanation:
The textContent property is used to get or set the text content of an element.
7. Which property is used to access or change the HTML content of an element?
a) element.htmlContent
b) element.innerHTML
c) element.contentHTML
d) element.setHTML
Answer:
b) element.innerHTML
Explanation:
The innerHTML property is used to get or set the HTML content of an element.
8. What is the purpose of the addEventListener method in the DOM?
a) To create new events
b) To remove event listeners
c) To attach an event handler to a specific element
d) To find elements with attached events
Answer:
c) To attach an event handler to a specific element
Explanation:
The addEventListener method is used to attach an event handler to a specific element.
9. How can you remove an element from the DOM?
a) element.remove()
b) document.removeElement(element)
c) element.delete()
d) document.deleteElement(element)
Answer:
a) element.remove()
Explanation:
The remove() method removes the element from the DOM.
10. What does the getElementById method return if no element is found?
a) An empty string
b) A new element
c) null
d) undefined
Answer:
c) null
Explanation:
If no element with the specified ID is found, getElementById returns null.
11. How can you access the style properties of an element in the DOM?
a) element.style
b) element.getStyle()
c) element.css
d) element.styles
Answer:
a) element.style
Explanation:
The style property is used to get or set the inline style of an element.
12. How do you get all elements with a specific class name in the DOM?
a) document.getElementsByClassName('class')
b) document.getElements('class')
c) document.querySelector('.class')
d) document.findElementsByClass('class')
Answer:
a) document.getElementsByClassName('class')
Explanation:
The getElementsByClassName method returns a live HTMLCollection of all elements with the specified class name.
13. What is the role of the parentNode property in the DOM?
a) It returns the parent element of a node
b) It creates a new parent node
c) It deletes the parent node
d) It clones the parent node
Answer:
a) It returns the parent element of a node
Explanation:
The parentNode property returns the parent node of a specified element in the DOM tree.
14. How can you detect when a user clicks on an element in the DOM?
a) element.onClick = function() {…}
b) element.addEventListener('click', function() {…})
c) element.click(function() {…})
d) Both a and b
Answer:
b) element.addEventListener('click', function() {…})
Explanation:
The addEventListener method is used to set up a function that will be called whenever the specified event is delivered to the target.
15. How can you select all <div> elements in the DOM?
a) document.getElementsByTagName('div')
b) document.querySelectorAll('div')
c) document.div
d) Both a and b
Answer:
d) Both a and b
Explanation:
You can select all <div> elements using document.getElementsByTagName('div') or document.querySelectorAll('div').