dom-manipulation.md

DOM Manipulation Instructor Notes

Objectives

• Describe what a DOM tree is
• Explain why a DOM tree is useful
• Use selectors to access HTMLElements
• Traverse the DOM tree by using HTMLElement methods
• Manipulate existing DOM tree HTMLElements
• Create and append HTMLElements to the DOM tree.

What is a DOM tree?

• With your tables, explain what the DOM Tree is.
• Convert the following HTML to a DOM tree

<div>
  <div>
    <p>Title</p>
  </div>
  <div>
    <p>Frozen (2013)</p>
  </div>
</div>

Why is the DOM tree useful?

With your table, explain why the DOM tree is useful.

How do you use selectors to access HTMLElements?

On your slates, write the code to access .movieTitle.

<div>
  <div>
    <p class="title">Title</p>
  </div>
  <div>
    <p class="movieTitle">Frozen (2013)</p>
  </div>
</div>

How do you traverse the DOM tree using HTMLElement methods?

With your tables, create a definition of each of the following traversal methods

• childNodes
• firstChild
• lastChild
• parentNode
• nextSibling
• previousSibling

How do you manipulate existing DOM tree HTMLElements?

With your table, manipulate the CNN.com site to create your own headline. Be prepared to present.

How do you create and append HTMLElements to the DOM tree?

With your table, add a new story. Be prepared to present.