Host Objects Browsers and the DOM

1
Host Objects Browsers and the DOM

• Advisor Rung-Hung Gau
• Speaker Tsai-Fang Yeh
• Date Apr. 25 , 2007

2
Outline

• What is the DOM?
• HTML DOM Nodes
• Event Object
• Examples
• Summary

3
What is the DOM?

• With JavaScript you can restructure an entire
  HTML document. You can add, remove, change, or
  reorder items on a page.
• To change anything on a page, JavaScript needs
  access to all elements in the HTML document. This
  access, along with methods and properties to add,
  move, change, or remove HTML elements, is given
  through the Document Object Model (DOM).
• The DOM can be used by JavaScript to read and
  change HTML, XHTML, and XML documents.
• The DOM is separated into different parts (Core,
  XML, and HTML) and different levels (DOM Level
  1/2/3)

4
DOM Parts Levels

• Core DOM - defines a standard set of objects for
  any structured document
• XML DOM - defines a standard set of objects for
  XML documents
• HTML DOM - defines a standard set of objects for
  HTML documents
• Level 0 
• The application supports an intermediate DOM,
  which existed before the creation of DOM Level 1.
  Examples include the DHTML Object Model or the
  Netscape intermediate DOM. Level 0 is not a
  formal specification published by the W3C but
  rather a shorthand that refers to what existed
  before the standardization process.
• Level 1 
• Navigation of DOM (HTML and XML) document (tree
  structure) and content manipulation (includes
  adding elements). HTML-specific elements are
  included as well.
• Level 2 
• XML namespace support, filtered views and events.
  
• Level 3 
• Consists of 6 different specifications
• DOM Level 3 Core?Load and Save ?XPath ?Views and
  Formatting ?Requirements ?Validation.

5
HTML DOM Nodes

• According to the DOM, everything in an HTML
  document is a node.
• The DOM says that
• The entire document is a document node
• Every HTML tag is an element node
• The texts contained in the HTML elements are text
  nodes
• Every HTML attribute is an attribute node
• Comments are comment nodes
• Nodes have a hierarchical relationship to each
  other.
• All nodes in an HTML document form a document
  tree (or node tree). The tree starts at the
  document node and continues to branch out until
  it has reached all text nodes at the lowest level
  of the tree.

6
HTML DOM Node Tree
lthtmlgt ltheadgt lttitlegtMy
titlelt/titlegt lt/headgt ltbodygt lta
hrefwww.msn.comgtMy Linklt/agt lth1gtMy
headerlt/h1gt lt/bodygt lt/htmlgt
7

• Document Tree

8
HTML DOM Access Nodes

• With the DOM, you can access every node in an
  HTML document.
• You can find the element you want to manipulate
  in several ways
• By using the getElementById() and
  getElementsByTagName() methods
• By using the parentNode, firstChild, and
  lastChild properties of an element node
• There are two special document properties that
  allow access to the tags
• document.documentElement
• document.body
• The first property returns the root node of the
  document and exists in all XML and HTML
  documents.
• The second property is a special addition for
  HTML pages, and gives direct access to the ltbodygt
  tag.

9
getElementById() and getElementsByTagName()

• The two methods getElementById() and
  getElementsByTagName(), can find any HTML element
  in the entire document.
• The getElementById() method doesn't work in XML.
  In an XML document, you must search through
  attributes that have the type id, and this type
  must be declared in the XML document's Document
  Type Definition (DTD).
• The two methods ignore the document structure. If
  you want to find all ltpgt elements in the
  document, the getElementsByTagName() method will
  find them all, regardless of on which level the
  ltpgt elements are. Furthermore, the
  getElementById() method always returns the
  correct element, wherever it is hidden in the
  document structure.
• The getElementsByTagName() method returns all
  elements (as a nodeList) with the specified tag
  name that are descendants of the element you are
  on when using this method.

10

• Example 1
• The following example returns a nodeList of all
  ltpgt elements in the document
• document.getElementsByTagName("p")
• Example 2
• The following example returns a nodeList of all
  ltpgt elements that are descendants of the element
  with id"maindiv"
• document.getElementById('maindiv').getElementsByTa
  gName("p")

11
parentNode, firstChild, lastChild

• The three properties parentNode, firstChild, and
  lastChild follow the document structure and allow
  short-distance travel in the document.
• lttablegt
• lttrgt
• lttdgtJohnlt/tdgt
• lttdgtDoelt/tdgt
• lttdgtAlaskalt/tdgt
• lt/trgt
• lt/tablegt
• In the HTML code above, the first lttdgt is the
  firstChild of the lttrgt element, and the last lttdgt
  is the lastChild of the lttrgt element.
• Furthermore, the lttrgt is the parentNode of every
  lttdgt element.

12
parentNode

• The parentNode property is often used to change
  the document structure.
• Suppose you want to remove the node with
  id"maindiv" from the document
• var xdocument.getElementById("maindiv")
• x.parentNode.removeChild(x)
• First you find the node with the specified id,
  then you move to its parent and execute the
  removeChild() method.

13
firstChild, lastChild

• The most common use of firstChild?lastChild is to
  access the text of an element
• lthtmlgt ltheadgt lttitlegtlt/titlegt lt/headgt
  ltbodygt ltpgtThis is a sample
  paragraph.lt/pgt ltSCRIPT
  LANGUAGE"JavaScript"gt lt!--
  alert(document.documentElement.lastChild.firstChil
  d.tagName) //--gt
  lt/SCRIPTgt lt/bodygtlt/htmlgt

14
Event Object

• The Event object represents the state of an
  event, such as the element in which the event
  occurred, the state of the keyboard keys, the
  location of the mouse, and the state of the mouse
  buttons.
• Events are normally used in combination with
  functions, and the function will not be executed
  before the event occurs!
• There is a huge collection of events that can be
  generated by most element nodes
• Mouse events
• Keyboard events
• HTML frame/object events
• HTML form events
• User interface events
• Mutation events (notification of any changes to
  the structure of a document)

15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
Example

• Rollover
• TreeOutline
• HostObjects

19
Summary

• The Document Object Model is a platform- and
  language-neutral interface that will allow
  programs and scripts to dynamically access and
  update the content, structure and style of
  documents. The document can be further processed
  and the results of that processing can be
  incorporated back into the presented page. This
  is an overview of DOM-related materials here at
  W3C and around the web.