1 / 59

Working with Dynamic Content and Styles

Working with Dynamic Content and Styles. Creating a Dynamic Table of Contents. 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

elmo
Download Presentation

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. Working with Dynamic Content and Styles Creating a Dynamic Table of Contents New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  2. 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 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  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 DHTML, Comprehensive

  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 DHTML, Comprehensive

  5. Introducing Dynamic Content New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  6. Introducing Dynamic Content New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  7. 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 DHTML, Comprehensive

  8. Introducing Dynamic Content • Inserting HTML Content into an Element New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  9. 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 DHTML, Comprehensive

  10. 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" New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  11. 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 positionis “BeforeBegin”, “AfterBegin”, “BeforeEnd”, or “AfterEnd” New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  12. 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 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  13. 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 DHTML, Comprehensive

  14. Working with Nodes • The Node Tree • The parent of all nodes within a document is the root node New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  15. Working with Nodes • Node types, names, and values New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  16. Working with Nodes • Node types, names, and values New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  17. Working with Nodes • Creating and Attaching Nodes New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  18. Working with Nodes • Creating and Attaching Nodes New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  19. 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 DHTML, Comprehensive

  20. Creating a List of Heading Elements • Looping Through the Child Node Collection New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  21. Creating a List of Heading Elements • Matching the Heading Elements New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  22. Creating a List of Heading Elements • Creating the List Item Elements New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  23. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  24. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  25. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  26. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  27. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  28. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  29. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  30. Creating a Nested List New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  31. Working with Attributes New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  32. Working with Attributes • Attribute Nodes New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  33. Working with Attributes • Attribute Nodes New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  34. 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 != "" New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  35. Working with Attributes • Setting the Section Heading Ids New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  36. Working with Attributes • Inserting Links New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  37. Working with Attributes • Inserting Links New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  38. Expanding and Collapsing a Document New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  39. Expanding and Collapsing a Document • Creating a plus/minus Box New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  40. Expanding and Collapsing a Document • Creating a plus/minus Box New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  41. Expanding and Collapsing a Document • Adding Event Handlers to the plus/minus Boxes New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  42. Expanding and Collapsing a Document • Hiding and Display Objects New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  43. Expanding and Collapsing a Document • Hiding and Display Objects New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  44. Expanding and Collapsing a Document • Expanding and Collapsing the Document New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  45. Expanding and Collapsing a Document • Expanding and Collapsing the Document New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  46. Expanding and Collapsing a Document • Expanding and Collapsing the Document New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  47. Expanding and Collapsing a Document • Expanding and Collapsing the Document New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  48. Expanding and Collapsing a Document • Expanding and Collapsing the Document New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  49. Expanding and Collapsing a Document • Testing the Dynamic TOC New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  50. Traversing the Node Tree using 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 DHTML, Comprehensive

More Related