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 Checkbox Object

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

3
Example checkbox.html checkbox1.html
checkbox2.html
4
HTML DOM Radio Object

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

5
Example quiz.html
6
HTML DOM Select Object

• The Select object represents a dropdown list in
  an HTML form.
• For each instance of an HTML ltselectgt tag in a
  form, a Select object is created.
• You can access a Select object by searching
  through the elements array of the form, or by
  using document.getElementById().

7
Example select1.html select2.html select3.html
8
HTML DOM Textarea Object

• The Textarea object represents a text-area in an
  HTML form. For each instance of an HTML
  lttextareagt tag in a form, a Textarea object is
  created.
• You can access a Textarea object by indexing the
  elements array (by number or name) of the
  corresponding form or by using getElementById().

9
HTML DOM Textarea Object

• Example textarea.html

10
HTML DOM Table Object

• The Table object represents an HTML table.
• For each instance of a lttablegt tag in an HTML
  document, a Table object is created.

11
Example button.html
12
HTML DOM TableRow Object

• The TableRow object represents an HTML table row.
• For each instance of a lttrgt tag in an HTML
  document, a TableRow object is created.

13
(No Transcript)
14
HTML DOM TableCell Object

• The TableCell object represents an HTML table
  cell.
• For each instance of a lttdgt tag in an HTML
  document, a TableCell object is created.

15
(No Transcript)
16
More Examples More Object

• http//www.w3schools.com/htmldom/default.asp