Study Guide #1: DOM and Drag&Drop
Dig 4104c – Spring 2013 – Moshell
The purpose of this week's study is to master the concepts behind the HTML5
Document Object Model (DOM), so that you can get started on Project 1. For many of
you, this will be a review.
Your reference readings are at
http://www.w3schools.com/htmldom/default.asp
Your requirement for class on Monday 14 January is (depending on which Cluster
you're assigned to) to prepare mini-explanations and examples for FOUR or more
concepts that occur within your assigned range of topics. Here's the chart:
Cluster -->
Topics:
Nodes
Methods
Properties
Access
Modify
Content
Elements
Events
Navigation
1
x
x
x
x
2
x
x
x
x
3
x
x
x
x
4
x
x
x
x
5
x
x
x
x
What you must do. Your obligation is to prepare examples that are NOT cookiecutter copies of the ones in the reference material. However, it is OK to take those
examples and modify them. This proves that (a) you understand them, and (b) you
have sufficient debugging skill to fix any problems that happened when you were
modifying the examples.
Not all examples are interactive pieces of code. For instance, If you are analyzing
'node', then the concepts you need to explain will include
document node
element node
text node
attribute node
comment node
There is a worked out example in the text, which you can use as the starting point of
your discussion. But you must also produce an example of your own making, for
instance:
<html>
<head>
<title>Frogs and Turtles</title>
</head>
<body>
<p id='frogstuff'>Frogs are thin-skinned and come from tadpoles.</p>
<p id='turtlestuff'>Turtles are hard-shelled and come from eggs.</p>
</body>
</html>
You can then use the example to demonstrate the concepts. For instance, here's an
explanation of the concept of 'parent and child' relationships between nodes. (You
wouldn't have to write out these words for your audience; just show the picture and
explain it.)
=======
PARENT and CHILD nodes (and the children are 'siblings' of each other)
<html>
<head>
<title>Frogs and Turtles</title>
</head>
<body>
<p id='frogstuff'>Frogs are thin-skinned and come from tadpoles.</p>
<p id='turtlestuff'>Turtles are hard-shelled and come from eggs.</p>
</body>
</html>
Explanation: A child node is located inside its parent node. Each child node except
the outermost ("document") node has exactly one parent. A sibling node to node N is
any node which is a child of N's parent.
========
My example, by using color, is at risk of violating accessibility standards. So I
also used a larger font for Parent, and an italic font for Child – so as not to
depend solely on color to differentiate the features.
What freedom you have ... there are usually more than four concepts in the subject
areas I've given you. You are free to profile any four of them. I recommend picking
subjects that you are not already familiar with ... because the purpose of this
exercise is to prepare for the inevitable midterm exam – and your presentation notes
become your reference material for that open book exam.
In class next Monday, I'll select several people from each cluster, and ask you for the
names of the four topics you're prepared to explain. I'll then pick out the ones that I
want you to explain; fill in any holes; and move on.
© Copyright 2026 Paperzz