1
00:00:02,190 --> 00:00:07,070
So we selected an element in the DOM or multiple elements,

2
00:00:07,110 --> 00:00:09,360
now we want to manipulate them.

3
00:00:09,360 --> 00:00:12,640
That is not something we have done too often in this course,

4
00:00:12,660 --> 00:00:18,270
sometimes like in the monster killer when we change the health bar that's rendered on the screen but it

5
00:00:18,270 --> 00:00:25,140
is something you typically want to do a lot in Javascript heavy applications where you want to provide

6
00:00:25,170 --> 00:00:31,020
that good user experience to the user, where you change things in the rendered user interface without

7
00:00:31,020 --> 00:00:33,140
the need to reload a new page

8
00:00:33,150 --> 00:00:38,110
with that changed HTML code, instead you want to change it in the already loaded page since that is

9
00:00:38,110 --> 00:00:41,870
just faster and provides a smoother experienced than loading a new page.

10
00:00:42,720 --> 00:00:48,750
So let's say we have a paragraph here with an ID and a CSS class and some text in there and

11
00:00:48,750 --> 00:00:54,510
we selected this, for example with get element by ID which we can of course do with that welcome text

12
00:00:55,190 --> 00:00:58,140
ID it has and store that in a constant

13
00:00:58,140 --> 00:01:00,730
and now, what can we do with that?

14
00:01:00,780 --> 00:01:07,020
Well for example, we can read its text content, welcome in this case and we do this with the text content

15
00:01:07,020 --> 00:01:14,190
property which this exposes. We can also read the ID by accessing p.id and gets ID as a string

16
00:01:14,310 --> 00:01:19,860
that's stored in there or the same for the CSS classes with the class name property. So important,

17
00:01:20,040 --> 00:01:26,160
not .class but class name to get access to the CSS classes that are assigned as a text here

18
00:01:26,520 --> 00:01:27,840
on the element.

19
00:01:27,870 --> 00:01:29,940
So that's how we can read data from there,

20
00:01:29,940 --> 00:01:31,920
something which you also want to do a lot.

21
00:01:31,920 --> 00:01:34,120
You don't always immediately change things,

22
00:01:34,200 --> 00:01:38,900
sometimes you also just want to find out in which current state is this element, which CSS class

23
00:01:38,900 --> 00:01:39,870
does it have

24
00:01:40,530 --> 00:01:46,800
but then you can also change this by for example assigning a new value to class name. Not all properties

25
00:01:46,920 --> 00:01:52,500
of an element are writable but a lot of them are and then you can assign a new text here and this will

26
00:01:52,500 --> 00:01:58,710
be reflected back in the DOM which the browser rendered and will of course be updated on the UI, totally

27
00:01:58,710 --> 00:02:00,540
automatic by the browser,

28
00:02:00,540 --> 00:02:01,790
so let's have a look at that.

29
00:02:01,800 --> 00:02:08,160
So back here in our playground, let's say on that header here, on this h1 element, I want to change

30
00:02:08,160 --> 00:02:14,910
the text color and the background color and maybe also the text which is shown in there.

31
00:02:14,910 --> 00:02:21,020
Well then first of all, we can get access to it, I reloaded the page for this and now I'll create my h1

32
00:02:21,030 --> 00:02:26,730
element with document and to mix things up, I'll use query selector h1 here, we could have

33
00:02:26,730 --> 00:02:33,420
used get element by ID and use the ID which this h1 tag has, the main title and now this is stored

34
00:02:33,420 --> 00:02:39,450
in h1, this is storing a reference to that DOM object which the browser exposes to us. Now here for

35
00:02:39,450 --> 00:02:48,290
example, we can read text content and get the text which is in there or a class name to get that CSS

36
00:02:48,290 --> 00:02:52,470
class string which is assigned to it, which currently is an empty string because indeed we have

37
00:02:52,470 --> 00:02:56,430
no classes assigned here and of course other things as well.

38
00:02:56,430 --> 00:03:03,390
Now let's say we want to change the text and for this, you can simply write text content equal and then

39
00:03:03,390 --> 00:03:09,300
some new text for example and if you do that and you hit enter, this changes here on the screen

40
00:03:09,360 --> 00:03:14,550
and what this does behind the scenes is it removes the old text node that was in there.

41
00:03:14,550 --> 00:03:20,430
Remember it's a node, just a text node and instead created a new text node and replaced the old one with

42
00:03:20,430 --> 00:03:20,720
it,

43
00:03:20,730 --> 00:03:23,400
so that's what happened behind the scenes.

44
00:03:23,400 --> 00:03:31,050
Now we can also assign a new CSS class by setting class name equal to title for example and

45
00:03:31,050 --> 00:03:37,760
if we do that and we go to elements, now we see the class title on there and if we now had some CSS

46
00:03:37,760 --> 00:03:41,890
code that would assign a certain style to that, we would see that

47
00:03:42,180 --> 00:03:48,780
but since we don't have that, let's change the style in a different way by reaching out to h1 and

48
00:03:48,780 --> 00:03:55,220
then there is a style property which in turn gives you access to a huge object with all these CSS

49
00:03:55,220 --> 00:04:01,830
styles you can assign to an object just now translated to Javascript properties you could say. So

50
00:04:01,830 --> 00:04:07,150
for example there you can set the color to white or to hex code

51
00:04:07,380 --> 00:04:10,140
and now the text is white which makes it quite hard to read.

52
00:04:10,320 --> 00:04:16,080
So let's also change the background color by going to h1 style and then import it here,

53
00:04:16,080 --> 00:04:20,880
background-color would not work because this is not a valid property name,

54
00:04:20,880 --> 00:04:23,440
you must not have dashes in there,

55
00:04:23,490 --> 00:04:29,160
so instead all these CSS property names that have a dash in there are translated to Javascript

56
00:04:29,160 --> 00:04:34,700
property names which are generally the same but where the dash is removed and to make it more readable

57
00:04:34,720 --> 00:04:37,740
therefore, the first character after the dash,

58
00:04:37,740 --> 00:04:44,610
so in this case the c, is replaced with a capital character, so background-color becomes background

59
00:04:44,610 --> 00:04:46,410
color, like this

60
00:04:46,410 --> 00:04:48,770
and now we can either read it,

61
00:04:48,830 --> 00:04:52,980
well there's nothing in there because no value has been assigned or assign a value,

62
00:04:52,980 --> 00:04:59,080
for example red. If you do that, you indeed see the red background, the white text and so on.

63
00:04:59,130 --> 00:05:05,640
So this is how you can work with the properties on these elements and also manipulate them.

64
00:05:05,640 --> 00:05:09,770
Now of course you might wonder, how do I know which properties are available?

65
00:05:09,780 --> 00:05:16,040
Well for one, don't forget you can always console.dir h1 and then simply dive into it,

66
00:05:16,070 --> 00:05:20,910
that is something I would recommend that you absolutely do because whilst there are many things which

67
00:05:20,910 --> 00:05:23,840
you won't fully understand yet, you can just ignore them,

68
00:05:23,850 --> 00:05:29,100
There are many things which you will understand and where you have an idea of where this value might

69
00:05:29,100 --> 00:05:31,780
be coming from and what changing it might do

70
00:05:31,890 --> 00:05:36,870
and you can also just try changing certain things, if it doesn't work, you can just reload the page

71
00:05:36,870 --> 00:05:38,040
and start from scratch, 

72
00:05:38,040 --> 00:05:41,510
nothing can go wrong there, so simply just play around with that

73
00:05:41,730 --> 00:05:47,460
but of course if you want a more official documentation with some explanations, you can always search

74
00:05:47,460 --> 00:05:54,930
on MDN, for example for h1 element and find an article on that with detailed explanation about that

75
00:05:54,960 --> 00:05:57,580
element of course and there important,

76
00:05:57,630 --> 00:06:02,640
you'll find the DOM interface, in this case a HTML heading element,

77
00:06:02,640 --> 00:06:05,870
this is in the end just the kind of object that is created automatically.

78
00:06:05,910 --> 00:06:07,860
You don't need to learn these heart of course,

79
00:06:07,860 --> 00:06:12,720
I'll dive into the relation between these different types of elements a little later once we learn more

80
00:06:12,720 --> 00:06:13,760
about objects, for now

81
00:06:13,760 --> 00:06:15,630
that doesn't really matter to us.

82
00:06:15,630 --> 00:06:20,650
What's important here is you'll find that list of properties which it has and the methods it has.

83
00:06:20,700 --> 00:06:26,100
Now what you see here for example is that a heading element doesn't really have any specific properties

84
00:06:26,100 --> 00:06:27,060
or methods,

85
00:06:27,060 --> 00:06:33,270
instead the HTML element which is kind of like an element or an object type this object type is based

86
00:06:33,270 --> 00:06:33,680
on,

87
00:06:33,810 --> 00:06:35,490
that's the one you want to have a look at.

88
00:06:35,490 --> 00:06:41,340
So if you go into that, here we find a more extensive list of properties that is available with descriptions

89
00:06:41,340 --> 00:06:43,550
of what they do and so on.

90
00:06:43,560 --> 00:06:47,580
So this is something you also always can dive into learn more about it

91
00:06:47,580 --> 00:06:53,130
but again, good old console.dir and looking into it is also something I would strongly recommend that

92
00:06:53,130 --> 00:06:58,530
you also give a try to get a feeling for what's happening there. Now really important here by the way,

93
00:06:58,740 --> 00:07:05,310
whatever you change here in Javascript will be lost whenever you reload the page because what you do

94
00:07:05,310 --> 00:07:07,320
in Javascript is only stored in memory,

95
00:07:07,320 --> 00:07:12,780
it of course doesn't affect the underlying files which were loaded which typically lie on some server

96
00:07:12,780 --> 00:07:13,860
on the Internet,

97
00:07:13,860 --> 00:07:19,140
so that of course changes. If you reload the page, you load these original files again and your Javascript

98
00:07:19,140 --> 00:07:25,020
changes are lost because whenever you reload the page, this essentially resets your Javascript application,

99
00:07:25,020 --> 00:07:30,480
it clears the existing application from memory in the end and starts a brand new application so your

100
00:07:30,480 --> 00:07:34,890
Javascript file is parsed again and any changes you made are not kept around,

101
00:07:34,890 --> 00:07:35,820
that's just a side note.