DOM

What is DOM?
DOM stands for Document Object Model. It is a programming interface provided by browsers that represents the structure of a web page (HTML or XML) as a tree of objects.
Without DOM,JavaScript cannot interact with the web page.
With DOM, You can:
1.Change HTML content
2.Change styles(CSS)
3.Add or remove elements
4.Handle events(click,input,etc..)

DOM Structure
Document node: The root of the DOM tree, representing the entire HTML document. Accessed via document.
Element Nodes: Represent HTML elements (e.g.,

,

,).
Attribute Nodes: Represent attributes of HTML elements (e.g., id, class,href,src).
Text Nodes: Represent the text content within elements.
Comment Nodes: Represent HTML comments.
API (Application Programming Interface):
The DOM provides an API for interacting with the document, allowing JavaScript to:
Select Elements: Access specific elements using methods like getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), and** querySelectorAll().**
Manipulate Content: Change text content (textContent, innerText, innerHTML), modify attributes (setAttribute(), getAttribute(), removeAttribute()), and alter CSS styles (style property).
Manipulate Structure: Create new elements (createElement()), append/prepend elements (appendChild(), prepend()), insert elements (insertBefore()), and remove elements (removeChild()).
Handle Events: Attach event listeners to elements to respond to user interactions (e.g., clicks, keypresses, form submissions).