PHP & JS FRAMEWORK 1
20CSI504-PHP & JS FRAMEWORK
Module :II
Module name :JavaScript Fundamentals
Topic :JS HTML DOM
Faculty :Dr. S. Karthikeyini, AP/[Link] CSE
2
3
4
5
6
7
Example
PHP & JS FRAMEWORK 8
HTML DOM
• The HTML DOM is a standard object model
and programming interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
PHP & JS FRAMEWORK 9
DOM METHODS
• HTML DOM methods are actions you can perform (on
HTML Elements).
• HTML DOM properties are values (of HTML Elements)
that you can set or change.
PHP & JS FRAMEWORK 10
DOM PROGRAMMING INTERFACE
• The HTML DOM can be accessed with Java Script (and
with other programming languages).
• In the DOM, all HTML elements are defined as objects.
• The programming interface is the properties and methods
of each object.
• A property is a value that you can get or set (like
changing the content of an HTML element).
• A method is an action you can do (like add or deleting an
HTML element).
PHP & JS FRAMEWORK 11
EXAMPLE
PHP & JS FRAMEWORK 12
HTML DOM Document Object
• The document object represents your web page.
• If you want to access any element in an HTML page, you
always start with accessing the document object.
• Below are some examples of how you can use the
document object to access and manipulate HTML.
PHP & JS FRAMEWORK 13
Finding HTML Elements
PHP & JS FRAMEWORK 14
Changing HTML Elements
PHP & JS FRAMEWORK 15
Adding and Deleting Elements
PHP & JS FRAMEWORK 16
JavaScript HTML DOM Elements
• Often, with JavaScript, you want to manipulate HTML
elements.
• To do so, you have to find the elements first. There are
several ways to do this:
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
PHP & JS FRAMEWORK 17
Finding HTML Element by Id
• The easiest way to find an HTML element in the DOM, is
by using the element id.
• This example finds the element with id="intro":
PHP & JS FRAMEWORK 18
EXAMPLE
PHP & JS FRAMEWORK 19
Finding HTML Elements by Tag Name
PHP & JS FRAMEWORK 20
Changing HTML Content
• The easiest way to modify the content of an HTML
element is by using the innerHTML property.
• To change the content of an HTML element, use this
syntax:
• [Link](id).innerHTML = new HTML
PHP & JS FRAMEWORK 21
EXAMPLE
PHP & JS FRAMEWORK 22
Changing the Value of an Attribute
• To change the value of an HTML attribute, use this syntax:
• [Link](id).attribute = new value
PHP & JS FRAMEWORK 23
Dynamic HTML content
PHP & JS FRAMEWORK 24
JavaScript Forms
• HTML form validation can be done by JavaScript.
• If a form field (fname) is empty, this function alerts a
message, and returns false, to prevent the form from
being submitted:
PHP & JS FRAMEWORK 25
EXAMPLE
PHP & JS FRAMEWORK 26
HTML DOM - Changing CSS
• To change the style of an HTML element, use this syntax:
• [Link](id).[Link] = new style
PHP & JS FRAMEWORK 27
Using Events
• The HTML DOM allows you to execute code when an
event occurs.
• Events are generated by the browser when "things
happen" to HTML elements:
• An element is clicked on
• The page has loaded
• Input fields are changed
PHP & JS FRAMEWORK 28
EXAMPLE
PHP & JS FRAMEWORK 29
DOM EVENTS
• A JavaScript can be executed when an event occurs, like
when a user clicks on an HTML element.
• To execute code when a user clicks on an element, add
JavaScript code to an HTML event attribute:
• onclick=JavaScript
PHP & JS FRAMEWORK 30
EXAMPLE
31