�ݺ�ߣ

INTRODUCTION TO
JAVASCRIPT DOM AND
USER INPUT
By
Gevita Chinnaiah

OVERVIEW
 Introduction to JavaScript
 What the DOM is
 Importance of handling user input

INTRODUCTION TO JAVASCRIPT
 JavaScript is a popular programming language
that is primarily used to create interactive and
dynamic features on websites.
 JavaScript has grown into a powerful tool used in
many different contexts, including server-side
programming, mobile app development, and even
desktop applications.

WHAT IS THE DOM?
 The Document Object Model (DOM) is a
programming interface provided by browsers that
allows scripts to dynamically access and update
the content, structure, and style of a document.
 DOM represents an HTML (or XML) document
as a tree structure wherein each node is an object
representing a part of the document

DOM REPRESENTS AN HTML
DOCUMENT

WHY MANIPULATE THE DOM?
 Manipulating the Document Object Model (DOM)
is a Important aspect of creating interactive and
dynamic web applications.
 Dynamic Content Updates
 Real-time Interactions
 User Feedback:
 Interactive User Interfaces (UIs)
 Rich Interactions
 Personalization
 Accessibility Enhancements

ACCESSING THE DOM
 The Document Object Model (DOM) is a
programming interface that allows scripts to
update the content, structure, and style of a
document.
 DOM provides a structured representation of the
HTML or XML document
 JavaScript interacts with the DOM to
dynamically manipulate web pages.
‘document’

METHODS FOR ACCESSING
ELEMENTS
 getElementById(id):
 Usage: document.getElementById('header').
 Returns: The first element with the given ID, or null if no
such element exists.
 getElementsByClassName(className):
 Usage: document.getElementsByClassName('active').
 Returns: A live HTMLCollection of elements with the given
class names. It updates automatically when elements are
added or removed.
 querySelector(selector):
 Usage: document.querySelector('.menu-item') for classes,
document.querySelector('#menu') for IDs, or
document.querySelector('div') for tags.
 Returns: The first element that matches the specified CSS
selector, or null if no matches are found.

ADVANCED SELECTION WITH
QUERYSELECTORALL
 Method
 querySelectorAll(selector)
 Purpose
 Similar to querySelector, but selects all elements that
match the specified CSS selector.
 Usage
 document.querySelectorAll('.highlight').
 Returns
 A static NodeList containing all the elements
that match the selector. Unlike HTMLCollection,
NodeList does not update automatically.

COMMON DOM METHODS
 1. innerHTML
 Example: element.innerHTML = "<strong>Hello World!</strong>";
sets the inner HTML of the element to include a bolded "Hello
World".
 2. textContent
 Example: element.textContent = "Hello World"; updates the text
within an element, removing any existing HTML or text formatting.
 3. createElement
 Example: var newDiv = document.createElement('div'); creates a
new <div> element which can later be added to the DOM.
 4. appendChild
 Example: document.body.appendChild(newDiv); adds the
previously created <div> element to the body of the document.
 5. removeChild
 Example: document.body.removeChild(existingDiv); removes the
specified existingDiv element from the body of the document.

USER EVENTS IN JAVASCRIPT
 In JavaScript, events are actions or occurrences
that happen in the browser, often as a result of
user interaction or system-generated triggers
 Common Event Types:
 Click Event
 Load Event
 Input Event
 Submit Event
 Mouse Events (e.g., mouseover, mouseout)

EVENT LISTENERS
 Event listeners in JavaScript are used to respond
to various events that occur on HTML elements,
such as clicks, mouse movements, keypresses,
form submissions.
 The addEventListener method is a basic tool for
attaching event listeners to elements in the
DOM.

EVENT LISTENERS AND
ADDEVENTLISTENER
 Event listeners allow JavaScript to "listen" for
specific events on HTML elements and execute
code in response to those events.
 The addEventListener method is used to register
event handlers on HTML elements.
 Syntax of addEventListener:

ADDING AN EVENT LISTENER TO
A BUTTON
 Consider an HTML button element with the id
"myButton":
 use addEventListener to attach a click event
listener.

HANDLING FORM INPUT
 Handling form input in JavaScript involves
capturing user input from HTML form elements
and responding to user actions such as typing or
selecting options.
 Input
 Change events.

INPUT EVENT
 The input event is triggered whenever the value
of an input field changes.

CHANGE EVENT
 The change event is triggered when the value of
an input field changes and then the element loses
focus.

PRACTICAL EXAMPLE:
INTERACTIVE FORM
1. Dynamic Form Validation
2. Live Character Count
3. Dropdown Selection

�ݺ�ߣ

Introduction to JavaScript DOM and User Input.pptx

Recommended

More Related Content

Similar to Introduction to JavaScript DOM and User Input.pptx (20)

More from GevitaChinnaiah (20)

Recently uploaded (20)

Introduction to JavaScript DOM and User Input.pptx