2.1 Dynamic HTML Object Model and Collections CH_13

Click here to load reader

  • date post

    24-Nov-2014
  • Category

    Documents

  • view

    117
  • download

    0

Embed Size (px)

Transcript of 2.1 Dynamic HTML Object Model and Collections CH_13

Chapter 13 - Dynamic HTML: Object Model and CollectionsOutline13.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 In this lesson, you will learn: 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.

13.1 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.

13.2 Object Referencing The simplest way to reference an element is by using the elements 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

Outlinereference.html (1 of 2)

Object Model

2004 Prentice Hall, Inc. All rights reserved.

23 24 25 26 Welcome to our Web page!

Outlinereference.html (2 of 2)

27

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 elements child elements

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Outlineall.html (1 of 2)

Object Model

2004 Prentice Hall, Inc. All rights reserved.

25 26 27 28 29 30

Outlineall.html (2 of 2)

Elements on this Web page:

31

2004 Prentice Hall, Inc. All rights reserved.

1

Outlinechildren.html (1 of 3)

10 11 12 13 14 15 16 17 18 19 20 21 elements += "" + object.tagName + "

  • "; function child( object ) { var loop = 0; Object Model

    2004 Prentice Hall, Inc. All rights reserved.

    22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 }

    for ( loop = 0; loop < object.children.length; loop++ ) { if ( object.children[ loop ].children.length ) child( object.children[ loop ] ); else elements += "

  • " + object.children[ loop ].tagName + "

"; }

Outlinechildren.html (2 of 3)

elements += "" + "";

// -->

2004 Prentice Hall, Inc. All rights reserved.

38 39 40 41 42 43 44 45 46 47 48

Outlinechildren.html (3 of 3)

Welcome to our Web page!

Elements on this Web page:

49

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

13.4 Dynamic Styles Elements style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Outlinedynamicstyle.html (1 of 2)

Object Model

2004 Prentice Hall, Inc. All rights reserved.

24 25 26 27 Welcome to our Web site!

Outlinedynamicstyle.html (2 of 2)

28

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Outlinedynamicstyle2.html (1 of 2)

Object Model

.bigText

{ font-size: 3em; font-weight: bold }

.smallText { font-size: .75em }

2004 Prentice Hall, Inc. All rights reserved.

21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Outlinedynamicstyle2.html (2 of 2)

Welcome to our Web site!

37

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

13.5 Dynamic Positioning XHTML elements can be positioned with scripting Declare an elements 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Outlinedynamicposition .html (1 of 3)

Dynamic Positioning

2004 Prentice Hall, Inc. All rights reserved.

51 52 53 54 55

Welcome!

Outlinedynamicposition .html (3 of 3)

56

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Outlineindex.html (1 of 1)

Frames collection

18

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Outlinetop.html (1 of 2)

The frames collection

text + "" );

2004 Prentice Hall, Inc. All rights reserved.

24 25 26

Cross-frame scripting!

Outlinetop.html (2 of 2)

27

2004 Prentice Hall, Inc. All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

13.7 navigator Object Netscape, Mozilla, Microsofts 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Outlinenavigator.html (1 of 2)

The navigator Object

= "4" ) document.location = "newIEversion.html" ; else document.location = "oldIEversion.html" ; } else document.location = "NSversion.html" ; }

2004 Prentice Hall, Inc. All rights reserved.

26 27 28 29 30 31 32 33

// -->

Outlinenavigator.html (2 of 2)

Redirecting your browser to the appropriate page, please wait...

34

2004 Prentice Hall, Inc. All rights reserved.

13.8 Summary of the DHTML Object Modelwindow document frames history navigator plugins location event screen embeds filters forms images Key object collection links plugins scripts styleSheets document document all anchors applets body

Fig. 13.10

DHTML Object Model.

2004 Prentice Hall, Inc. All rights reserved.

13.8 Summary of the DHTML Object ModelObject r c llectiObjectswindow

escriptiRepresents the bro ser indo and provides access to the document ob ect contained in the window . I the window contains rames a separate window ob ect is created automatically or each rame, to provide access to the document rendered in the rame. Frames are considered to be sub indo s in the bro ser. Represents the T document rendered in a window . The document ob ect T document and allo s dynami c provides access to every element in the modi ication o the T document. rovides access to the body element o an T document. Keeps track o the sites visited by the bro ser user. The ob ect provides a script programmer ith the ability to move or ard and back ard throu gh the visited sites, but or security reasons does not allo the actual site URLs to be manipulated. ontains in ormation about the Web bro ser, such as the name o the bro ser, the version o the bro ser, the operating system on hich the bro ser is running and other in ormation that can help a script riter customize the users bro sing experience. ontains the URL o the rendered document. When this ob ect is set to a ne URL, the bro ser immediately s itches (navigates) to the ne location. an be used in an event handler to obtain in ormation about the event that occurred (e.g., the mouse x-y coordinates during a mouse event). Contains in ormation about the computer screen or the computer on hich the bro ser is running. In ormation such as the idth and height o the screen in pixels can be used to determine the size at hich elements should be rendered in a Web page.

document

body history

navigator

location event screen

Fi .

.

Objects i the I ter et Expl rer 6 Object

el.

2004 Prentice Hall, Inc. All rights reserved.

13.8 Summary of the DHTML Object ModelObject or collection Descri tionCollectionsall

anchors

applets embeds forms frames images links

Many objects have an all collection that provides access to every element contained in the object. or example, the body objects all collection provides access to every element in the body element of an XHTML document. Collection contains all the anchor elements (a) that have a name or id attribute. The elements appear in the collection in the order they were defined in the XHTML document. Contains all the applet elements in the XHTML document. Currently, the most common applet elements are Java applets. Contains all the embed elements in the XHTML document. Contains all the form elements in the XHTML document. The elements appear in the collection in the order they were defined in the XHTML document. Contains window objects that represent each frame