DHTML and DOM - PowerPoint PPT Presentation

dhtml and dom n.
Skip this Video
Loading SlideShow in 5 Seconds..
DHTML and DOM PowerPoint Presentation
Download Presentation

play fullscreen
1 / 84
Download Presentation
Download Presentation


- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. DHTML and DOM

  2. Style Sheets: CSS and CSS2 • W3C recommendation on Cascading Style Sheet • CSS level 1 specification allows expressing style of contents • CSS level 2 specification goes further into • positioning • use of HTML 4.0 • defining additional tags

  3. Positioning • HTML elements are positionable • You may specify where they should appear • as part of the style • position attribute • position attribute may take • absolute • Position based on or relative to the parent container. Natural document flow ignored. • relative • Position is relative to the normal document flow. • static • element not positionable, maintains normal position.

  4. Positioning Context • Positioning context is a point which corresponds to (0, 0) for an element • For the HTML document, it starts with the top left corner of browser window (document area) • When you define a block level element, it defines a new context for that element • Every thing is now relative to this new context • You can define a new context by setting the position attribute

  5. Absolute vs. Relative <HEAD><STYLE> SPAN.l1 {position:absolute; left:20; top:30} SPAN.l2 {position:relative; left:20; top:30} </STYLE></HEAD> <BODY> <DIV>Hello <SPAN class="l1">there</SPAN> <SPAN class="l2">!</SPAN> </DIV> Moved with respect to where browser would have placed it otherwise With no positioning only first Positioning absolute positioning

  6. Positioning Attributes • position • style rule for a postionable element • left • offset from left edge of positioning context to left edge of box • top • offset from top edge of positioning context to top edge of box • width • width of absolute positioned element’s content • height • height of absolute positioned element’s content • clip • viewable area shape, dimension of an absolute positioned element • overflow • for handling contents that exceed height/width • visibility • says if element is visible or not • Z-index • stacking order of a positionable element

  7. DOM: Document Object Model • HTML documents are parsed and displayed by browsers • Fonts and colors may be specified • To a certain extent position may be specified • How about dynamically modifying the contents on the front end? • DOM provides handled into the browser, allowing us to access various components of the document at run time

  8. Document Object Model • Document class represents an HTML document • Provides you a write method • you can generate HTML dynamically on the client-side • Document’s properties • alinkColor • anchors[] • applets[] • bgColor • cookie • Domain • embeds[] • fgColor • forms[] • images[] • lastModified • linkColor • links[] • referrer • title • URL • vlinkColor

  9. Scripting Events • Various types of events are generated • Types of events depends on the positionable element • Event handler may be specified as an attribute of the element • For certain events, returning • true will result in browser continuing with its usual behavior • false will result in browser ignoring the rest of action

  10. Dynamic Techniques • DOM allows us to address elements • Event allows us to respond to activities • Scripts can effectively • provide event handlers • access elements using DOM • Dynamic content generation on the front end for data validation and varying presentation and style

  11. DOM • Browser exposes the object model of the document for you to manipulate • The Document Object Model

  12. The structure of a document • An XML document contains • data and • information on the data (Meta information) • XML document contains • the contents and • structure • What is the structure? • the types of items it contains • elements, child-elements, attributes, content data • relationship between these items • Which element is the parent of a child element • what are its attributes

  13. Grove • Grove is an abstract model of a structure • It is the concept and representation of the structure of an XML document • It represents a tree view of • Elements • the child elements • the attributes • their values • content data • etc. • Grove is a model not an API of any kind • information on structure not mechanism to access it • various APIs used to access and manipulate these models

  14. Object Model • Methods, properties provided to access a structure • The interface is the key • Hides the details of structure from programmers • Interface based programming allows one to • Access the details of an abstraction • Without depending on the specifics of the abstraction

  15. What is DOM? • How do you access an XML document? • Need to parse and extract information among meta information • DOM is an interface/API for such access • Language and platform independent • Specification that may be implemented in any language • It provides the flexibility to read a document, to modify, to search it, to add on to it and remove from

  16. What does DOM provide? • If you were to deal with a document, you are looking at the physical layout of its content • How many elements does it have? • How do you add an element? • Read through all elements and get to the end and append! • How about a logical view of the document? • You can easily understand the structure • You can easily manipulate the structure using an interface/API

  17. Why use DOM? • DOM parses and builds all information into memory • DOM • Validates well-formedness and grammar • Using DOM to create a document guarantees correctness of format • Provides logical/object view hiding the details • You can rely on the logical view rather than reading through file structure and tags • Helps it easy to manipulate the document • You don’t have to endure the pain of parsing • You can rely on API to read • Lets you delete arbitrary items from the document

  18. Drawbacks of DOM • DOM ends up taking more memory • Much larger than the size of the document • Reads and builds information on the entire document • Not efficient for lookup of subset of information • Entire tree built, whether you need it or not

  19. API for DOM • DOM is a specification of Interface • Several APIs implement this interface • Comes in different flavors • Watch out for parsing large sized documents • May take up too much memory to store large documents • Some implementations provide just-in-time extraction to manage large size data, at expense of additional seek and retrieval time

  20. DOM aids document interchange • Provides effective method to exchange Platform independent self-describing data • Robustness and validation • Illustrates the relationship between data elements that may not otherwise be obvious Application Application

  21. DOM facilitates data archival • Text formed data can be easily archived, parsed, compressed and transferred • The contents of a data store may be archived for later use or reference purpose • Applications (like mail program) may use this for archiving older mails/records • Useful for initialization/configuration information as well

  22. Meaningful presentation of data • Client systems may interact with the DOM nodes to decide and to eliminate information that may or may not be relevant • By packaging the information with the semantics, client programs can put the information to better use • Systems may aid user with selective utilization of information

  23. A common data exchange “gateway” App5 App4 App3 App0 App1 App2 App5 App4 DOM App0 App3 XML App2 App1

  24. W3C’s DOM • “…platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents” • Level 0 • Functionality of Netscape 3.0 and IE 3.0 • Level 1 • Navigation and manipulation of HTML and XML doc • Oct. 1 1998 • Level 2 • Support for namespaces, plus changes to interfaces • Nov. 13, 2000 • Level 3 • Work under progress

  25. The Tree Model • XML by nature provides relationships • Parent child relationship • This ideally falls into a tree model • Parent nodes connecting to child nodes gives logical view of data • Easy to conceptualize • Easy to abstract and model Nodes Parent Child Child

  26. The Tree Model as seen from IE

  27. Node and Node Types • A Node is a base type that is a generic node in the DOM Tree view model • Several types of specific node types exists • You will never create node of simply the type Node • You may treat all nodes as type Node, however

  28. Document Node Types • Document • The master node • Parent node representing the document as a whole • Does not represent any specific piece of XML data • Allows creation and insertion of other nodes • Only one can exists in an XML document

  29. NodeList Node Type • NodeList • Holds a collection of child nodes • Can provide information about child nodes • like how many is contained • Main purpose is to provide information and access to child nodes Parent Parent NodeList Child Child Conceptual Model Child Child DOM Model

  30. NamedNodeMap Node Type • Much like the NodeList in functionality • Provides the ability to access child nodes by name • Needed for accessing attributes • Typically attributes are lookup by their names • Used to hold attribute nodes

  31. Element Node Type • Element node represents an element in XML doc • Each child element has a parent element node • Except topmost element node whose parent is the Document node • Each element may have optionally child elements • Top most element is given special name • documentElement

  32. Text Node Type • Represent the text contained within element tags • This is what makes the content of the element • The PCDATA types

  33. Attr Node Type • Generally specified within element • Represents attributes within scope of elements • Also used in Entity and Notation nodes

  34. Text Node {paper} Attribute Node {material} NodeList NodeList Element Node {Catalog} Attribute Node {cover} Text Node {paperback} NodeList NameNodeMap Node Element Node {Book} NodeList Element Node {Title} Text Node {Appli…} NodeList NodeList Tree Model with Elements, Attributes • Consider: <Catalog> <Book material="paper" cover="paperback"> <Title>Applied XML</Title> Document Node

  35. CDATA Section Node Type • Similar in nature to the Text node • Contains data that does not contain any markup • Arbitrary non parsed text makes up this

  36. DocumentType Node Type • This represents a subset of what you put into DTD • This object provides you access to the DTD of a doc • Only ENTITY and NOTATION of DTD exposed • Known limitation of DOM • Child of the Document node • Parent to Entity node and Notation node

  37. EntityReference Node Type • EntityReference node represents a reference to an entity that is declared in DTD • It contains a Text node • However • Text nodes under EntityReferences are read-only • Pretty much use less since you can’t change this

  38. A few other Node Types • ProcessingInstruction • Represents a PI in a document • This is a child of the Document node • Comment • Represents a comment node • DocumentFragment • Stripped down version of Document node • Used as place holder when moving nodes around • Simply temporary storage of nodes to be reinserted into the tree

  39. DOM API • DOM API comes in different languages and flavors • We will see the DOM API using JavaScript • Other scripting languages may also be used • The API pretty much maps over to other scripting languages and programming languages

  40. var in JavaScript • JavaScript is not a strongly typed language • var refers to a variable that may be assigned any variable or object • It may be assigned just about any thing of any type • In case of xml data island, the id represents the Document node

  41. Data Island Options • In an HTML file you may • Contain an XML file within • Refer to an external XML file <XML ID="xmlID101"> <!-- … content of the XML file> </XML> • Multiple data islands may appear with unique IDs • var docNode = anID; • Refers to a DOM document node object

  42. Accessing XML DOM Node • Three ways to access an XML DOM node • The ID represents a document Node • var docNode = xmlID101; • The ID treated as HTML object model’s all collection • var docNode = document.all("xmlID101"); • You may obtain using the XMLDocument property • var docNode = document.all("xmlID101").XMLDocument;

  43. Using an independent XML DOC • IE5 provides an XML parser as an ActiveX object • The CLSID for the parser maps to the program alias • "microsoft.xmldom" • You may create an XML Parse object by calling • var parse = new ActiveXObject("microsoft.xmldom"); • You may want to set parse.async = false to disable synchronous downloading • You may call load method to load your XML doc • Then use the functions on the Document object

  44. Accessing an external XML Doc • You may place a XML within HTML • data island • You may also refer to an XML file outside • Simply • invoke the parser • ask it to load/parse external file • The document node object now refers to parsed external XML document

  45. Displaying Document Node Info • The xml id represents the document node • We can create a variable that refers to this id • This is a reference or handle to a Document node object • You can now call documentElement to get to the root element • nodeName will tell you the name of the node

  46. Classes in DOM API

  47. Node Property: nodeName • String:name of node: effect depends on type of node • Document #document • Element tag name • Attribute attribute name • Text #text • CDATASection #cdata-section • Comment #comment • Entity entity name • Notation notation name • EntityReference name of entity reference • ProcessingInstruction target • DocumentType document types name • DocumentFragment #document-fragment

  48. Node Property: nodeValue • String: data of the node: effect depends on type of node • Attribute attribute value • ProcessingInstruction text (following target) • Comment comment text • Text text • CDATASection text • Other nodes null

  49. Node Property: nodeType • int: type of • The type of node and the corresponding int are • 1 Element • 2 Attribute • 3 Text • 4 CDATASection • 5 EntityReference • 6 Entity • 7 ProcessingInstruction • 8 Comment • 9 Document • 10 DocumentType • 11 DocumentFragment • 12 Notation

  50. Node Property: ownerDocument • DocumentNode: Document node in which the current node resides • Returns access to the highest level parent of any node • Very convenient for • creating other nodes • accessing top level details