Skip to content

Latest commit

 

History

History
119 lines (90 loc) · 4.65 KB

8.DOM.md

File metadata and controls

119 lines (90 loc) · 4.65 KB

100 JS Questions (DOM)

Q1. What is DOM? What is the difference between HTML and DOM?

DOM (Document Object Model) represents the web page as a tree-like structure which allows JavaScript to dynamically access and manipulate the content and structure of a web page.

Feature DOM Virtual DOM
Representation Actual representation of the webpage Lightweight copy of the DOM
Re-rendering Re-renders the entire page Re-renders only the changed parts efficiently
Performance Can be slower, especially with frequent updates Optimized for faster rendering
Use Case Suitable for static websites and simple applications Ideal for dynamic and complex single-page applications with frequent updates

Q2. How do you select, modify, create and remove DOM elements? V. IMP.

image

Q3. What are selectors in JS?

Selectors in JS help to get specific elements from DOM based on IDs, class names, tag names.

DOM Selector methods:

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

Q4. Difference between getElementById, getElementsByClassName and getElementsByTagName ?

Method Description Returns
getElementById(id) Returns the first element with the specified ID. A single element or null if no element is found.
getElementsByClassName(className) Returns a live HTMLCollection of all elements with the specified class name. An HTMLCollection containing elements.
getElementsByTagName(tagName) Returns a live HTMLCollection of all elements with the specified tag name. An HTMLCollection containing elements.

Q5. What is the difference between querySelector() and querySelectorAll()? V.IMP.

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="myClass">Element 1</div>
  <div class="myClass">Element 2</div>
  <div class="myClass">Element 3</div>
  <script src="index.js"></script>
</body>
</html>
// Using querySelector() - returns the first element
var element = document.querySelector('.myClass');
console.log(element.textContent); // Output: Element 1
// Using querySelectorAll() - returns all the elements
var elements = document.querySelectorAll('.myClass');
elements.forEach(function(element) {
  console.log(element.textContent);
});
// Output: Element 1, Element 2, Element 3

Q6. What are the methods to modify elements properties and attributes?

DOM Methods for Modifying Elements and Their Properties

Method Description
textContent Sets or gets the text content of an element.
innerHTML Sets or gets the HTML content of an element.
setAttribute(attributeName, attributeValue) Sets the value of an attribute on an element.
removeAttribute(attributeName) Removes an attribute from an element.
style.setProperty(propertyName, propertyValue) Sets the value of a CSS property on an element.
classList.add(className) Adds a class to an element.

Q7. What is the difference between innerHTML and textContent? V. IMP.

Method Description
textContent Sets or gets the text content of an element.
innerHTML Sets or gets the HTML content of an element.

Q8. How to add and remove properties of HTML elements?

DOM methods for modifying elements and their properties

Method Description
setAttribute(attributeName, attributeValue) Sets the value of an attribute on an element.
removeAttribute(attributeName) Removes an attribute from an element.

Q9. How to add and remove style from HTML elements?

Method Description
style.setProperty(propertyName, propertyValue) Sets the value of a CSS property on an element.
classList.add(className) Adds a class to an element.

Q10. How to create new elements in DOM using JS?

Q11. Difference between createElement() and createTextNode()

Method Description
createElement(tagName) Creates a new element with the specified tag name.
cloneNode(deepCopy) Creates a clone of an existing node. If deepCopy is true, all child nodes are also cloned.
createTextNode(text) Creates a new text node with the specified text content.
innerHTML Sets or gets the HTML content of an element.
insertAdjacentHTML(where, text) Inserts the specified HTML content at the specified position relative to the element.
document.write(text) Writes the specified text into the document stream. Note: This method should be used with caution, as it can overwrite existing content.