New Perspectives on HTML, XHTML, and DHTML, Comprehensive

1
Working with Dynamic Content and Styles

• Creating a Dynamic Table of Contents

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

3
Objectives

• Apply node properties and styles to create
  dynamic content
• Work with the properties and methods of attribute
  nodes
• Work with element attributes

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

5
Introducing Dynamic Content
6
Introducing Dynamic Content
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

8
Introducing Dynamic Content

• Inserting HTML Content into an Element

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

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"

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 position is BeforeBegin, AfterBegin,
  BeforeEnd, or AfterEnd

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

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

14
Working with Nodes

• The Node Tree
• The parent of all nodes within a document is the
  root node

15
Working with Nodes

• Node types, names, and values

16
Working with Nodes

• Node types, names, and values

17
Working with Nodes

• Creating and Attaching Nodes

18
Working with Nodes

• Creating and Attaching Nodes

19
Working with Nodes

• Creating and Attaching Nodes
• Unattached nodes and node trees are known as
  document fragments and exist only in a browsers
  memory

20
Creating a List of Heading Elements

• Looping Through the Child Node Collection

21
Creating a List of Heading Elements

• Matching the Heading Elements

22
Creating a List of Heading Elements

• Creating the List Item Elements

23
Creating a Nested List
24
Creating a Nested List
25
Creating a Nested List
26
Creating a Nested List
27
Creating a Nested List
28
Creating a Nested List
29
Creating a Nested List
30
Creating a Nested List
31
Working with Attributes
32
Working with Attributes

• Attribute Nodes

33
Working with Attributes

• Attribute Nodes

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 ! ""

35
Working with Attributes

• Setting the Section Heading Ids

36
Working with Attributes

• Inserting Links

37
Working with Attributes

• Inserting Links

38
Expanding and Collapsing a Document
39
Expanding and Collapsing a Document

• Creating a plus/minus Box

40
Expanding and Collapsing a Document

• Creating a plus/minus Box

41
Expanding and Collapsing a Document

• Adding Event Handlers to the plus/minus Boxes

42
Expanding and Collapsing a Document

• Hiding and Display Objects

43
Expanding and Collapsing a Document

• Hiding and Display Objects

44
Expanding and Collapsing a Document

• Expanding and Collapsing the Document

45
Expanding and Collapsing a Document

• Expanding and Collapsing the Document

46
Expanding and Collapsing a Document

• Expanding and Collapsing the Document

47
Expanding and Collapsing a Document

• Expanding and Collapsing the Document

48
Expanding and Collapsing a Document

• Expanding and Collapsing the Document

49
Expanding and Collapsing a Document

• Testing the Dynamic TOC

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

51
Traversing the Node Tree using Recursion
52
Traversing the Node Tree using Recursion
53
Working with Style Sheets
54
Working with Style Sheets

• Working with the link element

55
Working with Style Sheets

• The Style Sheet Collection

56
Working with Style Sheets

• Working with Style Sheet Rules

57
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
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
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