Document Object Model
how the various HTML elements in a page are
related to each other and to the topmost
structure: the document itself
http://www.digital-web.com/articles/the_document_object_model/
Thursday, November 5, 2009
Slide 2
Slide 2 text
DOM
Thursday, November 5, 2009
Slide 3
Slide 3 text
the way JavaScript sees HTML
Thursday, November 5, 2009
Slide 4
Slide 4 text
http://www.watershedcreative.com/naked/html-tree.html
Thursday, November 5, 2009
Slide 5
Slide 5 text
Thursday, November 5, 2009
Slide 6
Slide 6 text
Getting DOM Elements
• getElementById
• getElementsByClassName
• getElementsByTagName
Thursday, November 5, 2009
Slide 7
Slide 7 text
getElementById
returns single DOM element if match found.
if no match, returns null.
Thursday, November 5, 2009
Slide 8
Slide 8 text
Hello
How are you?
var content = document.getElementById('content');
content // single dom element div with id of "content"
Thursday, November 5, 2009
Slide 9
Slide 9 text
getElementsByClassName
returns array of DOM elements matching a class name.
if none found, then it returns an empty array.
Thursday, November 5, 2009
Slide 10
Slide 10 text
The DOM
In which I teach...
Midterm Review
In which I teach...
var posts = document.getElementsByClassName('post');
posts // array of dom elements with class of 'post'
Thursday, November 5, 2009
Slide 11
Slide 11 text
getElementsByTagName
returns array of DOM elements matching a tag name.
if none found, then it returns an empty array.
Thursday, November 5, 2009
Slide 12
Slide 12 text
Here is my first paragraph.
Here is my second paragraph.
Here is my third paragraph.
var paragraphs = document.getElementsByTagName('p');
paragraphs // array of each p tag
Thursday, November 5, 2009
Slide 13
Slide 13 text
innerHTML
sets or gets the html syntax
describing the elements descendants
https://developer.mozilla.org/en/DOM:element.innerHTML
Thursday, November 5, 2009
Slide 14
Slide 14 text
style
https://developer.mozilla.org/en/DOM/CSS
allows you to change CSS
properties using JavaScript
Thursday, November 5, 2009
Slide 15
Slide 15 text
Assignment08
http://watershedcreative.com/naked/
http://teaching.johnnunemaker.com/capp-30550/sessions/xhtmlcss/
http://teaching.johnnunemaker.com/capp-30550/sessions/document-object-model/
Thursday, November 5, 2009