Chapter 13 Dynamic HTML Object Model and Collections
Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13. 1 13. 2 13. 3 13. 4 13. 5 13. 6 13. 7 13. 8 Introduction Object Referencing Collections all and children Dynamic Styles Dynamic Positioning Using the frames Collection navigator Object Summary of the DHTML Object Model 2004 Prentice Hall, Inc. All rights reserved.
Objectives – To use the Dynamic HTML Object Model and scripting to create dynamic Web pages. – To understand the Dynamic HTML object hierarchy. – To use the all and children collections to enumerate all of the XHTML elements of a Web page. – To use dynamic styles and dynamic positioning. – To use the frames collection to access objects in a separate frame on your Web page. – To use the navigator object to determine which browser is being used to access your page. 2004 Prentice Hall, Inc. All rights reserved.
Goals • Understand the concept of DHTML as a tool for creating dynamic content • Understand how to use DOM properties to make changes in the appearance of HTML objects • Understand how to create and use objects not explicitly created by HTML 2004 Prentice Hall, Inc. All rights reserved.
DHTML • DHTML is not a programming language • DHTML is a programming model for designing Web pages that incorporates: – – Java. Script DOM CSS HTML 2004 Prentice Hall, Inc. All rights reserved.
DHTML vs. HTML • Static • Limited I/O • Little Interactivity 2004 Prentice Hall, Inc. All rights reserved. DHTML • Dynamic • Changes elements with changes in the environment • Relies heavily on interactivity
DHTML Rules of Thumb • For use with 4. x versions of the browsers • Some DHTML scripts can be browser-dependent: – Some versions of image swapping – Hover for anchor tags 2004 Prentice Hall, Inc. All rights reserved.
DHTML • A combination of technologies used to create animated documents • Not a W 3 C standard! – Originally, a marketing term used by Netscape and Microsoft • Using scripts, we manipulate HTML content and style properties in reaction to events 2004 Prentice Hall, Inc. All rights reserved.
Dynamic HTML XHTML appearance content manipulate Scripting Language 2004 Prentice Hall, Inc. All rights reserved. CSS style rules manipulate
Introduction • Dynamic HTML Object Model – Allows Web authors to control the presentation of their pages – Gives them access to all the elements on their pages • Web page – Elements, forms, frames, tables – Represented in an object hierarchy • Scripting – Retrieve and modify properties and attributes 2004 Prentice Hall, Inc. All rights reserved.
Object Referencing • The simplest way to reference an element is by using the element’s id attribute. • The element is represented as an object – XHTML attributes become properties that can be manipulated by scripting 2004 Prentice Hall, Inc. All rights reserved.
HTML DOM From W 3 C: “A platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content and structure of HTML and XHTML documents. ” 2004 Prentice Hall, Inc. All rights reserved.
DOM and Java. Script • Combined with Java. Script, every element in the HTML document is represented by an object • Elements can be manipulated using the properties and methods of the corresponding objects • Changes in the element properties are immediately reflected by the browser 2004 Prentice Hall, Inc. All rights reserved.
Accessing HTML Elements • All HTML elements (objects) are accessed through the document object • document itself is automatically created • Several ways to access a specific element – paths in the DOM tree – retrieval by tag – retrieval by ID 2004 Prentice Hall, Inc. All rights reserved.
HTML DOM Tree 2004 Prentice Hall, Inc. All rights reserved.
Accessing Elements by Paths function execute() { var img = document. images[0]; img. src="lighton. gif" var inx = document. forms[0]. elements[0]; inx. value="xx" var iny = document. forms["form 1"]. elements["y"]; iny. value="yy" } head <p><img src="lightoff. gif" alt="light off" id="img 1" /></p> <form id="form 1" method="get" action="nosuch"><p> <input type="text" name="x"/> <input type="text" name="y"/> <input type="reset"/></p> </form> 2004 Prentice Hall, Inc. All rights reserved. body
Accessing Elements by Tags function execute() { var spans = document. get. Elements. By. Tag. Name("span"); spans[0]. style. color="red"; spans[1]. style. color="blue"; spans[1]. style. font. Variant="small-caps"; } head <p>This <span>example</span> is lovely. </p> <p>But <span>this one</span>is even more!</p> body 2004 Prentice Hall, Inc. All rights reserved.
Accessing Elements by ID function execute() { var the. Div = document. get. Element. By. Id("div 1"); if (the. Div. style. visibility=="hidden") {the. Div. style. visibility="visible" } else {the. Div. style. visibility="hidden" } } head <div id="div 1"> This text can be hidden!</div> This technique is more stable w. r. t. document changes (why? ) 2004 Prentice Hall, Inc. All rights reserved. body
Element Properties • Elements of different types have different sets of properties and methods • Most elements have the style member • style is an object that represents the stylesheet rules applied over the element 2004 Prentice Hall, Inc. All rights reserved.
Outline reference. html (1 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline reference. html (2 of 2) 2004 Prentice Hall, Inc. All rights reserved.
13. 3 Collections all and children • Collections – Arrays of related objects on a page – all • all the XHTML elements in a document – children • Specific element contains that element’s child elements 2004 Prentice Hall, Inc. All rights reserved.
Outline all. html (1 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline all. html (2 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline children. html (1 of 3) 2004 Prentice Hall, Inc. All rights reserved.
Outline children. html (2 of 3) 2004 Prentice Hall, Inc. All rights reserved.
Outline children. html (3 of 3) 2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
13. 4 Dynamic Styles • Element’s style can be changed dynamically • Dynamic HTML Object Model also allows you to change the class attribute 2004 Prentice Hall, Inc. All rights reserved.
Outline dynamicstyle. html (1 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline dynamicstyle. html (2 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline dynamicstyle 2. html (1 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline dynamicstyle 2. html (2 of 2) 2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
13. 5 Dynamic Positioning • Enables XHTML elements can be positioned with scripting – Declare an element’s CSS position property to be either absolute or relative – Move the element by manipulating any of the top, left, right or bottom CSS properties 2004 Prentice Hall, Inc. All rights reserved.
CSS-P Attributes • Left – the elements left position • Top - the elements top position • Visibility – specifies whether an element should be visible or hidden • Z-index – the elements stack order • Clip – element clipping • Overflow – how overflow contents are handled 2004 Prentice Hall, Inc. All rights reserved.
Position • This property allows you to control the positioning of an element • Position : relative – Position an element relative to its current position div{ Position : relative Left: 10; } Position div element 10 pixels to right 2004 Prentice Hall, Inc. All rights reserved.
Position • Position : absolute – Position an element from the margin of the window div{ Position : absolute Left: 10; } Position div element 10 pixels to right from the left margin of its containing block 2004 Prentice Hall, Inc. All rights reserved.
Visibility • Determines element is visible or not • Visibility : visible H 1{ visibility: visible; } make visible • Visibility: hidden H 1: { Visibility: hidden; } make invisible 2004 Prentice Hall, Inc. All rights reserved.
Z-index • To place an element behind another element • Default it is 0. The higher number has higher priority. • Exp H 1{ z-index: 1; } H 2{ Z-index: 2; } 2004 Prentice Hall, Inc. All rights reserved.
Outline dynamicposition. html (1 of 3) 2004 Prentice Hall, Inc. All rights reserved.
Outline dynamicposition. html (2 of 3) 2004 Prentice Hall, Inc. All rights reserved.
Outline dynamicposition. html (3 of 3) 2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
13. 6 Using the frames Collection • Referencing elements and objects in different frames by using the frames collection 2004 Prentice Hall, Inc. All rights reserved.
Outline index. html (1 of 1) 2004 Prentice Hall, Inc. All rights reserved.
Outline top. html (1 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline top. html (2 of 2) 2004 Prentice Hall, Inc. All rights reserved.
2004 Prentice Hall, Inc. All rights reserved.
13. 7 navigator Object • Netscape, Mozilla, Microsoft’s Internet Explorer – Others as well • Contains information about the Web browser • Allows Web authors to determine what browser the user is using 2004 Prentice Hall, Inc. All rights reserved.
Outline navigator. html (1 of 2) 2004 Prentice Hall, Inc. All rights reserved.
Outline navigator. html (2 of 2) 2004 Prentice Hall, Inc. All rights reserved.
13. 8 Summary of the DHTML Object Model window document all frames document anchors history document applets navigator body plugins location embeds event filters screen forms images links Key object plugins collection scripts style. Sheets Fig. 13. 10 2004 Prentice Hall, Inc. All rights reserved. DHTML Object Model.
13. 8 Summary of the DHTML Object Model 2004 Prentice Hall, Inc. All rights reserved.
13. 8 Summary of the DHTML Object Model 2004 Prentice Hall, Inc. All rights reserved.
13. 8 Summary of the DHTML Object Model 2004 Prentice Hall, Inc. All rights reserved.
- Slides: 55