1 / 84

DHTML and DOM

DHTML and DOM. 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. Positioning.

eyal
Download Presentation

DHTML and DOM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related