Skip to content

Latest commit

 

History

History
694 lines (568 loc) · 26.8 KB

n2q.md

File metadata and controls

694 lines (568 loc) · 26.8 KB

Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors Visitors

Don't forget to hit the ⭐ if you like this repo.

JavaScript: DOM

Set 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_a folder, create a folder called your github_id.

  1. What does DOM stand for?

    • a) Document Object Model
    • b) Document Oriented Markup
    • c) Data Object Model
    • d) Data Oriented Markup
  2. Which object represents the entire HTML document in the DOM?

    • a) window
    • b) document
    • c) html
    • d) body
  3. Which method is used to select an element by its ID in the DOM?

    • a) getElementById()
    • b) getElementsByClassName()
    • c) querySelectorAll()
    • d) querySelector()
  4. How do you create a new element in the DOM?

    • a) document.createElement()
    • b) document.newElement()
    • c) document.addNewElement()
    • d) document.makeElement()
  5. How do you append a new child element to an existing element in the DOM?

    • a) appendChild()
    • b) addChildElement()
    • c) addNewElement()
    • d) createChildElement()
  6. Which property is used to access the text content of an element in the DOM?

    • a) textContent
    • b) innerText
    • c) innerHTML
    • d) text
  7. 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()
  8. 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()
  9. Which method is used to add an event listener to an element in the DOM?

    • a) addEventListener()
    • b) attachEvent()
    • c) addEvent()
    • d) onEvent()
  10. 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
  11. How do you access the parent element of an element in the DOM?

    • a) parentElement
    • b) parentNode
    • c) parent()
    • d) getParentElement()
  12. How do you remove an element from the DOM?

    • a) remove()
    • b) removeElement()
    • c) delete()
    • d) deleteElement()
  13. Which property is used to access the value of an input field in the DOM?

    • a) value
    • b) text
    • c) innerHTML
    • d) textContent
  14. 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
  15. 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()
  16. Which method is used to select multiple elements by their class name in the DOM?

    • a) getElementsByClassName()
    • b) querySelectorAll()
    • c) querySelector()
    • d) getElementByClass()
  17. 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
  18. 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
  19. Which method is used to insert an element before another element in the DOM?

    • a) insertBefore()
    • b) insertElement()
    • c) appendChild()
    • d) addBeforeElement()
  20. 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
  21. How do you create a text node in the DOM?

    • a) document.createTextNode()
    • b) document.createText()
    • c) document.newText()
    • d) document.makeTextNode()
  22. Which method is used to replace an element with another element in the DOM?

    • a) replaceChild()
    • b) replaceElement()
    • c) swapChild()
    • d) switchElement()
  23. How do you access the first child element of an element in the DOM?

    • a) firstChild
    • b) firstElementChild
    • c) childElement
    • d) getChildElement()
  24. 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
  25. How do you check if an element has a particular attribute in the DOM?

    • a) hasAttribute()
    • b) attributeExists()
    • c) checkAttribute()
    • d) attributePresent()
  26. How do you select the last child element of an element in the DOM?

    • a) lastChild
    • b) lastElementChild
    • c) childElement
    • d) getChildElement()
  27. 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
  28. How do you remove all child elements of an element in the DOM?

    • a) innerHTML = ""
    • b) removeAllChildren()
    • c) removeChildElements()
    • d) deleteChildren()
  29. Which method is used to clone an element in the DOM?

    • a) cloneNode()
    • b) duplicateNode()
    • c) copyElement()
    • d) createClone()
  30. How do you access the next sibling element of an element in the DOM?

    • a) nextSibling
    • b) nextElementSibling
    • c) siblingElement
    • d) getNextElementSibling()
  31. 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)
  32. How do you check if an element has any child elements in the DOM?

    • a) hasChildNodes()
    • b) hasChildren()
    • c) checkChildren()
    • d) childNodesExist()
  33. Which method is used to scroll an element into view in the DOM?

    • a) scrollIntoView()
    • b) scrollTo()
    • c) scrollBy()
    • d) elementScroll()
  34. How do you access the previous sibling element of an element in the DOM?

    • a) previousSibling
    • b) previousElementSibling
    • c) siblingElement
    • d) getPreviousElementSibling()
  35. 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)
  36. How do you check if an element is hidden in the DOM?

    • a) element.hidden
    • b) element.isVisible()
    • c) element.isHidden()
    • d) element.display
  37. 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()
  38. How do you access the closest ancestor element that matches a specified selector in the DOM?

    • a) closest()
    • b) findClosest()
    • c) getAncestor()
    • d) ancestorElement()
  39. 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)
  40. How do you access the computed CSS styles of an element in the DOM?

    • a) getComputedStyle()
    • b) element.getStyle()
    • c) element.getStyles()
    • d) computeStyles()
  41. 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()
  42. 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()
  43. 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)
  44. 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
  45. 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()
  46. 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
  47. 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
  48. 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()
  49. 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)
  50. 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()

Set B

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.

  1. What does DOM stand for?

    • a) Document Object Model
    • b) Data Object Model
    • c) Document Oriented Model
    • d) Data Oriented Model
  2. How do you select an element by its ID in JavaScript?

    • a) document.selectById()
    • b) document.getElement()
    • c) document.getElementById()
    • d) document.find()
  3. 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
  4. 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
  5. 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()
  6. 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
  7. How do you create a new HTML element using JavaScript?

    • a) document.createElement()
    • b) document.newElement()
    • c) document.addElement()
    • d) document.createNode()
  8. 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
  9. 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
  10. 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()
  11. 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
  12. 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
  13. How do you select multiple elements by their class name in JavaScript?

    • a) document.getElements()
    • b) document.selectByClass()
    • c) document.getElementsByClassName()
    • d) document.find()
  14. 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
  15. How do you remove an HTML element from the DOM using JavaScript?

    • a) element.remove()
    • b) element.delete()
    • c) element.removeChild()
    • d) element.hide()
  16. 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
  17. 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
  18. 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')
  19. 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
  20. 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
  21. 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')
  22. 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
  23. 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
  24. 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'
  25. 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
  26. 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
  27. How do you create a text node using JavaScript DOM?

    • a) document.createTextNode()
    • b) document.createText()
    • c) document.newText()
    • d) document.createTextNodeValue()
  28. 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
  29. 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
  30. 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'
  31. 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
  32. 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
  33. 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')
  34. 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
  35. 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
  36. 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')
  37. 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
  38. 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
  39. 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'
  40. 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
  41. 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
  42. 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')
  43. 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
  44. 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
  45. 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'
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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

Contribution 🛠️

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.

Visitors