ECE 250 Algorithms and Data Structures

The Tree Data Structure

Douglas Wilhelm Harder

Department of Electrical and Computer Engineering
University of Waterloo
Waterloo, Ontario, Canada

Copyright © 2006-9 by Douglas Wilhelm Harder. All rights reserved.

 Tree Data Structure

Outline

• In this topic, we will cover:

– Definition of a tree data structure and its components
– Concepts of:
• Root, internal, and leaf nodes
• Parents, children, and siblings
• Paths, path length, height, and depth
• Ancestors and descendants
• Ordered and unordered trees
• Subtrees
– Examples
• XHTML and CSS

2
 Tree Data Structure

Trees

• A tree data structure stores information in nodes

– Similar to linked lists
– A variable number of next pointers

3
 Tree Data Structure

Trees

• A linked list is a simple tree

– Each node has one successor

4
 Tree Data Structure

Linked List

• Let us define a singly linked-list more rigorously:

– Each non-empty linked list has exactly one head node
– Each node has either zero or one successors
– The head node is the successor of no nodes and all other nodes are the
successor of exactly one other node
– All other nodes have exactly one node for which it is the successor
– The node with zero successors is called the tail node

5
 Tree Data Structure

Trees

• A tree is defined similarly, with few changes:

– Each non-empty tree has exactly one root node
– each node has zero or more successors
– The root is the successor of no nodes and all other nodes are the
successor of exactly one other node
– All other nodes have exactly one node for which it is the successor
– Nodes with no successors are leaf nodes

6
 Tree Data Structure

Terminology

• The shape of a tree gives a natural flow from the root node, or just root

7
 Tree Data Structure

Terminology

• The root node has no parent

• For all other nodes, e.g., the node storing the value “I”:
– There is one parent node (or parent), and
– Zero or more (in this case, three) child nodes (children)

8
 Tree Data Structure

Terminology

• The degree of a node is defined as the number of its children: deg(I) = 3

• Nodes with the same parent are siblings
– J, K, and L are siblings

9
 Tree Data Structure

Terminology

• Nodes with degree zero are also called leaf nodes

• All other nodes are said to be internal nodes, that is, they are internal to the
tree

10
 Tree Data Structure

Terminology

• The two trees

are equal if the order of the children is ignored (an unordered tree)
• They are different if order is relevant (ordered trees)
– We will usually examine ordered trees (linear orders)
– In a hierarchical ordering, order is not relevant

11
 Tree Data Structure

Terminology

• A path is a sequence of nodes

(a0, a1, ..., an)
where ak + 1 is a child of ak is
• The length of this path is n
• E.g., the path (B, E, G)
has length 2

12
 Tree Data Structure

Terminology

• For each node in a tree, there exists a unique path from the root node to
that node
• The length of this path is the depth of the node, e.g.,
– E has depth 2
– L has depth 3

13
 Tree Data Structure

Terminology

• The height of a tree is defined as the maximum depth of any node within the
tree
• The height of a tree with one node is 0
– Just a root
• For convenience, we define the height of the empty tree to be –1

14
 Tree Data Structure

Terminology

• If a path exists from node a to node b:

– a is an ancestor of b
– b is a descendent of a
• Thus, a node is both an ancestor and a descendant of itself
– We can add the adjective strict to exclude equality: a is a strict descendent of b if
a is a descendant of b but a ≠ b
• The root node is an ancestor of all nodes

15
 Tree Data Structure

Terminology

• The descendants of node B are B, C, D, E, F, and G:

• The ancestors of node I are I, H, and A:

16
 Tree Data Structure

Terminology

• Another approach to a tree is to define the tree recursively:

– A degree-0 node is a tree
– A node with degree n is a tree if it has n children and all of its children are disjoint
trees (i.e., with no intersecting nodes)
• Given any node a within a tree
with root r, the collection of a and
all of its descendants is said to
be a subtree of the tree with
root a

17
 Tree Data Structure

Example: XHTML and CSS

• The XML of HTML 4.0 has a tree structure

• Cascading Style Sheets (CSS) use the tree structure to display HTML

18
 Tree Data Structure

Example: XHTML and CSS

• Consider the following HTML document

<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>This is a <u>Heading</u></h1>

<p>This is a paragraph with some

<u>underlined</u> text.</p>
</body>
</html>

19
 Tree Data Structure

Example: XHTML and CSS

• Consider the following HTML document

<html>
title
<head>
<title>Hello World!</title> heading
</head>
<body>
<h1>This is a <u>Heading</u></h1>

<p>This is a paragraph with some

<u>underlined</u> text.</p>
body of page
</body>
underlining
</html>

paragraph

20
 Tree Data Structure

Example: XHTML and CSS

• The nested tags define sub-trees

<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>This is a <u>Heading</u></h1>

<p>This is a paragraph with some

<u>underlined</u> text.</p>
</body>
</html>

21
 Tree Data Structure

Example: XHTML and CSS

• This defines a single tree

22
 Tree Data Structure

Example: XHTML and CSS

• This may be rendered by a web browser

23
 Tree Data Structure

Example: XHTML and CSS

• XML tags <tag>...</tag> must be nested

• For example, to get the following effect:
123456789
you may use
<u>1 2 3 <b>4 5 6</b></u> <b>7 8 9</b>
• You may not use:
<u>1 2 3 <b>4 5 6</u> 7 8 9</b>

24
 Tree Data Structure

Example: XHTML and CSS

• Cascading Style Sheets (CSS) make use of this tree structure to describe
how HTML should be displayed
• For example:
<style type="text/css">
h1 { color:blue; }
</style>
indicates all text/decorations descendant from an h1 header should be blue

25
 Tree Data Structure

Example: XHTML and CSS

• For example, this style renders as follows:

<style type="text/css">
h1 { color:blue; }
</style>

26
 Tree Data Structure

Example: XHTML and CSS

• Adding red underlining:

<style type="text/css">
h1 { color:blue; }
u { color:red; }
</style>

27
 Tree Data Structure

Example: XHTML and CSS

• Suppose you don’t want underlined items in headers (h1) to be red

• More specifically, suppose you want any underlined text within paragraphs
to be red
• That is, you only want text marked as <u>text</u> to be underlined if it
is a descendant of a <p> tag

28
 Tree Data Structure

Example: XHTML and CSS

• Adding red underlining:

<style type="text/css">
h1 { color:blue; }
p u { color:red; }
</style>

29
 Tree Data Structure

Example: XHTML and CSS

• You can read the second style

<style type="text/css">
h1 { color:blue; }
p u { color:red; }
</style>

as saying “text/decorations descendant from the underlining tag (<u>)

which itself is a descendant of a paragraph tag should be coloured red”

30
 Tree Data Structure

Example: XML

• In general, any XML can be represented as a tree

– All XML tools make use of this feature

31
 Tree Data Structure

MathML: x2 + y2 = z2

<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo>
<msup><mi>y</mi><mn>2</mn></msup></mrow>
<mo>=</mo><msup><mi>z</mi><mn>2</mn></msup></mrow>
<annotation-xml encoding="MathML-Content">
<apply><eq/>
<apply><plus/>
<apply><power/><ci>x</ci><cn>2</cn></apply>
<apply><power/><ci>y</ci><cn>2</cn></apply>
</apply>
<apply><power/><ci>z</ci><cn>2</cn></apply>
</apply>
</annotation-xml>
<annotation encoding="Maple">x^2+y^2 = z^2</annotation>
</semantics>
</math>

32
 Tree Data Structure

MathML: x2 + y2 = z2

• The tree structure for the same MathML expression is

33
 Tree Data Structure

XML

• Why use 500 characters to describe the equation

x2 + y2 = z2
which, after all, is only twelve characters (counting spaces)?
• The root contains three children, each different codings of:
– How it should look (presentation),
– What it means mathematically (content), and
– A translation to a specific language (Maple)

34
 Tree Data Structure

Summary

• In this topic, we have:

– Introduced the terminology used for the tree data structure
– Discussed various terms which may be used to describe the properties of a tree,
including:
• root node, leaf node
• parent node, children, and siblings
• ordered trees
• paths, depth, and height
• ancestors, descendants, and subtrees
– We looked at XHTML and CSS

35
 Tree Data Structure

References

[1] Donald E. Knuth, The Art of Computer Programming, Volume 1: Fundamental Algorithms, 3rd
Ed., Addison Wesley, 1997, §2.2.1, p.238.

36
 Tree Data Structure

Usage Notes

• These slides are made publicly available on the web for anyone to use
• If you choose to use them, or a part thereof, for a course at another institution, I ask only three
things:
– that you inform me that you are using the slides,
– that you acknowledge my work, and
– that you alert me of any mistakes which I made or changes which you make, and allow me the option of
incorporating such changes (with an acknowledgment) in my set of slides

Sincerely,
Douglas Wilhelm Harder, MMath
[email protected]

37