< Return to Video

Finding elements by Id (Video version)

  • 0:01 - 0:07
    I have this webpage "All about dogs,"
    which is great, but actually,
  • 0:07 - 0:13
    and I know not everybody will agree
    with me, I am more of a cats person,
  • 0:13 - 0:17
    and I would like to turn this
    into a webpage "All about cats."
  • 0:17 - 0:23
    I'm going to use JavaScript to do it
    instead of just modifying this HTML,
  • 0:23 - 0:26
    so that eventually,
    I could maybe turn this
  • 0:26 - 0:32
    into a browser extension to turn
    any webpage into being about cats.
  • 0:32 - 0:37
    Wouldn't that be amazing,
    an entire internet about cats?
  • 0:37 - 0:45
    Now, this webpage has a heading,
    a paragraph, and a couple images.
  • 0:45 - 0:50
    We're going to change each part
    at a time, starting with the heading,
  • 0:50 - 0:54
    using the two steps that we just learned.
  • 0:54 - 0:59
    The first step is to find the DOM node
    containing that heading.
  • 0:59 - 1:07
    The way that we found the DOM node
    before was just document.body,
  • 1:07 - 1:12
    but now I want something much
    more specific, I want just this h1.
  • 1:12 - 1:15
    Well, this h1 has an ID,
  • 1:15 - 1:20
    which means it should be the
    only tag with that ID on the page,
  • 1:20 - 1:25
    and there's actually a really easy way
    to find DOM nodes that have an ID,
  • 1:25 - 1:30
    a method on the document object
    called getElementById.
  • 1:30 - 1:33
    Let's use that down here
    in the tag,
  • 1:33 - 1:39
    starting off by declaring a variable
    to store it in-- `var headingEl`--
  • 1:39 - 1:42
    I like to end my variable names
    with El or Node,
  • 1:42 - 1:47
    so that I know they're storing an
    element, which we also call a node.
  • 1:47 - 1:53
    Now we use the method. It's a method
    attached to the global document object,
  • 1:53 - 1:59
    so we write `document`,
    then dot, then `getElementById`,
  • 1:59 - 2:05
    then parentheses because it's a function.
    It won't find anything just like that,
  • 2:05 - 2:08
    because it doesn't know
    what ID to look for.
  • 2:08 - 2:12
    Inside the parentheses we need to
    pass it the ID that we're looking for
  • 2:12 - 2:21
    as a string in quotes.
    So that is "heading".
  • 2:21 - 2:24
    How do we know
    if we found the element
  • 2:24 - 2:27
    before we actually try manipulating it?
  • 2:27 - 2:32
    One way is to use the
    console.log function.
  • 2:32 - 2:36
    Now, you can pause, and
    pop open your developer tools.
  • 2:36 - 2:41
    Try the keyboard shortcut
    command-option-i on the Mac,
  • 2:41 - 2:48
    or control-shift-i on Windows.
    One of those usually works.
  • 2:48 - 2:55
    Did you see the h1 logged out in your
    console? If so, yay, that means that
  • 2:55 - 3:00
    step one is complete. We found the
    element and stored it in a variable.
  • 3:00 - 3:06
    For step two, let's manipulate the element
    using the way that we already know,
  • 3:06 - 3:11
    changing the innerHTML. Let's see,
    so that means we're going to say
  • 3:11 - 3:18
    `headingEl.innerHTML = `--
    dun-dun-dun, moment of truth--
  • 3:18 - 3:23
    `"All about cats"`.
    There we go.
  • 3:23 - 3:27
    We have begun.
    Catification has commenced.
  • 3:27 - 3:32
    Now, you're going to try doing something
    just like that in the challenge.
Title:
Finding elements by Id (Video version)
Description:

more » « less
Video Language:
English
Duration:
03:33

English subtitles

Revisions