1. XP Tutorial 10 New Perspectives on JavaScript, Comprehensive 1 Working with Dynamic Content and Styles Creating a Dynamic Table of Contents

2. XP Tutorial 10New Perspectives on JavaScript, Comprehensive2 Objectives Learn how to create dynamic content under the Internet Explorer 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

3. XP Tutorial 10New Perspectives on JavaScript, Comprehensive3 Objectives Apply node properties and styles to create dynamic content Work with the properties and methods of attribute nodes Work with element attributes

4. XP Tutorial 10New Perspectives on JavaScript, Comprehensive4 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

5. XP Tutorial 10New Perspectives on JavaScript, Comprehensive5 Introducing Dynamic Content

6. XP Tutorial 10New Perspectives on JavaScript, Comprehensive6 Introducing Dynamic Content

7. XP Tutorial 10New Perspectives on JavaScript, Comprehensive7 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

8. XP Tutorial 10New Perspectives on JavaScript, Comprehensive8 Introducing Dynamic Content Inserting HTML Content into an Element

9. XP Tutorial 10New Perspectives on JavaScript, Comprehensive9 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;

10. XP Tutorial 10New Perspectives on JavaScript, Comprehensive10 Introducing Dynamic Content Dynamic Content in Internet Explorer –To change the text of a page object, use the property object.innerText="content" –To change the text of a page object, including the object itself, use object.outerText="content"

11. XP Tutorial 10New Perspectives on JavaScript, Comprehensive11 Introducing Dynamic Content Dynamic Content in Internet Explorer –To insert HTML content at a specific location relative to a page object, use the property object.insertAdjacentHTML="position, content" –Where position is “BeforeBegin”, “AfterBegin”, “BeforeEnd”, or “AfterEnd”

12. XP Tutorial 10New Perspectives on JavaScript, Comprehensive12 Working with Nodes Dynamic content in the specifications for the W3C document object model works differently than in the Internet Explorer DOM In the W3C DOM, objects are organized into nodes, with each node representing an object within the Web page and Web browser

13. XP Tutorial 10New Perspectives on JavaScript, Comprehensive13 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

14. XP Tutorial 10New Perspectives on JavaScript, Comprehensive14 Working with Nodes The Node Tree –The parent of all nodes within a document is the root node

15. XP Tutorial 10New Perspectives on JavaScript, Comprehensive15 Working with Nodes Node types, names, and values

16. XP Tutorial 10New Perspectives on JavaScript, Comprehensive16 Working with Nodes Node types, names, and values

17. XP Tutorial 10New Perspectives on JavaScript, Comprehensive17 Working with Nodes Creating and Attaching Nodes

18. XP Tutorial 10New Perspectives on JavaScript, Comprehensive18 Working with Nodes Creating and Attaching Nodes

19. XP Tutorial 10New Perspectives on JavaScript, Comprehensive19 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

20. XP Tutorial 10New Perspectives on JavaScript, Comprehensive20 Creating a List of Heading Elements Looping Through the Child Node Collection

21. XP Tutorial 10New Perspectives on JavaScript, Comprehensive21 Creating a List of Heading Elements Matching the Heading Elements

22. XP Tutorial 10New Perspectives on JavaScript, Comprehensive22 Creating a List of Heading Elements Creating the List Item Elements

23. XP Tutorial 10New Perspectives on JavaScript, Comprehensive23 Creating a Nested List

24. XP Tutorial 10New Perspectives on JavaScript, Comprehensive24 Creating a Nested List

25. XP Tutorial 10New Perspectives on JavaScript, Comprehensive25 Creating a Nested List

26. XP Tutorial 10New Perspectives on JavaScript, Comprehensive26 Creating a Nested List

27. XP Tutorial 10New Perspectives on JavaScript, Comprehensive27 Creating a Nested List

28. XP Tutorial 10New Perspectives on JavaScript, Comprehensive28 Creating a Nested List

29. XP Tutorial 10New Perspectives on JavaScript, Comprehensive29 Creating a Nested List

30. XP Tutorial 10New Perspectives on JavaScript, Comprehensive30 Creating a Nested List

31. XP Tutorial 10New Perspectives on JavaScript, Comprehensive31 Working with Attributes

32. XP Tutorial 10New Perspectives on JavaScript, Comprehensive32 Working with Attributes Attribute Nodes

33. XP Tutorial 10New Perspectives on JavaScript, Comprehensive33 Working with Attributes Attribute Nodes

34. XP Tutorial 10New Perspectives on JavaScript, Comprehensive34 Working with Attributes Attributes as Object Properties –The document object model also supports a shorthand way of applying attributes as properties of an element elem.att –to test whether the listItem node has an id attribute, you can use the following expression listItem.id != ""

35. XP Tutorial 10New Perspectives on JavaScript, Comprehensive35 Working with Attributes Setting the Section Heading Ids

36. XP Tutorial 10New Perspectives on JavaScript, Comprehensive36 Working with Attributes Inserting Links

37. XP Tutorial 10New Perspectives on JavaScript, Comprehensive37 Working with Attributes Inserting Links

38. XP Tutorial 10New Perspectives on JavaScript, Comprehensive38 Expanding and Collapsing a Document

39. XP Tutorial 10New Perspectives on JavaScript, Comprehensive39 Expanding and Collapsing a Document Creating a plus/minus Box

40. XP Tutorial 10New Perspectives on JavaScript, Comprehensive40 Expanding and Collapsing a Document Creating a plus/minus Box

41. XP Tutorial 10New Perspectives on JavaScript, Comprehensive41 Expanding and Collapsing a Document Adding Event Handlers to the plus/minus Boxes

42. XP Tutorial 10New Perspectives on JavaScript, Comprehensive42 Expanding and Collapsing a Document Hiding and Display Objects

43. XP Tutorial 10New Perspectives on JavaScript, Comprehensive43 Expanding and Collapsing a Document Hiding and Display Objects

44. XP Tutorial 10New Perspectives on JavaScript, Comprehensive44 Expanding and Collapsing a Document Expanding and Collapsing the Document

45. XP Tutorial 10New Perspectives on JavaScript, Comprehensive45 Expanding and Collapsing a Document Expanding and Collapsing the Document

46. XP Tutorial 10New Perspectives on JavaScript, Comprehensive46 Expanding and Collapsing a Document Expanding and Collapsing the Document

47. XP Tutorial 10New Perspectives on JavaScript, Comprehensive47 Expanding and Collapsing a Document Expanding and Collapsing the Document

48. XP Tutorial 10New Perspectives on JavaScript, Comprehensive48 Expanding and Collapsing a Document Expanding and Collapsing the Document

49. XP Tutorial 10New Perspectives on JavaScript, Comprehensive49 Expanding and Collapsing a Document Testing the Dynamic TOC

50. XP Tutorial 10New Perspectives on JavaScript, Comprehensive50 Traversing the Node Tree using Recursion Recursion is a programming technique in which a function calls itself repeatedly until a stopping condition is met

51. XP Tutorial 10New Perspectives on JavaScript, Comprehensive51 Traversing the Node Tree using Recursion

52. XP Tutorial 10New Perspectives on JavaScript, Comprehensive52 Traversing the Node Tree using Recursion

53. XP Tutorial 10New Perspectives on JavaScript, Comprehensive53 Working with Style Sheets

54. XP Tutorial 10New Perspectives on JavaScript, Comprehensive54 Working with Style Sheets Working with the link element

55. XP Tutorial 10New Perspectives on JavaScript, Comprehensive55 Working with Style Sheets The Style Sheet Collection

56. XP Tutorial 10New Perspectives on JavaScript, Comprehensive56 Working with Style Sheets Working with Style Sheet Rules

57. XP Tutorial 10New Perspectives on JavaScript, Comprehensive57 Tips for Working with Dynamic Content and Styles Use the innerHTML property as a quick and easy way of modifying the contents of element nodes. Do not use other Internet Explorer properties, since they are not well supported by other browsers. Use familial references rather than counter variables in for loops to increase the speed and flexibility of your program code When writing scripts that modify node elements, be sure to test the active node is an element node by using the nodeType property

58. XP Tutorial 10New Perspectives on JavaScript, Comprehensive58 Tips for Working with Dynamic Content and Styles Be aware that browsers will treat white space found in HTML files differently. The Internet Explorer browser does not treat occurrences of white space as text nodes, while in the W3C DOM and in many browsers, white space is treated as a text node Use attribute properties as a quick and easy way to work with the attributes of element nodes

59. XP Tutorial 10New Perspectives on JavaScript, Comprehensive59 Tips for Working with Dynamic Content and Styles Use recursive functions to navigate an entire node tree, ensuring that each node is included in the path Use the getElementsByTagName() method as a quick and easy way of generating object collections for elements in your document that share a common element name