Don't forget to hit the ⭐ if you like this repo.
Please answer the following 50 multiple-choice questions to test your knowledge in JavaScript DOM. You must place your answer file in the submission folder. Within the submission/Q1/set_a
folder, create a folder called your github_id
.
-
What does DOM stand for?
- a) Document Object Model
- b) Document Oriented Markup
- c) Data Object Model
- d) Data Oriented Markup
-
Which object represents the entire HTML document in the DOM?
- a)
window
- b)
document
- c)
html
- d)
body
- a)
-
Which method is used to select an element by its ID in the DOM?
- a)
getElementById()
- b)
getElementsByClassName()
- c)
querySelectorAll()
- d)
querySelector()
- a)
-
How do you create a new element in the DOM?
- a)
document.createElement()
- b)
document.newElement()
- c)
document.addNewElement()
- d)
document.makeElement()
- a)
-
How do you append a new child element to an existing element in the DOM?
- a)
appendChild()
- b)
addChildElement()
- c)
addNewElement()
- d)
createChildElement()
- a)
-
Which property is used to access the text content of an element in the DOM?
- a)
textContent
- b)
innerText
- c)
innerHTML
- d)
text
- a)
-
How do you add a CSS class to an element in the DOM?
- a)
classList.add()
- b)
element.addClass()
- c)
element.setAttribute()
- d)
element.addCSSClass()
- a)
-
How do you remove a CSS class from an element in the DOM?
- a)
classList.remove()
- b)
element.removeClass()
- c)
element.removeAttribute()
- d)
element.removeCSSClass()
- a)
-
Which method is used to add an event listener to an element in the DOM?
- a)
addEventListener()
- b)
attachEvent()
- c)
addEvent()
- d)
onEvent()
- a)
-
What does the
event.preventDefault()
method do?- a) Prevents the default behavior of an event
- b) Stops the propagation of an event
- c) Removes an event listener
- d) Executes the default behavior of an event
-
How do you access the parent element of an element in the DOM?
- a)
parentElement
- b)
parentNode
- c)
parent()
- d)
getParentElement()
- a)
-
How do you remove an element from the DOM?
- a)
remove()
- b)
removeElement()
- c)
delete()
- d)
deleteElement()
- a)
-
Which property is used to access the value of an input field in the DOM?
- a)
value
- b)
text
- c)
innerHTML
- d)
textContent
- a)
-
How do you change the CSS style of an element in the DOM?
- a) Access the
style
property of the element - b) Use the
addClass()
method - c) Use the
setAttribute()
method - d) Use the
changeStyle()
method
- a) Access the
-
How do you check if an element has a particular CSS class in the DOM?
- a)
classList.contains()
- b)
element.hasClass()
- c)
element.hasAttribute()
- d)
element.containsCSSClass()
- a)
-
Which method is used to select multiple elements by their class name in the DOM?
- a)
getElementsByClassName()
- b)
querySelectorAll()
- c)
querySelector()
- d)
getElementByClass()
- a)
-
What is the purpose of the
innerHTML
property in the DOM?- a) It sets or gets the HTML content of an element
- b) It sets or gets the text content of an element
- c) It sets or gets the CSS style of an element
- d) It sets or gets the value of an input field
-
How do you change the attribute value of an element in the DOM?
- a) Use the
setAttribute()
method - b) Use the
changeAttribute()
method - c) Use the
updateAttribute()
method - d) Use the
attributeValue()
method
- a) Use the
-
Which method is used to insert an element before another element in the DOM?
- a)
insertBefore()
- b)
insertElement()
- c)
appendChild()
- d)
addBeforeElement()
- a)
-
What is the purpose of the
querySelectorAll()
method in the DOM?- a) It selects and returns the first element that matches a specified CSS selector
- b) It selects and returns all elements that match a specified CSS selector
- c) It selects and returns the elements based on their class names
- d) It selects and returns the elements based on their IDs
-
How do you create a text node in the DOM?
- a)
document.createTextNode()
- b)
document.createText()
- c)
document.newText()
- d)
document.makeTextNode()
- a)
-
Which method is used to replace an element with another element in the DOM?
- a)
replaceChild()
- b)
replaceElement()
- c)
swapChild()
- d)
switchElement()
- a)
-
How do you access the first child element of an element in the DOM?
- a)
firstChild
- b)
firstElementChild
- c)
childElement
- d)
getChildElement()
- a)
-
What does the
event.stopPropagation()
method do?- a) Stops the propagation of an event
- b) Prevents the default behavior of an event
- c) Adds an event listener
- d) Executes the default behavior of an event
-
How do you check if an element has a particular attribute in the DOM?
- a)
hasAttribute()
- b)
attributeExists()
- c)
checkAttribute()
- d)
attributePresent()
- a)
-
How do you select the last child element of an element in the DOM?
- a)
lastChild
- b)
lastElementChild
- c)
childElement
- d)
getChildElement()
- a)
-
What is the purpose of the
innerText
property in the DOM?- a) It sets or gets the HTML content of an element
- b) It sets or gets the text content of an element
- c) It sets or gets the CSS style of an element
- d) It sets or gets the value of an input field
-
How do you remove all child elements of an element in the DOM?
- a)
innerHTML = ""
- b)
removeAllChildren()
- c)
removeChildElements()
- d)
deleteChildren()
- a)
-
Which method is used to clone an element in the DOM?
- a)
cloneNode()
- b)
duplicateNode()
- c)
copyElement()
- d)
createClone()
- a)
-
How do you access the next sibling element of an element in the DOM?
- a)
nextSibling
- b)
nextElementSibling
- c)
siblingElement
- d)
getNextElementSibling()
- a)
-
What is the purpose of the
offsetWidth
property in the DOM?- a) It returns the width of an element including padding, border, and scrollbar (if any)
- b) It returns the width of an element excluding padding, border, and scrollbar (if any)
- c) It returns the height of an element including padding, border, and scrollbar (if any)
- d) It returns the height of an element excluding padding, border, and scrollbar (if any)
-
How do you check if an element has any child elements in the DOM?
- a)
hasChildNodes()
- b)
hasChildren()
- c)
checkChildren()
- d)
childNodesExist()
- a)
-
Which method is used to scroll an element into view in the DOM?
- a)
scrollIntoView()
- b)
scrollTo()
- c)
scrollBy()
- d)
elementScroll()
- a)
-
How do you access the previous sibling element of an element in the DOM?
- a)
previousSibling
- b)
previousElementSibling
- c)
siblingElement
- d)
getPreviousElementSibling()
- a)
-
What is the purpose of the
offsetHeight
property in the DOM?- a) It returns the height of an element including padding, border, and scrollbar (if any)
- b) It returns the height of an element excluding padding, border, and scrollbar (if any)
- c) It returns the width of an element including padding, border, and scrollbar (if any)
- d) It returns the width of an element excluding padding, border, and scrollbar (if any)
-
How do you check if an element is hidden in the DOM?
- a)
element.hidden
- b)
element.isVisible()
- c)
element.isHidden()
- d)
element.display
- a)
-
Which method is used to determine the position of an element relative to the viewport in the DOM?
- a)
getBoundingClientRect()
- b)
getPosition()
- c)
calculatePosition()
- d)
elementPosition()
- a)
-
How do you access the closest ancestor element that matches a specified selector in the DOM?
- a)
closest()
- b)
findClosest()
- c)
getAncestor()
- d)
ancestorElement()
- a)
-
What is the purpose of the
clientWidth
property in the DOM?- a) It returns the width of an element including padding but excluding border and scrollbar (if any)
- b) It returns the width of an element excluding padding, border, and scrollbar (if any)
- c) It returns the width of an element including padding, border, and scrollbar (if any)
- d) It returns the width of an element including padding but excluding border and scrollbar (if any)
-
How do you access the computed CSS styles of an element in the DOM?
- a)
getComputedStyle()
- b)
element.getStyle()
- c)
element.getStyles()
- d)
computeStyles()
- a)
-
Which method is used to check if an element matches a specified CSS selector in the DOM?
- a)
matches()
- b)
elementMatches()
- c)
matchSelector()
- d)
checkSelector()
- a)
-
How do you check if an element has a particular data attribute in the DOM?
- a)
element.hasAttribute()
- b)
element.checkDataAttribute()
- c)
element.dataAttributeExists()
- d)
element.hasDataAttribute()
- a)
-
What is the purpose of the
clientHeight
property in the DOM?- a) It returns the height of an element including padding but excluding border and scrollbar (if any)
- b) It returns the height of an element excluding padding, border, and scrollbar (if any)
- c) It returns the height of an element including padding, border, and scrollbar (if any)
- d) It returns the height of an element including padding but excluding border and scrollbar (if any)
-
How do you access the computed width of an element including its padding, border, and scrollbar (if any) in the DOM?
- a)
offsetWidth
- b)
clientWidth
- c)
scrollWidth
- d)
computedWidth
- a)
-
Which method is used to check if an element is a descendant of another element in the DOM?
- a)
contains()
- b)
elementContains()
- c)
isDescendant()
- d)
checkDescendant()
- a)
-
How do you access the computed height of an element including its padding, border, and scrollbar (if any) in the DOM?
- a)
offsetHeight
- b)
clientHeight
- c)
scrollHeight
- d)
computedHeight
- a)
-
What is the purpose of the
scrollIntoView()
method in the DOM?- a) Scrolls the element into view, making it visible in the viewport
- b) Scrolls the element to a specified position
- c) Scrolls the entire document to a specified position
- d) Scrolls the element to the top of the page
-
How do you check if an element has a particular style property in the DOM?
- a)
element.style.hasOwnProperty()
- b)
element.hasStyleProperty()
- c)
element.style.containsProperty()
- d)
element.style.hasOwnProperty()
- a)
-
What is the purpose of the
scrollHeight
property in the DOM?- a) It returns the height of an element including its content, padding, and scrollbar (if any)
- b) It returns the height of an element excluding its content, padding, and scrollbar (if any)
- c) It returns the width of an element including its content, padding, and scrollbar (if any)
- d) It returns the width of an element excluding its content, padding, and scrollbar (if any)
-
How do you access the computed value of a CSS property of an element in the DOM?
- a)
getComputedStyle().getPropertyValue()
- b)
element.getComputedPropertyValue()
- c)
element.computeStyle()
- d)
getStyleValue()
- a)
Please answer the following 50 multiple-choice questions to test your knowledge in JavaScript DOM. You must place your answer file in the submission folder. Within the submission/Q1/set_b
folder, create a folder called your github_id
.
-
What does DOM stand for?
- a) Document Object Model
- b) Data Object Model
- c) Document Oriented Model
- d) Data Oriented Model
-
How do you select an element by its ID in JavaScript?
- a)
document.selectById()
- b)
document.getElement()
- c)
document.getElementById()
- d)
document.find()
- a)
-
What is the output of the following code snippet?
console.log(document.title);
- a)
undefined
- b)
null
- c) The title of the current web page
- d) The URL of the current web page
- a)
-
How do you change the text content of an HTML element using JavaScript?
- a)
element.value
- b)
element.innerHTML
- c)
element.text
- d)
element.textContent
- a)
-
Which method is used to add a CSS class to an element in JavaScript?
- a)
element.addClass()
- b)
element.class = "className"
- c)
element.classList.add()
- d)
element.style.addClass()
- a)
-
What is the output of the following code snippet?
console.log(document.body.tagName);
- a)
undefined
- b)
null
- c) The tag name of the
body
element - d) The number of elements in the
body
tag
- a)
-
How do you create a new HTML element using JavaScript?
- a)
document.createElement()
- b)
document.newElement()
- c)
document.addElement()
- d)
document.createNode()
- a)
-
What is the purpose of the
getAttribute
method in JavaScript?- a) To set the value of an attribute in an HTML element
- b) To remove an attribute from an HTML element
- c) To retrieve the value of an attribute from an HTML element
- d) To check if an attribute exists in an HTML element
-
What is the output of the following code snippet?
console.log(window.innerWidth);
- a) The width of the current web page
- b) The height of the current web page
- c) The width of the browser window
- d) The height of the browser window
-
How do you add an event listener to an HTML element using JavaScript?
- a)
element.addListener()
- b)
element.addEventListener()
- c)
element.attachEvent()
- d)
element.onEvent()
- a)
-
What is the purpose of the
style
property in JavaScript DOM?- a) To manipulate the CSS properties of an element
- b) To change the background color of an element
- c) To add inline styles to an element
- d) To apply CSS animations to an element
-
What is the output of the following code snippet?
console.log(document.links.length);
- a) The number of links in the current web page
- b) The number of links in the browser history
- c) The number of link elements in the DOM
- d) The number of anchor tags in the DOM
-
How do you select multiple elements by their class name in JavaScript?
- a)
document.getElements()
- b)
document.selectByClass()
- c)
document.getElementsByClassName()
- d)
document.find()
- a)
-
What is the output of the following code snippet?
console.log(document.forms.length);
- a) The number of forms in the current web page
- b) The number of form elements in the DOM
- c) The number of form tags in the DOM
- d) The number of form controls in the current web page
-
How do you remove an HTML element from the DOM using JavaScript?
- a)
element.remove()
- b)
element.delete()
- c)
element.removeChild()
- d)
element.hide()
- a)
-
What is the purpose of the
parentElement
property in JavaScript DOM?- a) To access the parent element of an HTML element
- b) To create a new parent element for an HTML element
- c) To append an HTML element to its parent element
- d) To check if an HTML element has a parent element
-
What is the output of the following code snippet?
console.log(document.images.length);
- a) The number of images in the current web page
- b) The number of image elements in the DOM
- c) The number of img tags in the DOM
- d) The number of image sources in the current web page
-
How do you access the value of an input element using JavaScript?
- a)
inputElement.text
- b)
inputElement.value
- c)
inputElement.content
- d)
inputElement.getAttribute('value')
- a)
-
What is the purpose of the
appendChild
method in JavaScript DOM?- a) To append an HTML element to another HTML element
- b) To remove an HTML element from its parent element
- c) To replace an HTML element with another element
- d) To insert an HTML element before another element
-
What is the output of the following code snippet?
console.log(document.head.tagName);
- a) The tag name of the
head
element - b) The tag name of the
body
element - c) The tag name of the
html
element - d) The tag name of the
title
element
- a) The tag name of the
-
How do you change the source of an image element using JavaScript?
- a)
imageElement.src = 'new-source.jpg'
- b)
imageElement.source = 'new-source.jpg'
- c)
imageElement.setAttribute('src', 'new-source.jpg')
- d)
imageElement.changeSource('new-source.jpg')
- a)
-
What is the purpose of the
querySelectorAll
method in JavaScript?- a) To select the first element that matches a CSS selector
- b) To select all elements that match a CSS selector
- c) To select the parent element of an HTML element
- d) To select the next sibling element of an HTML element
-
What is the output of the following code snippet?
console.log(document.documentElement.tagName);
- a) The tag name of the
html
element - b) The tag name of the
body
element - c) The tag name of the
head
element - d) The tag name of the
title
element
- a) The tag name of the
-
How do you check if an HTML element has a specific CSS class using JavaScript?
- a)
element.hasClass('className')
- b)
element.classList.contains('className')
- c)
element.style.contains('className')
- d)
element.getAttribute('class') === 'className'
- a)
-
What is the purpose of the
innerHTML
property in JavaScript DOM?- a) To retrieve the content of an HTML element
- b) To replace the content of an HTML element
- c) To insert HTML content into an element
- d) To modify the style of an HTML element
-
What is the output of the following code snippet?
console.log(document.charset);
- a) The character set of the current web page
- b) The encoding type of the browser
- c) The default character set of JavaScript
- d) The default encoding type of HTML
-
How do you create a text node using JavaScript DOM?
- a)
document.createTextNode()
- b)
document.createText()
- c)
document.newText()
- d)
document.createTextNodeValue()
- a)
-
What is the purpose of the
offsetWidth
property in JavaScript DOM?- a) To retrieve the width of an HTML element
- b) To retrieve the height of an HTML element
- c) To set the width of an HTML element
- d) To set the height of an HTML element
-
What is the output of the following code snippet?
console.log(document.doctype.name);
- a) The name of the document type
- b) The name of the browser
- c) The name of the programming language
- d) The name of the document object
-
How do you hide an HTML element using JavaScript?
- a)
element.hide()
- b)
element.style.visibility = 'hidden'
- c)
element.display = 'none'
- d)
element.style.display = 'none'
- a)
-
What is the purpose of the
nextElementSibling
property in JavaScript DOM?- a) To access the next sibling element of an HTML element
- b) To access the previous sibling element of an HTML element
- c) To access the parent element of an HTML element
- d) To check if an HTML element has a next sibling element
-
What is the output of the following code snippet?
console.log(document.defaultView.innerWidth);
- a) The width of the current web page
- b) The height of the current web page
- c) The width of the browser window
- d) The height of the browser window
-
How do you set the value of an attribute in an HTML element using JavaScript?
- a)
element.value = 'newValue'
- b)
element.setAttribute('attribute', 'newValue')
- c)
element.value('attribute', 'newValue')
- d)
element.set('attribute', 'newValue')
- a)
-
What is the purpose of the
classList
property in JavaScript DOM?- a) To access the list of CSS classes of an HTML element
- b) To add or remove CSS classes from an HTML element
- c) To check if an HTML element has a specific CSS class
- d) To apply CSS animations to an HTML element
-
What is the output of the following code snippet?
console.log(document.currentScript.src);
- a) The source URL of the current script file
- b) The source URL of the previous script file
- c) The source URL of the parent script file
- d) The source URL of the next script file
-
How do you check if an HTML element has a specific attribute using JavaScript?
- a)
element.hasAttribute('attribute')
- b)
element.containsAttribute('attribute')
- c)
element.getAttribute('attribute')
- d)
element.isAttribute('attribute')
- a)
-
What is the purpose of the
firstChild
property in JavaScript DOM?- a) To access the first child element of an HTML element
- b) To access the last child element of an HTML element
- c) To check if an HTML element has any child elements
- d) To create a new child element for an HTML element
-
What is the output of the following code snippet?
console.log(document.lastModified);
- a) The date and time when the current web page was last modified
- b) The date and time when the browser was last modified
- c) The date and time when the JavaScript code was last modified
- d) The date and time when the HTML file was last modified
-
How do you set the background color of an HTML element using JavaScript?
- a)
element.style.backgroundColor = 'color'
- b)
element.background = 'color'
- c)
element.setAttribute('background-color', 'color')
- d)
element.style.color = 'background'
- a)
-
What is the purpose of the
previousElementSibling
property in JavaScript DOM?- a) To access the previous sibling element of an HTML element
- b) To access the next sibling element of an HTML element
- c) To access the parent element of an HTML element
- d) To check if an HTML element has a previous sibling element
-
What is the output of the following code snippet?
console.log(document.embeds.length);
- a) The number of embed elements in the DOM
- b) The number of embedded objects in the current web page
- c) The number of embedded elements in the current web page
- d) The number of embed tags in the current web page
-
How do you access the value of a selected option in a dropdown menu using JavaScript?
- a)
selectElement.selectedOption.value
- b)
selectElement.value
- c)
selectElement.selected.value
- d)
selectElement.getAttribute('value')
- a)
-
What is the purpose of the
removeChild
method in JavaScript DOM?- a) To remove an HTML element from its parent element
- b) To remove an attribute from an HTML element
- c) To remove all child elements of an HTML element
- d) To remove a specific child element from an HTML element
-
What is the output of the following code snippet?
console.log(document.activeElement.tagName);
- a) The tag name of the currently focused element
- b) The tag name of the last clicked element
- c) The tag name of the first element in the DOM
- d) The tag name of the parent element of the active element
-
How do you check if an HTML element is hidden using JavaScript?
- a)
element.style.display === 'none'
- b)
element.isHidden()
- c)
element.getAttribute('hidden')
- d)
element.style.visibility === 'hidden'
- a)
-
What is the purpose of the
scrollIntoView
method in JavaScript DOM?- a) To scroll an HTML element into view
- b) To scroll to the top of an HTML document
- c) To scroll to the bottom of an HTML document
- d) To scroll to a specific position in an HTML document
-
What is the output of the following code snippet?
console.log(document.scripts.length);
- a) The number of script elements in the DOM
- b) The number of external script files in the current web page
- c) The number of inline script blocks in the current web page
- d) The number of script tags in the current web page
-
How do you access the parent element of an HTML element using JavaScript?
- a)
element.parent()
- b)
element.parent
- c)
element.parentNode
- d)
element.parentElement
- a)
-
What is the purpose of the
scrollHeight
property in JavaScript DOM?- a) To retrieve the height of an HTML element
- b) To retrieve the width of an HTML element
- c) To set the height of an HTML element
- d) To set the width of an HTML element
-
What is the output of the following code snippet?
console.log(document.hasFocus());
- a)
true
if the current web page has focus,false
otherwise - b)
true
if the browser window has focus,false
otherwise - c)
true
if the JavaScript code has focus,false
otherwise - d)
true
if the HTML file has focus,false
otherwise
- a)
Please create an Issue for any improvements, suggestions or errors in the content.
You can also contact me using Linkedin for any other queries or feedback.