$30 off During Our Annual Pro Sale. View Details »

DOM

 DOM

A few slides on the document object model and javascript.

John Nunemaker

November 03, 2009
Tweet

More Decks by John Nunemaker

Other Decks in Programming

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. getElementById returns single DOM element if match found. if no

    match, returns null. Thursday, November 5, 2009
  3. <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
  4. getElementsByClassName returns array of DOM elements matching a class name.

    if none found, then it returns an empty array. Thursday, November 5, 2009
  5. <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
  6. getElementsByTagName returns array of DOM elements matching a tag name.

    if none found, then it returns an empty array. Thursday, November 5, 2009
  7. <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
  8. innerHTML sets or gets the html syntax describing the elements

    descendants https://developer.mozilla.org/en/DOM:element.innerHTML Thursday, November 5, 2009