Document Sample
dom Powered By Docstoc
 Document Is The Application

• With the introduction of client-side
  event-handling scripting languages such
  as JavaScript, the nature of documents
  changed from passive to active.

• The documents themselves became
  "live" applications.
  Document Is The User-Interface
• If documents are becoming applications, we need to
  manage a set of user-interactions with a body of
• The document thus becomes a user-interface to
  information that can change the information and the
  interface itself.
• HTML itself is a static data format; How the browser
  renders the various elements of an HTML page is a
  behavior that is pre-defined.
• We can change these behaviors to create and
  control new kinds of behaviors by defining them in
  scripts (for example, using JavaScript) or as
  formatting properties using cascading style sheets
     Document Is The Data
• eXtensible Markup Language (XML) is
  increasingly being used as a way of
  representing many different kinds of
  information that may be stored in
  diverse systems, and much of this
  would be seen as data rather than as
• Nevertheless, XML presents this data
  as a document.
              The Chaos
• HTML 4.0, has a standard way to embed
  scripts and styles in documents.
• This has allow dynamically access and
  update of content, structure, and style.
• Dynamic HTML" are not only proprietary but
  also incompatible among the browsers.
• As a result, in the absence of a standard
  interface, programs will not work without
  changes across browsers.
     An Order : The DOM
• An document object model is a framework
  that organizes how elements are referenced
  and how they interact with each other.

              For example

• How scripts reference elements of a
• How styles are applied to elements.
• How scripts change styles.
    The Evolution : Levels Of The DOM
•    Level 0. Defined to be the functionality equivalent to
     NS 3.0 and IE 3.0. Current DOM (Level 1) builds on
     this technology.
•    Level 1. This is an effort to make sure that both
     browsers (in Level 0) will share a common DOM.
    1. It concentrates on the actual core, HTML, and XML
       document models.
    2. It contains functionality for navigation around an HTML or
       XML document, and manipulation of the content in that
    3. Although this level was strongly influenced by "Dynamic
       HTML", it does not implement all of it. In particular, events
       have not yet been defined.
Document Is The Collection Of Objects
• A document is an ordered collection of
  – An element is an object that contains all the
    content between the start and end tags of the
    element as objects, and any set of attributes that
    are defined for the element.
• How can the scripts identify an element?
  – Each element can be assigned a name (its tag
  – For example, we can assign the H2 element an ID
    attribute that uniquely identifies it:
       What Is The DOM?
• The Document Object Model is a
  platform- and language-neutral interface
  that allows programs and scripts to
  dynamically access and update the
  content, structure and style of
  DOM As An Object Model
• Documents are modeled using objects.
• Model encompasses the structure as
  well as the behavior of the document
• As an object model, the DOM identifies:
  – The interfaces and objects used to
    represent and manipulate a document.
  – The semantics of these interfaces and
    objects, including behavior and attributes.
  – The relationships and collaborations
    among these interfaces and objects.
    Advantages Of The DOM
• Language and Implementation-Neutral Interface. An
  important feature of the DOM is to provide a standard
  programming interface that can be used in a wide variety of
  environments and applications.
• Interoperability. A benefit of having a standard API is
  interoperability which is a necessity for documents sent over
  the Internet.
• HTML and XML Support. The DOM is designed with both
  HTML and XML in mind. There is a core functionality that works
  with XML and HTML, and an extra functionality that works with
  HTML documents.
• Style Sheets Support. The DOM specifies a way to manipulate
  and change CSS style sheets. In the future, there will be core
  functionality that may be applicable to other style sheet
  languages such as eXtensible Stylesheet Language (XSL).
  DOM As A Structure Model
   DOM Table    DOM Table
       Node Objects
• Each node of the document tree may
  have any number of child nodes. A
  child will always have an ancestor and
  can have siblings or descendants. All
  nodes, except the root node, will have a
  parent node. A leaf node has no
  children. Each node is ordered
  (enumerated) and can be named.
 DOM establishes two basic
   types of relationships

  The ability to traverse the node hierarchy, and
  The ability to access a collection of nodes by
The structure of the document determines the
inheritance of element attributes. Thus, it is
important to be able to navigate among the
node objects representing parent and child
elements. Given a node, you can find out
where it is located in the document structure
model and you can refer to the parent, child
as well as siblings of this node. This might be
done using the NodeList object, which
represents an ordered collection of nodes.
• If a gallery page is filled with individual images. Then,
  the image itself is a class, and each instance of that
  class can be referenced.
• A unique name or ID can be assigned to each image
  using the NAME OR ID attribute.
• It is possible to create an index of image names or ID’s
  by iterating over a list of nodes.
• A script can use this relationship to reference a image
  by an absolute or relative position and to insert or
  remove an image.
• This might be done using the NamedNodeMap object,
  which represents (unordered) collection of nodes that
  can be accessed by name.
• The DOM is a model in which the
  document contains objects.
• Each object has properties and
  methods associated with it that can be
  accessed by a scripting language for

• DOM is the "Dynamic" of Dynamic HTML
          Now And The Future
• The DOM 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
  in a standard way. Viable cross-platform implementations
  of this interface are yet to be seen.
• The DOM Level 1 was completed in October 1998.
• Work on Level 2 has started.
   – Level 2 is being planned to include a style sheet object model.
   – Define functionality for manipulating the style information attached
     to a document.
   – It will allow manipulation of the CSS styles attached to an HTML
     or XML document.
   – It will also include an event model which Level 1 doesn’t.

Shared By: