1
00:00:00,840 --> 00:00:06,150
This lesson, we're going to be selecting the element and the contents of these elements that we created

2
00:00:06,150 --> 00:00:07,380
in the previous lesson.

3
00:00:09,350 --> 00:00:14,720
Well, first of all, let's start by creating a variable, we'll just call it temp and then using the

4
00:00:14,720 --> 00:00:15,930
document object.

5
00:00:16,400 --> 00:00:22,130
So remember, this is an object and in JavaScript objects, you can move through the different objects

6
00:00:22,790 --> 00:00:27,140
by the dot notation or you could use the bracket notation as well.

7
00:00:27,380 --> 00:00:28,640
So we're going to do DOT.

8
00:00:28,820 --> 00:00:34,250
And then looking at all of the different children and the methods that are available, we want to use

9
00:00:34,250 --> 00:00:39,080
one of the methods that's available within JavaScript and that's query selector.

10
00:00:39,080 --> 00:00:42,650
All this is one of my favorite ways to make a selection.

11
00:00:42,860 --> 00:00:45,050
There's query selector and query selector all.

12
00:00:45,170 --> 00:00:51,140
And because in this case we're only selecting the one element I'm going to use query selector.

13
00:00:52,190 --> 00:00:57,740
Using the tag button, I'm going to be able to select it within that type of format and now when I type

14
00:00:57,740 --> 00:01:01,780
temp, we can see that the button is the one that gets lit up.

15
00:01:01,790 --> 00:01:06,590
So Chrome is lighting that up when I'm hovering over that, and then I can make use of the content that's

16
00:01:06,590 --> 00:01:07,340
available with it.

17
00:01:07,610 --> 00:01:09,950
So now I've got an object called temp.

18
00:01:10,280 --> 00:01:15,830
I can do inner text and you can see that Chrome gives you a suggestion of all the different available

19
00:01:16,340 --> 00:01:16,970
methods.

20
00:01:16,970 --> 00:01:19,760
And I'm going to change that to Hello World, that inner text.

21
00:01:19,940 --> 00:01:24,350
And as you can see, the content updates within the button as well.

22
00:01:24,500 --> 00:01:29,600
And this is how easy it is to use JavaScript and manipulate the contents of an element.

23
00:01:29,880 --> 00:01:35,930
You can also get information contained within there and that if we just simply type in temp, inner

24
00:01:35,930 --> 00:01:42,740
text, we can already see that the word hello world is being returned because this is the value of the

25
00:01:42,740 --> 00:01:45,890
entire text of temp is Hello world.

26
00:01:46,280 --> 00:01:52,400
Now let's make use of it within JavaScript, within our ED opening up our script file.

27
00:01:54,260 --> 00:01:59,720
We're going to do the same thing, but we're going to use CONSED because this object isn't going to

28
00:01:59,720 --> 00:02:00,380
be changing.

29
00:02:02,160 --> 00:02:05,420
We can use Button as our variable name.

30
00:02:06,550 --> 00:02:14,230
And using the same format that we just saw, document and query selector.

31
00:02:16,370 --> 00:02:25,370
Selecting the button element and now we've got it available within our button variable and we can output

32
00:02:25,370 --> 00:02:26,490
that button variable.

33
00:02:26,510 --> 00:02:32,210
So when I refresh the page, you can see that that element now has been output into the console.

34
00:02:32,360 --> 00:02:37,470
And that means that we have it within an object format that we can make use of within our JavaScript.

35
00:02:37,640 --> 00:02:44,660
So the next step, if we want to update the inner HTML or the inner text, we can do our HTML.

36
00:02:44,780 --> 00:02:50,900
And the difference between inner HTML and inner text is that the inner HTML allows you to have HTML.

37
00:02:51,950 --> 00:02:57,770
Scripting, whereas the inner text only outputs it as text format.

38
00:02:59,170 --> 00:03:05,410
So we'll update that to say hello, refresh the page, and you can see that now that has been updated

39
00:03:05,410 --> 00:03:06,240
as well.

40
00:03:06,610 --> 00:03:09,100
So go ahead and try this out for yourself.

41
00:03:09,370 --> 00:03:16,720
Open up your editor, make a selection of the element on the page and update the inner HTML or inner

42
00:03:16,720 --> 00:03:20,290
text of the content of that element that you've selected.

43
00:03:20,560 --> 00:03:25,660
And the next lesson I'll show you even more you can do now that we've selected it within an object format

44
00:03:25,660 --> 00:03:28,220
and we can make use of it within our JavaScript.

45
00:03:28,390 --> 00:03:30,000
So go ahead and try this out for yourself.