Chapter 13 Document Object Model DOM

1
Chapter 13 Document Object Model (DOM)
Outline More on the DOM Objects The following
slides are based on w3school tutorial on HTML
DOM http//www.w3schools.com/htmldom/default.asp
(12.7,12.8 and Chapter 13) Please use the link
above to get more information. The list of events
can be found on the link following
link http//www.w3schools.com/jsref/jsref_events.a
sp (Chapter 14)
2
HTML DOM Anchor Object

• The Anchor object represents an HTML hyperlink.
• You can access an anchor by searching through the
  anchors array in the Document object, or by
  using document.getElementById().

3
Example anchor.html
4
HTML DOM Area Object

• The Area object represents an area of an
  image-map (An image-map is an image with
  clickable regions).
• For each instance of an ltareagt tag in an HTML
  document, an Area object is created.

5
HTML DOM Base Object

• The Base object represents an HTML base element.
• For each instance of a ltbasegt tag in an HTML
  document, a Base object is created.

6
HTML DOM Body Object

• The Body object represents the body of the
  document (the HTML body).

7
Example body.html
8
HTML DOM Form Object

• The Form object represents an HTML form.
• For each instance of a ltformgt tag in an HTML
  document, a Form object is created.

9
Example form_elements.html
10
HTML DOM Image Object

• The Image object represents an embedded image.
• For each instance of an ltimggt tag in an HTML
  document, an Image object is created.

11
HTML DOM Image Object

• Example image.html

12
DOM Input Button

• The Button object represents a button in an HTML
  form.
• For each instance of an ltinput type"button"gt tag
  in an HTML form, a Button object is created.
• You can access a button by searching through the
  elements array of the form, or by using
  document.getElementById().

13
Example button.html
14
HTML DOM Text Object

• The Text object represents a text-input field in
  an HTML form.
• For each instance of an ltinput type"text"gt tag
  in an HTML form, a Text object is created.
• You can access a text-input field by searching
  through the elements array of the form, or by
  using document.getElementById().

15
Example formvalidate.html
16
HTML DOM Hidden Object

• The Hidden object represents a hidden input field
  in an HTML form.
• For each instance of an ltinput type"hidden"gt tag
  in an HTML form, a Hidden object is created.
• You can access a hidden input field by searching
  through the elements array of the form, or by
  using document.getElementById().

17
HTML DOM Password Object

• The Password object represents a password field
  in an HTML form.
• For each instance of an HTML ltinput
  type"password"gt tag on a form, a Password object
  is created.
• You can access a password field by searching
  through the elements array of the form, or by
  using document.getElementById().