rogerwschmidt/Day9.md

## Day9.md

      
    Raw
  

              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 describe what the DOM is and why it is important for web applications

Add script tags to connect your HTML and your javaScript.

Create a script tag

Target elements in HTML by using tags.

Target all div elements in the DOM and store the result in a variable

Target elements in HTML by uses class.

Target a class named "top" in the DOM and store the result in a variable

Target elements in HTML by id.

Target an id named "user" in the DOM and store the result in a variable

Access and replace the content of HTML elements in javaScript.

In the following html

<html>
<head>
  <title>
    This is HTML
  </title>
</head>
<body>
  <h1>This is the title of my page</h1>
  <p id="content">This is a paragraph</p>
</body>
</html>

Change the contents of the p tag with id "content" to say 'This paragraph has changed'


Create elements and add them to the DOM

Add another paragraph to the example above using javascript

Use a loop to add elements from an array to the DOM

<html>
<head>
  <title>
    This is HTML
  </title>
</head>
<body>
  <ul id="myList">
  </ul>
</body>
</html>


Given the following array:

var groceries = ['eggs','spinach','tomato paste', 'mushrooms']

Add each item, in turn, as a child to the unordered list named "myList"