DOM_and_JS_Events_Presentation_simpleandShort.pptx

a presentation explaining the js dom and events.topics included event handling , event listeners

1. Introduction to DOM and JavaScript Events UNDERSTANDING THE DOCUMENT OBJECT MODEL AND HOW TO HANDLE EVENTS IN JAVASCRIPT

2. Introduction to the DOM The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

3. Structure of the DOM The DOM is a tree structure. Each element, attribute, and piece of text is represented as a node. Example of a simple DOM tree.

4. Accessing DOM Elements Methods to access elements: getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll. Example: document.getElementById('example').

5. Manipulating DOM Elements Changing content: innerHTML, textContent. Changing styles: style.property. Adding and removing elements: appendChild, removeChild, createElement.

6. JavaScript Events Events are actions that happen in the browser. Examples: clicking a button, loading a page, pressing a key. Event types: Mouse events, Keyboard events, Form events, Document/Window events.

7. Event Handling Adding event listeners: addEventListener. Inline event handlers: onclick, onchange, etc. Example: document.getElementById('button').addEventListener('click', function() { alert('Button clicked!'); });

8. Event Propagation Event bubbling: The event starts from the target element and bubbles up to the root. Event capturing: The event starts from the root and goes down to the target element. Stopping propagation: stopPropagation.

9. Practical Examples Click events: Changing the content of a paragraph when a button is clicked. Form events: Validating input when a form is submitted. Keyboard events: Detecting key presses.

10. Thank You