1. Tutorial 16 Working with Dynamic Content and Styles

2. XP Objectives Learn how to create dynamic content under the IE DOM Understand the methods and properties of nodes and the node tree Learn to create element and text nodes Understand how to attach nodes to a Web page document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e2

3. XP Objectives Apply node properties and styles to create dynamic content Work with the properties and methods of attribute nodes Work with element attributes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e3

4. XP Objectives Hide and redisplay Web page objects Understand how to create recursive functions to navigate a node tree Learn to work with the properties and methods of style sheet objects New Perspectives on HTML, XHTML, and Dynamic HTML, 4e4

5. XP Introducing Dynamic Content New Perspectives on HTML, XHTML, and Dynamic HTML, 4e5

6. XP Introducing Dynamic Content Inserting HTML Content into an Element – Generating a table of contents involves working with dynamic content, which is content determined by the operation of a script running within the browser – One property that can be used to write content in an element is the innerHTML property object.innerHTML = content New Perspectives on HTML, XHTML, and Dynamic HTML, 4e6

7. XP Introducing Dynamic Content Inserting HTML Content into an Element New Perspectives on HTML, XHTML, and Dynamic HTML, 4e7

8. XP Introducing Dynamic Content Dynamic Content in Internet Explorer – The innerHTML property is not part of the official specifications for the W3C document object model – However, since it has proven valuable and easy to use, it is supported by all browsers – If you want to change both the content and the HTML element itself, you use the outerHTML property object.outerHTML = content; New Perspectives on HTML, XHTML, and Dynamic HTML, 4e8

9. XP Working with Nodes A node represents an object within the Web page and Web browser The text within an HTML tag can also be treated as a node. For example, the tag Table of Contents consists of two nodes: one node for the h1 element and one node for the text string, Table of Contents, contained within that element New Perspectives on HTML, XHTML, and Dynamic HTML, 4e9

10. XP New Perspectives on HTML, XHTML, and Dynamic HTML, 4e10 Working with Nodes The Node Tree – Nodes are arranged into a hierarchal structure called a node tree, which indicates the relationship between each of the nodes

11. XP Working with Nodes The Node Tree – The parent of all nodes within a document is the root node New Perspectives on HTML, XHTML, and Dynamic HTML, 4e11

12. XP Working with Nodes Node types, names, and values New Perspectives on HTML, XHTML, and Dynamic HTML, 4e12

13. XP Working with Nodes Node types, names, and values New Perspectives on HTML, XHTML, and Dynamic HTML, 4e13

14. XP Working with Nodes Creating and Attaching Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e14

15. XP Working with Nodes Creating and Attaching Nodes – Unattached nodes and node trees are known as document fragments and exist only in a browser’s memory New Perspectives on HTML, XHTML, and Dynamic HTML, 4e15

16. XP Working with Nodes Creating and Attaching Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e16

17. XP Creating a List of Heading Elements Looping Through the Child Node Collection New Perspectives on HTML, XHTML, and Dynamic HTML, 4e17

18. XP Creating a List of Heading Elements Matching the Heading Elements New Perspectives on HTML, XHTML, and Dynamic HTML, 4e18

19. XP Creating a List of Heading Elements Creating the List Item Elements New Perspectives on HTML, XHTML, and Dynamic HTML, 4e19

20. XP Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e20

21. XP Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e21

22. XP Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e22

23. XP Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e23

24. XP Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e24

25. XP Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e25

26. XP Working with Attributes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e26

27. XP Working with Attributes Attribute Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e27

28. XP Working with Attributes Attribute Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e28

29. XP Working with Attributes Attributes as Object Properties – The document object model also supports a shorthand way of applying attributes as properties of an object object.attr = value; – To test whether the listItem node has an id attribute, you can use the following expression: listItem.hasAttribute(“id”) New Perspectives on HTML, XHTML, and Dynamic HTML, 4e29

30. XP Working with Attributes Setting the Section Heading IDs New Perspectives on HTML, XHTML, and Dynamic HTML, 4e30

31. XP Working with Attributes Inserting Links New Perspectives on HTML, XHTML, and Dynamic HTML, 4e31

32. XP Working with Attributes Inserting Links New Perspectives on HTML, XHTML, and Dynamic HTML, 4e32

33. XP Expanding and Collapsing a Document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e33

34. XP Expanding and Collapsing a Document Creating a plus/minus Box New Perspectives on HTML, XHTML, and Dynamic HTML, 4e34

35. XP Expanding and Collapsing a Document Creating a plus/minus Box New Perspectives on HTML, XHTML, and Dynamic HTML, 4e35

36. XP Expanding and Collapsing a Document Adding Event Handlers to the plus/minus Boxes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e36

37. XP Expanding and Collapsing a Document Hiding and Display Objects New Perspectives on HTML, XHTML, and Dynamic HTML, 4e37

38. XP Expanding and Collapsing a Document Expanding and Collapsing the Source Document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e38

39. XP Expanding and Collapsing a Document Expanding and Collapsing the Source Document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e39

40. XP Expanding and Collapsing a Document Testing the Dynamic TOC New Perspectives on HTML, XHTML, and Dynamic HTML, 4e40

41. XP Traversing the Node Tree with Recursion Recursion is a programming technique in which a function calls itself repeatedly until a stopping condition is met New Perspectives on HTML, XHTML, and Dynamic HTML, 4e41

42. XP Switching Between Style Sheets New Perspectives on HTML, XHTML, and Dynamic HTML, 4e42

43. XP Switching Between Style Sheets Style sheets can be classified as persistent, preferred, and alternate: – Persistent style sheets are always active – Preferred style sheets are turned on by default, but can be turned off by actions of the user – Alternate style sheets are not turned on by default, but can be turned on as an alternate to the preferred style sheet New Perspectives on HTML, XHTML, and Dynamic HTML, 4e43

44. XP Switching Between Style Sheets New Perspectives on HTML, XHTML, and Dynamic HTML, 4e44

45. XP Switching Between Style Sheets Code to populate the allStyles array New Perspectives on HTML, XHTML, and Dynamic HTML, 4e45

46. XP Switching Between Style Sheets Creating a form button for each style sheet New Perspectives on HTML, XHTML, and Dynamic HTML, 4e46

47. XP Switching Between Style Sheets You can disable a style sheet using the command styleSheet.disabled = true You can enable it with the command styleSheet.disabled = false Code to initialize the style sheets New Perspectives on HTML, XHTML, and Dynamic HTML, 4e47

48. XP Switching Between Style Sheets Code to switch between styles New Perspectives on HTML, XHTML, and Dynamic HTML, 4e48

49. XP Switching Between Style Sheets Properties of the style sheet object New Perspectives on HTML, XHTML, and Dynamic HTML, 4e49