Examples and Challenges:

Examples:

The DOM:

  1. Call an object by its id then insert text:
    2. document.getElementById("id-name")

    See the code by clicking the button.

  2. Call an object by its id then create text:
    3. document.getElementById("id-name")

    See the code by clicking the button.

  3. Call an object by its class then change styling of one element of the class:
    4. document.getElementsByClassName("class-name")

    Am I black?

    Am I blue?

    Am I red?

    See the code by clicking the button.

  4. Call an object by its tag then alter its styling:
    5. document.getElementsByTagName("tag")

    See the code by clicking the button.

Challenges:

The DOM:

  1. Call an object by its id then insert image:

    2. See the Pen abZNRJW by Justin Sawyer (@JustinSawyer) on CodePen.

  2. Call an object by its name then print how many of them there are:

    3. See the Pen How many names? by Justin Sawyer (@JustinSawyer) on CodePen.

  3. Create a block of code that stops the function reproducing its contents upon multiple clicks of the button:

    4. See the Pen create a block of code that stops the function reproducing its contents upon multiple clicks of the button by Justin Sawyer (@JustinSawyer) on CodePen.

Find more examples and chellenges in each of the different sections.

Home
Hoisting and Scope