DOM

A few slides on the document object model and javascript.

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 https://developer.mozilla.org/en/DOM/CSS allows you to change CSS properties using JavaScript Thursday, November 5, 2009
15. 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