Day9.md

The DOM

Objectives:

Describe what the DOM is and why it is important for web applications that use js.

Turn to your neighbor and together come up with your own analogy for what the DOM is?

Add script tags to connect your HTML and your javaScript.

Open http://www.theonion.com/ in a new tab and open the chrome developer console (right-click -> "Inspect"). Spend a few minutes looking through the DOM for <script> tags.

What do you notice about these <script> elements that differs from other types of html elements? What attributes do they have?

Target elements in HTML by tag.

Using document.querySelectorAll() target all the <img> elements on the page and store the result in a variable

MDN(querySelectorAll)

Target elements in HTML by class.

Target all elements with class named headline in the DOM and store the result in a variable

Target elements in HTML by id.

Target the element with id ribbon in the DOM and store the result in a variable

Access and replace the content of HTML elements in javaScript.

Target the second div inside the ribbon element (Hint: you can access an elements children with the .children property)

It should look like this: <div class="neg">America's Finest News Source</div>

With the above element selected, use the innerText property to replace it's text with "You've been hacked!"

Create elements and add them to the DOM

Create a new <a> element with document.createElement(), set it's innerText and append it to the element above.