Your SlideShare is downloading. ×
0
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
DOM
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DOM

1,015

Published on

A few slides on the document object model and javascript.

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,015
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. DOM Thursday, November 5, 2009
  • 3. the way JavaScript sees HTML Thursday, November 5, 2009
  • 4. http://www.watershedcreative.com/naked/html-tree.html Thursday, November 5, 2009
  • 5. Thursday, November 5, 2009
  • 6. Getting DOM Elements • getElementById • getElementsByClassName • getElementsByTagName Thursday, November 5, 2009
  • 7. getElementById returns single DOM element if match found. if no match, returns null. Thursday, November 5, 2009
  • 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. getElementsByClassName returns array of DOM elements matching a class name. if none found, then it returns an empty array. Thursday, November 5, 2009
  • 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. getElementsByTagName returns array of DOM elements matching a tag name. if none found, then it returns an empty array. Thursday, November 5, 2009
  • 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. innerHTML sets or gets the html syntax describing the elements descendants https://developer.mozilla.org/en/DOM:element.innerHTML Thursday, November 5, 2009
  • 14. style allows you to change CSS properties using JavaScript https://developer.mozilla.org/en/DOM/CSS Thursday, November 5, 2009
  • 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

×