Hello World!
+ + + + ``` + - In above example, document.getElementById("demo") returns the element with id="demo". Then, innerHTML sets or returns the HTML content (inner HTML) of an element. + + - DOM tree representation of the above example: + ```jsx + Document + | + └── html + | + └── body + | + └── p (id="demo") + ``` + + #### Q2. What is the difference between window and document in JavaScript? + - The window object is the top level object in the browser. It contains all the global JavaScript objects, functions, and variables. + - The document object represents the DOM and is a part of the window object. It can be used to access and change the content of the document. + - The window object is supported by all browsers, while the document object is supported by all HTML pages loaded in the browser window. + - Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page. Using document object, JavaScript can modify, add and delete the HTML elements, attributes CSS styles in the page + + #### Q3. What are the different ways to get an element from DOM? + - There are multiple ways to get an element from DOM: + - document.getElementById() - returns the element that has the ID attribute with the specified value. + - document.getElementsByClassName() - returns a collection of all elements in the document with the specified class name. + - document.getElementsByTagName() - returns a collection of all elements in the document with the specified tag name. + - document.querySelector() - returns the first element that matches a specified CSS selector(s) in the document. + - document.querySelectorAll() - returns all elements that matches a specified CSS selector(s) in the document. + + + #### Q4. What is the difference between document.getElementById() and document.querySelector()? + - document.getElementById() returns the element with the specified ID, while document.querySelector() returns the first element that matches a specified CSS selector(s) in the document. + - Example: + ```jsx + + +Hello World!
+Hello World!
+ + + + ``` + - In above example, document.getElementById("demo") returns the element with id="demo". Then, innerHTML sets or returns the HTML content (inner HTML) of an element. + - document.querySelector(".demo") returns the first element that matches the specified CSS selector ".demo". Then, innerHTML sets or returns the HTML content (inner HTML) of an element. + + #### Q5. What is the difference between document.querySelector() and document.querySelectorAll()? + - document.querySelector() returns the first element that matches a specified CSS selector(s) in the document, while document.querySelectorAll() returns all elements that matches a specified CSS selector(s) in the document. + + #### Q6. What is the difference between innerHTML and innerText? + - innerHTML returns the HTML content (inner HTML) of an element, while innerText returns the text content of an element. + - Example: + ```jsx + + +Hello World!
+ + + + ``` + - In above example, document.getElementById("demo").innerHTML = "Hello Vishal!"; sets the HTML content (inner HTML) of an element. + - document.getElementById("demo").innerText = "Hello Vishal!"; sets the text content of an element. + + #### Q7. What is the difference between appendChild() and append()? + - appendChild() appends a node as the last child of a node, while append() appends a set of Node objects or DOMString objects to the end of the parent element. + + #### Q8. What is the difference between createElement() and createTextNode()? + - createElement() creates an Element Node with the specified name, while createTextNode() creates a Text Node with the specified text. + + #### Q9. Does document.onload and window.onload fire at the same time? + - No, document.onload and window.onload do not fire at the same time. + - window.onload is fired when DOM is ready and all the contents including images, css, scripts, sub-frames, etc. finished loaded. This means that the whole page including all of its dependencies are ready. + - document.onload is fired when DOM is ready which can be prior to images and other external content is loaded. + + #### Q10. What is the fastest way to select elements by using css selectors? + - It depends on what you are selecting. If you have an ID of an element getElmentById is the fastest way to select an element. However, you should not have so many ID in you document to avoid style repetition. css class getElementsByClassName is the second quickest way to select an element. + + #### Q11. What is reflow and repaint? + - Reflow: + - Reflow is the process of the browser laying out the page. It happens when you first display the DOM (generally after the DOM and CSS have been loaded), and happens again every time something could change the layout. + - When an elements' dimensions change, such as from adding content like text or an image, the browser recalculates the position and geometry of the elements in the document, which is called reflow. + - Reflow is a very expensive operation and should be avoided in critical code paths, such as onscroll and onresize events. + - Below are some things that causes reflow: + - Adding or removing content, such as paragraphs, images, or any other DOM element. + - Animating a DOM element. + - Hiding or showing an element by setting the display property to none. + - Changing any of the element's dimensions, such as width or height. + - Changing the font-size of an element. + + - Repaint: + - Repaint occurs after reflow as the browser draws the new layout to the screen. + - When an elements' paint-only properties change, such as background-color, border-color, visibility, etc., the browser repaints the element with the new specified values. + - Repaint is less expensive than reflow and is not as critical for performance. + - Below are some things that causes repaint: + - Changing the color of an element's text. + - Changing the background color of an element. + - Applying a CSS effect such as a shadow or outline. + - Showing or hiding an element by changing its visibility property. + - Adding or removing a class that applies a different style. + + #### Q12. What is event bubbling? How does event flows in DOM? + - Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element. + - To understand event bubble, you have to understand what happen when you click on anything on a page. + - When you click on anything on a page, the event is triggered on the innermost element and then it bubbles up to the outermost element. This is called event bubbling. + - Take example of below HTML code: + ```jsx +