Transcript Working with Dynamic Content and Styles Creating a Dynamic Table of Contents XP

XP
Tutorial 16
Working with Dynamic Content and
Styles
Creating a Dynamic Table of Contents
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
1
XP
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
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
2
XP
Objectives
• Apply node properties and styles to create
dynamic content
• Work with the properties and methods of
attribute nodes
• Work with element attributes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
3
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
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
4
XP
Introducing Dynamic Content
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
5
XP
Introducing Dynamic Content
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
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
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
7
XP
Introducing Dynamic Content
• Inserting HTML Content into an Element
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
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;
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
9
XP
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"
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
10
XP
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”
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
11
Working with Nodes
XP
• 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
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
12
Working with Nodes
XP
• The Node Tree
– Nodes are
arranged into a
hierarchal structure
called a node tree,
which indicates the
relationship
between each of
the nodes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
13
Working with Nodes
XP
• The Node Tree
– The parent of all nodes within a document is the
root node
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
14
Working with Nodes
XP
• Node types, names, and values
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
15
Working with Nodes
XP
• Node types, names, and values
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
16
Working with Nodes
XP
• Creating and Attaching Nodes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
17
Working with Nodes
XP
• Creating and Attaching Nodes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
18
Working with Nodes
XP
• Creating and Attaching Nodes
– Unattached nodes and node trees are known as
document fragments and exist only in a
browser’s memory
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
19
Creating a List of Heading
Elements
XP
• Looping Through the Child Node Collection
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
20
Creating a List of Heading
Elements
XP
• Matching the Heading Elements
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
21
Creating a List of Heading
Elements
XP
• Creating the List Item Elements
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
22
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
23
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
24
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
25
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
26
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
27
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
28
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
29
XP
Creating a Nested List
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
30
XP
Working with Attributes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
31
XP
Working with Attributes
• Attribute Nodes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
32
XP
Working with Attributes
• Attribute Nodes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
33
XP
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 != ""
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
34
XP
Working with Attributes
• Setting the Section Heading Ids
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
35
XP
Working with Attributes
• Inserting Links
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
36
XP
Working with Attributes
• Inserting Links
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
37
Expanding and Collapsing a XP
Document
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
38
Expanding and Collapsing a XP
Document
• Creating a plus/minus Box
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
39
Expanding and Collapsing a XP
Document
• Creating a plus/minus Box
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
40
Expanding and Collapsing a XP
Document
• Adding Event Handlers to the plus/minus
Boxes
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
41
Expanding and Collapsing a XP
Document
• Hiding and Display Objects
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
42
Expanding and Collapsing a XP
Document
• Hiding and Display Objects
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
43
Expanding and Collapsing a XP
Document
• Expanding and Collapsing the Document
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
44
Expanding and Collapsing a XP
Document
• Expanding and Collapsing the Document
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
45
Expanding and Collapsing a XP
Document
• Expanding and Collapsing the Document
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
46
Expanding and Collapsing a XP
Document
• Expanding and Collapsing the Document
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
47
Expanding and Collapsing a XP
Document
• Expanding and Collapsing the Document
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
48
Expanding and Collapsing a XP
Document
• Testing the Dynamic TOC
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
49
XP
Traversing the Node Tree using
Recursion
• Recursion is a programming technique in
which a function calls itself repeatedly until a
stopping condition is met
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
50
XP
Traversing the Node Tree using
Recursion
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
51
XP
Traversing the Node Tree using
Recursion
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
52
XP
Working with Style Sheets
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
53
XP
Working with Style Sheets
• Working with the link element
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
54
XP
Working with Style Sheets
• The Style Sheet Collection
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
55
XP
Working with Style Sheets
• Working with Style Sheet Rules
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
56
Tips for Working with DynamicXP
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
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
57
Tips for Working with DynamicXP
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
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
58
Tips for Working with DynamicXP
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
Tutorial 16
New Perspectives on HTML, XHTML,
and DHTML, Comprehensive
59