Transcript Powerpoint
DOM:
Document Object
Model
What are trees?
Or more like this…
A Better Example
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Descendents
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Children
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Children
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Siblings
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
HTML Creates a tree: DOM
HTML
tags create a tree
Called
the DOM
(Document Object Model)
HTML
body
header
h1
li
ul
div
div
section
li
p
p
td
td
td
p
tr
td
footer
table
tr
td
p
ul
li
li
td
figure
div
HTML
body
header
h1
ul
div
div
section
p
footer
table
p
ul
li
li
figure
child
li
li
p
p
td
td
td
tr
td
tr
td
siblings
td
div
Using the DOM
CSS
will allow us to
format selectively based
on the tree
CSS Selectors
context tag {
Applies to any tag inside context
Space is a descendant selector
context > tag {
Applies to any tag directly inside context
> is a child selector
Context + tag {
Applies only to a tag that DIRECTLY FOLLOWS a context
+ is an adjacent sibling selector
HTML
body
header
h1
li
ul
div
div
section
li
p
p
td
td
td
p
tr
td
footer
table
tr
td
p
ul
li
li
td
figure
div
Child pseudo elements
W3schools
first-child, last-child, nth-child(), nth-last-child()
() options:
Number
Even-odd
Formula
Every 3rd would be 3n+0
4, 7, 11 would be 3n+1
nth-last-child counts from end
CSS Inheritence
If you have 2 entries in your CSS:
div {}
div.class {}
BOTH are applied to <div class=“class”>
Taking advantage: “all my divs will have a border”
Problems: widths can conflict and rules aren’t obvious
Excel tables
to the web
Getting Tables to the Web
Tableizer
No classes
Not formatted
We have had Mac problems
HTML Formatter
Getting Tables to the Web
Mr. Data Converter
Sets up classes
Formatted
Caveat: it requires that there be a value in the upper left
cell