DOM

1,264 views

Published on

A few slides on the document object model and javascript.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,264
On SlideShare
0
From Embeds
0
Number of Embeds
245
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DOM

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

×