1. What is the difference between getElementById, getElementsByClassName, and querySelector / querySelectorAll?

   Answer: The simplest and most effective way to choose a single element is to use the getElementById method. It targets an HTML element's unique id attribute. due to the fact that IDs are made to be completely unique within a web page. When choosing several elements that have the same class attribute, the getElementsByClassName method is utilized. It returns an HTMLCollection with all matching elements rather than a single element. The most up-to-date and flexible choices are querySelector and querySelectorAll methods. They accept standard CSS selectors rather than just one class or ID. Only the first element that matches the supplied selector is returned by querySelector. QuerySelectorAll, on the other hand, returns each matching element enclosed in a NodeList.

2. How do you create and insert a new element into the DOM?

   Answer: By Creating the Element By Customizing the Element By Selecting a Parent and Inserting

3. What is Event Bubbling? And how does it work?

   Answer: Event Bubbling is a key concept that JavaScript uses in the Event Flow mechanism. It is the way that the JavaScript Event Flow mechanism handles the flow of events when nested elements have registered event listeners for the same event type. Event Bubbling is a JavaScript Document Object Model mechanism that allows the propagation of events from a nested element, first handling the event handlers associated with the nested element, and then propagating the event upward to all the ancestor elements. If you were to, for example, click on a nested the JavaScript event handling mechanism will first fire the click event associated with the and then seamlessly fire all the registered click events associated with the parent and then the parent of that and then the parent of that all the way up the tree until the root document object. While this is incredibly useful for handling all the different child events that you might have registered from a single parent object, you can intentionally interrupt the upward propagation of the event at any point by calling the event.stopPropagation() method.

4. What is Event Delegation in JavaScript? Why is it useful?

   Answer: Event Delegation is an "advanced" JavaScript technique for event handling that leverages the Event Bubbling feature. Rather than binding multiple event listeners to various child elements, you bind one central event listener to their common parent or ancestor element. Event delegation is very useful, primarily for performance optimization and dynamic content handling. Rather than binding multiple event listeners to hundreds or thousands of child elements, which would consume a lot of browser memory and slow down page loading, you bind only one listener to their common parent. Thanks to event bubbling, this parent element can "catch" and handle events fired by any of its children by checking the event.target object. Moreover, this single-listener solution automatically handles any new child elements dynamically loaded into the DOM through JavaScript code; since the permanent parent is already listening, you don't have to write additional code to bind new listeners to newly created elements, making your code much cleaner, faster, and more maintainable.

5. What is the difference between preventDefault() and stopPropagation() methods?

   Answer: The preventDefault() method prevents the browser from performing its native, or built-in, action on a given element when a given event occurs. For instance, the native action of clicking an (link) tag is navigating to a new URL, and the native action of clicking a submit button inside an is submitting the data and refreshing the page. The event.preventDefault() method prevents these native actions from occurring, allowing you to manually perform the navigation or form submission with JavaScript code instead. However, the event will still proceed normally up the DOM tree. The stopPropagation() method, however, is purely an event handling method. As explained in Event Bubbling, events will normally propagate, or travel, from the target element through all its parent containers. The event.stopPropagation() method will instantly stop this process. The event will still occur on the current element, but it will not be able to trigger any event listeners on its parent or ancestor elements. Importantly, this method does not prevent the browser's native action; a link will still navigate to a new page if you stop it from bubbling.