DOM Manipulation Methods

The Document Object Model (DOM) is a programming interface for HTML and XML documents
It represents the document as a tree of nodes, allowing JavaScript to interact with the document
DOM manipulation involves dynamically modifying the document structure and content

innerHTML: sets or gets the HTML content of an element
outerHTML: sets or gets the HTML content of an element, including the element itself
nodeValue: sets or gets the value of a node
className: sets or gets the class attribute of an element
style: sets or gets the style attribute of an element

An event is a signal that something has happened, such as a user clicking a button or a page loading
Events allow JavaScript to respond to user interactions and other actions

Mouse Events: triggered by user interactions with the mouse, such as clicking or hovering
Keyboard Events: triggered by user interactions with the keyboard, such as pressing a key
Form Events: triggered by user interactions with form elements, such as submitting a form
Window Events: triggered by actions related to the browser window, such as loading or resizing

An event listener is a function that is called when an event occurs
Event listeners can be attached to elements using the addEventListener method
The event listener function receives an Event object as an argument, which contains information about the event

Capturing Phase: the event is processed by the outermost element and then propagates down to the target element
Target Phase: the event is processed by the target element
Bubbling Phase: the event is processed by the target element and then propagates up to the outermost element

The Document Object Model (DOM) is a programming interface that represents HTML and XML documents as a tree of nodes, allowing JavaScript to interact with the document.
DOM manipulation involves dynamically modifying the document structure and content using various methods and properties.

createElement: creates a new element node, allowing JavaScript to add new elements to the document.
appendChild: adds a new child node to an existing element, enabling the creation of complex document structures.
insertBefore: inserts a new node before a specified node, providing flexibility in document manipulation.
removeChild: removes a child node from an element, enabling the removal of unwanted elements.
innerHTML: sets or gets the HTML content of an element, allowing JavaScript to modify element content.
textContent: sets or gets the text content of an element, enabling the modification of element text.

innerHTML: sets or gets the HTML content of an element, including formatting and tags.
outerHTML: sets or gets the HTML content of an element, including the element itself and its content.
nodeValue: sets or gets the value of a node, allowing JavaScript to access and modify node values.
className: sets or gets the class attribute of an element, enabling the styling and classification of elements.
style: sets or gets the style attribute of an element, allowing JavaScript to modify element styles.

Events are signals that something has happened, such as a user clicking a button or a page loading, enabling JavaScript to respond to user interactions and other actions.
Events allow JavaScript to react to various user interactions and actions, enhancing the user experience.

Mouse Events: occur when users interact with the mouse, such as clicking, hovering, or dragging, enabling JavaScript to respond to user gestures.
Keyboard Events: occur when users interact with the keyboard, such as pressing keys or combinations, allowing JavaScript to respond to keyboard input.
Form Events: occur when users interact with form elements, such as submitting a form or selecting an option, enabling JavaScript to respond to form submissions and changes.
Window Events: occur when actions related to the browser window happen, such as loading, resizing, or closing, allowing JavaScript to respond to window-related events.

An event listener is a function that is called when an event occurs, enabling JavaScript to respond to events.
Event listeners can be attached to elements using the addEventListener method, allowing JavaScript to capture events and respond accordingly.
The event listener function receives an Event object as an argument, which contains information about the event, such as the type of event and the target element.

Capturing Phase: the event is processed by the outermost element and then propagates down to the target element, allowing JavaScript to capture events at the outermost level.
Target Phase: the event is processed by the target element, enabling JavaScript to respond to the event at the element level.
Bubbling Phase: the event is processed by the target element and then propagates up to the outermost element, allowing JavaScript to respond to events at multiple levels.