DOM Interview Questions

What is DOM?
DOM(Document Object Model)is a programming interface that represents a web page as a tree-like structure using DOM JavaScript make the html and css to behave dynamic
In this DOM each HTML element is an Object that can be accessed and manipulated

How to access an Element using DOM?
document.getElementById("myElement"); // Select by ID
document.getElementsByClassName("myClass"); // Select by Class
document.getElementsByTagName("p"); // Select by Tag Name
document.querySelector(".myClass"); // Select First Matching Element
document.querySelectorAll(".myClass"); // Select All Matching Elements

document is an object (the whole webpage is the document) Note: can be verified as when html file is created the default title is Document

An element in object can be accessed using DOT operator so (".") after document is used to call the methods inside of object document

listed methods like
getElementById("myElement");
getElementsByClassName("myClass");
getElementsByTagName("p");
querySelector(".myClass");
querySelectorAll(".myClass");
are some of the methods available in document to access the exact element in HTML

const element = document.getElementById("myElement");

element.innerText = "Welcome";

here myElement is itself an object that was stored in variable "element" so now the object name of the "myElement" is "element" by using this object name now the values inside can be modified

innerText is a key that is inside the object myElement(element) its value is now being modified

What is event in Javascript?
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

How do you create and append a new element dynamically?
JavaScript allows you to create and append new elements dynamically using the Document Object Model (DOM) methods

document.createElement(): Creates a new element node of the specified type (e.g., div, p, button).(TBD)
element.textContent / innerHTML: Lets you add text or HTML content inside the newly created element.(TBD)
parent.appendChild() / parent.append(): Appends the new element to a parent node in the DOM, making it visible on the page.(TBD)