Introduction to Document Object Model • Therefore, DHTML does the following: • Works with JavaScript • Works with Data Object Model (DOM) • Works with CSS • Combines HTML with JavaScript

1. By: Daniel Bragais

2.  DHTML simply means dynamic
HTML.
Dynamic = changes each time it is
viewed, constantly changing. Like a
flowing river. 

3.  It is not a language, in the
sense HTML is a
Language that creates
Web pages or that
JavaScript create codes
that add interactivity to
HTML documents.

4.  Instead, DHTML is a collection
of technologies that supports
HTML and extends the
interactive capabilities of
browsers.

5.  Remember that HTML is a Static
and is mainly a language for
Structuring and presenting Web
page content. Web pages only
acquire interactivity when
JavaScript codes are introduced,
for example

6. • Some of the most
commonly used
technologies include
 JavaScript
 CSS
 Document Object Model(DOM)
 XHTML.

7.  Therefore, DHTML does the
following:
 Works with JavaScript
 Works with Data Object Model
(DOM)
 Works with CSS
 Combines HTML with JavaScript

8. Document Object Model
Provides a
way to TREAT individual
elements in
HTML
as objects.

9.  You can also think of DOM as a map
of your HTML document, with each
element acting as a marker. Once that
marker is set into place, it becomes
easy for JavaScript to work on this
marker, communicate with it, and get
feedback from it.

10. HTML DOM Tree

11.  Since HTML provides structures for
element in your Webpage. DOM also
recognizes the structure of an HTML
document. As HTML elements may
be placed within other elements,
DOM reads the HTML structure as a
map. It sees the map as composed of
sections, and within each section are
subsections and their elements.

12. How to Set Up a Document Object

13. Consider each element in your HTML as
an Object. DOM reads each HTML
element as a unique object and as a
node within your structure. However,
to set an element as a document you
must give it its unique identity by
using ID attribute. This can be done
This Ways:

14.  IDs are mainly used in HTML for
layout purposes and to identify the
unique elements in your HTML code.
Because it is a unique identifier, each
ID can be used only once in the page
in defining specific elements.

15. 
id
Specifies a unique id for the element.
Naming rules: Must contain at least
one character

Must not contain any space characters

In HTML, all values are case-
insensitive

16. Syntax
<element id="id">

17.  Definition and Usage
 The getElementById() method
accesses the first element with the
specified id.
 Syntax
 document.getElementById("id")

18.  javascript document.getelementbyid
 If you want to quickly access the
value of an HTML input give it
an id to make your life a lot easier.
This small script below will check to
see if there is any text in the text field
"myText". The argument
that getElementById requires is
the id of the HTML element you wish
to utilize.

19.  JavaScript Code:
 <script type="text/javascript"> function
notEmpty(){ var myTextField =
document.getElementById('myText');
if(myTextField.value != "") alert("You
entered: " + myTextField.value) else
alert("Would you please enter some text?") }
</script> <input type='text' id='myText' />
<input type='button' onclick='notEmpty()'
value='Form Checker' />

23.  document.getElementById returned a
reference to our HTML
element myText. We stored this
reference into a variable, myTextField,
and then used the valueproperty that
all input elements have to use to grab
the value the user enters.
 There are other ways to accomplish
what the above script does, but this is
definitely a straight-forward and
browser-compatible approach.

24. Thank
you!!!
dan_brgs87@yahoo.com
www.codecademy.com/groups/danlike
dojo/invite/7e343de793e7752aabb734
dc624eb319