Skip to content

Instantly share code, notes, and snippets.

@rogerwschmidt
Last active June 5, 2017 17:30
Show Gist options
  • Save rogerwschmidt/ddecc4f297a57b98d0e91f8bfd7942d7 to your computer and use it in GitHub Desktop.
Save rogerwschmidt/ddecc4f297a57b98d0e91f8bfd7942d7 to your computer and use it in GitHub Desktop.

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"


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment