Intro to DOM notes

dom.md

Document Object Model

Objectives

• Describe what a DOM tree is
• Explain why a DOM tree is useful
• Use selectors to access elements
• Manipulate DOM elements

Guiding Questions

• What is a DOM tree?

  Convert the following HTML to a DOM tree

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

  Your answer...

• Why is the DOM tree useful?

  Your answer...

• How do you use selectors to access elements?

  Read through these three DOM methods:

  • https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

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

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

  Your answer...

• How do you manipulate the DOM?

  Go to https://medium.com/ and use the DOM API in the console to make the following changes:

  1. Select the top left article title and update it's inner text.
  2. Select the Medium logo and remove it from the DOM.
  3. Append a new h1 in place of the logo just removed.
  4. Select and print out all the topics listed in the nav ("HOME", "GREAT ESCAPE", "CULTURE" etc.)

  Usefull DOM methods:

  • document.querySelector()
  • document.querySelectorAll()
  • document.createElement()
  • Element.appendChild()
  • Element.remove()
  • Element.innerText