1 / 49

Tutorial 16 Working with Dynamic Content and Styles

Tutorial 16 Working with Dynamic Content and Styles. 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. Objectives.

whitfield
Télécharger la présentation

Tutorial 16 Working with Dynamic Content and Styles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 16Working with Dynamic Content and Styles

  2. 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, 4e

  3. 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, 4e

  4. 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, 4e

  5. Introducing Dynamic Content New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  6. 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, 4e

  7. Introducing Dynamic Content • Inserting HTML Content into an Element New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  8. 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, 4e

  9. 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 <h1>Table of Contents</h1> 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, 4e

  10. 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 New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  11. 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, 4e

  12. Working with Nodes • Node types, names, and values New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  13. Working with Nodes • Node types, names, and values New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  14. Working with Nodes • Creating and Attaching Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  15. 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, 4e

  16. Working with Nodes • Creating and Attaching Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

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

  18. Creating a List of Heading Elements • Matching the Heading Elements New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  19. Creating a List of Heading Elements • Creating the List Item Elements New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  20. Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  21. Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  22. Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  23. Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  24. Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  25. Creating a Nested List New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  26. Working with Attributes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  27. Working with Attributes • Attribute Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  28. Working with Attributes • Attribute Nodes New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  29. 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, 4e

  30. Working with Attributes • Setting the Section Heading IDs New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  31. Working with Attributes • Inserting Links New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  32. Working with Attributes • Inserting Links New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  33. Expanding and Collapsing a Document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

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

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

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

  37. Expanding and Collapsing a Document • Hiding and Display Objects New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  38. Expanding and Collapsing a Document • Expanding and Collapsing the Source Document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  39. Expanding and Collapsing a Document • Expanding and Collapsing the Source Document New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  40. Expanding and Collapsing a Document • Testing the Dynamic TOC New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  41. 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, 4e

  42. Switching Between Style Sheets New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

  43. 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, 4e

  44. Switching Between Style Sheets New Perspectives on HTML, XHTML, and Dynamic HTML, 4e

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

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

  47. 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, 4e

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

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

More Related