GithubHelp home page GithubHelp logo

js-dom-intro's Introduction

General Assembly Logo

JavaScript Document Object Model Manipulation

Objectives

By the end of this lesson, students should be able to:

  • Recognize the Document Object Model (DOM) as a data structure
  • Compare and contrast the DOM with arrays and maps
  • Put data into the DOM using JS
  • Get data from the DOM using JS
  • Find solutions to common DOM tasks using MDN and Google

Instructions

  1. Fork and clone this repo.
  2. Change into the project directory.
  3. Follow your instructor's instructions.

Review: Using Data Types

One student will volunteer to summarize with notes on the whiteboard. The class will participate by instructing the instructor on the code to write in the REPL.

  1. Demonstrate how to access data stored in an array.
  2. Demonstrate two ways to change data inside an array.
  3. Demonstrate how to access data stored in an object (hash).
  4. Demonstrate two ways to change data inside and object (hash).
myArray = [ "red", "orange", "yellow", "green", "blue", "indigo", "violet" ];

myObject = {
  movie: "Milk",
  release: 2008,
  url: "http://www.imdb.com/title/tt1013753/"
};

The Document Object Model (DOM)

Before we dive too deep into the DOM, we need to understand first how browsers work. Watch this short video on browser rendering. Don't worry too much about taking notes, we want a high-level understanding of what the browser does for us.

So, the DOM is a (potential) large object that describes the structure of our content. Since it's an object, we can use normal techniques to get and set data! In the browser, the DOM is represented by the document object. JS specifies some built-in methods that make using the DOM easier. Take a minute to review the summary of the DOM at MDN. Pay particular attention to the following methods:

  • Document.getElementById(String id)
  • Document.querySelector(String selector)
  • Document.querySelectorAll(String selector)

When reading these methods, try to get a sense of what they're trying to accomplish. We aren't going to ask you to memorize documentation. Don't worry about the details, since we're going to observe some examples.

Each of these methods returns an element from the DOM. What can we do with an Element? Let's write a few suggestions down on the board.

Exercise

We've provided some code for a simple list-keeping app. Play around with the app by opening index.html in your browser.

Next, work with a partner to read the application's JS code. Annotate the code with comments to explain what (nearly) every line does. If you don't know, Google it!

After you've had time for self-discovery, we'll go through the code together share our annotations.

Lab

Use some of the new tools you've learned to change all the headlines at TMZ

Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.

js-dom-intro's People

Contributors

srhoulam avatar tdyer avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.