DOM

Document Object Modelhow the various HTML elements in a page are

related to each other and to the topmost structure: the document itselfhttp://www.digital-web.com/articles/the_document_object_model/

Thursday, November 5, 2009

http://www.digital-web.com/articles/the_document_object_model/

http://www.digital-web.com/articles/the_document_object_model/

DOM


the way JavaScript sees HTML


http://www.watershedcreative.com/naked/html-tree.html





Getting DOM Elements

• getElementById

• getElementsByClassName

• getElementsByTagName


getElementByIdreturns single DOM element if match found.

if no match, returns null.


<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>


getElementsByClassNamereturns array of DOM elements matching a class name.

if none found, then it returns an empty array.


<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>


getElementsByTagNamereturns array of DOM elements matching a tag name.

if none found, then it returns an empty array.


<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>


innerHTMLsets or gets the html syntax

describing the elements descendantshttps://developer.mozilla.org/en/DOM:element.innerHTML


https://developer.mozilla.org/en/DOM:element.innerHTML

https://developer.mozilla.org/en/DOM:element.innerHTML

style

https://developer.mozilla.org/en/DOM/CSS

allows you to change CSS properties using JavaScript




Assignment08

http://watershedcreative.com/naked/

http://teaching.johnnunemaker.com/capp-30550/sessions/xhtmlcss/

http://teaching.johnnunemaker.com/capp-30550/sessions/document-object-model/








Technology

DOM