DHTML and DOM Venkat Subramaniam – svenkat@cs.uh.edu 1 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 Venkat Subramaniam – svenkat@cs.uh.edu 2
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. Venkat Subramaniam – svenkat@cs.uh.edu 3 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 Venkat Subramaniam – svenkat@cs.uh.edu 4
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 no with respect to positioning where browser only first Positioning would have absolute positioning placed it otherwise Venkat Subramaniam – svenkat@cs.uh.edu 5 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 Venkat Subramaniam – svenkat@cs.uh.edu – stacking order of a positionable element 6
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 Venkat Subramaniam – svenkat@cs.uh.edu 7 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 – images[] – anchors[ ] – lastModified – applets[ ] – linkColor – bgColor – links[] – cookie – referrer – Domain – title – embeds[ ] – URL – fgColor – vlinkColor – forms[ ] Venkat Subramaniam – svenkat@cs.uh.edu 8
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 Venkat Subramaniam – svenkat@cs.uh.edu 9 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 Venkat Subramaniam – svenkat@cs.uh.edu 10
DOM • Browser exposes the object model of the document for you to manipulate • The Document Object Model Venkat Subramaniam – svenkat@cs.uh.edu 11 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 Venkat Subramaniam – svenkat@cs.uh.edu 12
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 Venkat Subramaniam – svenkat@cs.uh.edu 13 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 Venkat Subramaniam – svenkat@cs.uh.edu 14
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 Venkat Subramaniam – svenkat@cs.uh.edu 15 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 Venkat Subramaniam – svenkat@cs.uh.edu 16
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 Venkat Subramaniam – svenkat@cs.uh.edu 17 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 Venkat Subramaniam – svenkat@cs.uh.edu 18
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 Venkat Subramaniam – svenkat@cs.uh.edu 19 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 Venkat Subramaniam – svenkat@cs.uh.edu 20
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 Venkat Subramaniam – svenkat@cs.uh.edu 21 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 Venkat Subramaniam – svenkat@cs.uh.edu 22
A common data exchange “gateway” App5 App4 App3 App0 App1 App2 App5 App4 DOM App0 XML App3 App2 App1 Venkat Subramaniam – svenkat@cs.uh.edu 23 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 Venkat Subramaniam – svenkat@cs.uh.edu 24
Recommend
More recommend
