DOM: Document Object Model. What are trees? Or more like this…
19
DOM: Document Object Model
-
Upload
paulina-campbell -
Category
Documents
-
view
213 -
download
1
Transcript of DOM: Document Object Model. What are trees? Or more like this…
DOM:Document
Object Model
What are trees?
Or more like this…
A Better ExampleSam & Bessie
Al & Jewel Paul & Dawn
Leo & Bea
Peter &
Cate
Mark &
Dina
Abby &
Phil
Tess &
John
Barb &
Ray
Kari & Hal
Dan &
Cora
Stu & Chi
Sue
Leah LoriMary Jen AndyAl Noah
BenJake
Amy Sara Moe AndyDi Lady
DescendentsSam & Bessie
Al & Jewel Paul & Dawn
Leo & Bea
Peter &
Cate
Mark &
Dina
Abby &
Phil
Tess &
John
Barb &
Ray
Kari & Hal
Dan &
Cora
Stu & Chi
Sue
Leah LoriMary Jen AndyAl Noah
BenJake
Amy Sara Moe AndyDi Lady
ChildrenSam & Bessie
Al & Jewel Paul & Dawn
Leo & Bea
Peter &
Cate
Mark &
Dina
Abby &
Phil
Tess &
John
Barb &
Ray
Kari & Hal
Dan &
Cora
Stu & Chi
Sue
Leah LoriMary Jen AndyAl Noah
BenJake
Amy Sara Moe AndyDi Lady
ChildrenSam & Bessie
Al & Jewel Paul & Dawn
Leo & Bea
Peter &
Cate
Mark &
Dina
Abby &
Phil
Tess &
John
Barb &
Ray
Kari & Hal
Dan &
Cora
Stu & Chi
Sue
Leah LoriMary Jen Andy Noah
BenJake
Amy Sara Moe AndyDi Lady
Al
SiblingsSam & Bessie
Al & Jewel Paul & Dawn
Leo & Bea
Peter &
Cate
Mark &
Dina
Abby &
Phil
Tess &
John
Barb &
Ray
Kari & Hal
Dan &
Cora
Stu & Chi
Sue
Leah LoriMary Jen AndyAl Noah
BenJake
Amy Sara Moe AndyDi Lady
HTML Creates a tree: DOM
HTML tags create a treeCalled the DOM
(Document Object Model)
HTMLbody
div footerheader
h1 section
ul p tablediv p figureul
li pli tr trp li divli
td td td tdtd td
HTMLbody
div footerheader
h1 section
ul p tablediv p figureul
li pli tr trp li divli
td td td tdtd td
siblings
child
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
HTMLbody
div footerheader
h1 section
ul p tablediv p figureul
li pli tr trp li divli
td td td tdtd td
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
![[MS-DOM2H]: Internet Explorer Document Object Model (DOM ... · This document describes the level of support provided by Microsoft web browsers for the Document Object Model (DOM)](https://static.fdocuments.in/doc/165x107/5f478f61763a916b9b6765a8/ms-dom2h-internet-explorer-document-object-model-dom-this-document-describes.jpg)
![[24] Document Object Model 101 - s3.amazonaws.coms3.amazonaws.com/...fall/...Object-Model-DOM-101.pdf · Document Object Model (DOM) •Web pages are, similarly, made up of objects](https://static.fdocuments.in/doc/165x107/5aa1c0bc7f8b9a80378c0e48/24-document-object-model-101-s3-object-model-dom-web-pages-are-similarly.jpg)
