Commonly asked interview questions about DOM in Javascript

1. What is DOM :

🔹DOM stands for Document Object Model.

🔹DOM is a programming interface that represents a web pages as a tree like structure, where every element like html tags,attributes and text is an object that can be accessed and modified using javascript.

2. How is the DOM different from HTML?

🔹HTML is a static code to define webpages structure.while DOM is the live memory representation of that structure.

▪️HTML exists the file and shows the initial content.

▪️DOM generated from HTML and CSS can be modified dynamically by javascript.

3. What are the different ways to select elements?

Common methods,
🔹getElementById(),

🔹getElementsByClassName(),
🔹getElementsByTagName(), 🔹querySelector(), 🔹querySelectorAll().
(TO BE DISCUSSED)

4. Compare innerHTML, innerText, and textContent.

🔹innerText: Gets/sets only visible text.

🔹innerHTML: Gets/sets HTML markup inside an element. (TBD)

🔹textContent: Gets/sets all text content, including hidden text, and is faster than innerText. (TBD)

5. How do you create and add a new element dynamically?

🔹Use document.createElement() to create the element.

🔹UseappendChild() or insertBefore() to add it to the DOM tree. (TBD)

6. What are JavaScript events?

🔹 Events are actions that occur in the browser, such as clicks, key presses, or page loads.

🔹 JavaScript can listen for these events and execute functions when they occur.

7. How do you add an event listener to an element? (TBD)

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
});

8. Explain the different types of DOM nodes.

🔹 Document node (root),
🔹 Element nodes (tags),
🔹 Attribute nodes,
🔹 Text nodes. (TBD)