1
00:00:00,300 --> 00:00:03,000
This lesson is all about manipulation.

2
00:00:03,030 --> 00:00:07,800
Sounds like fun, we've already had a sneak peek of this in the earlier lessons where we updated some

3
00:00:07,830 --> 00:00:09,930
of the content on the inside of the element.

4
00:00:10,230 --> 00:00:15,480
We're going to be doing more of that in this lesson, as well as updating element attributes, getting

5
00:00:15,480 --> 00:00:17,010
attributes, setting attributes.

6
00:00:17,190 --> 00:00:19,110
And we've already seen the style attributes.

7
00:00:19,110 --> 00:00:23,690
So there's a little bit more that we're going to cover in this lesson in regards to the style attribute.

8
00:00:23,880 --> 00:00:25,310
So element manipulation.

9
00:00:25,320 --> 00:00:28,190
So we're able to set the inner HTML.

10
00:00:28,410 --> 00:00:30,810
So this is commonly used in order to update.

11
00:00:30,810 --> 00:00:37,920
If you want to update the HTML of an element, if you want to update the text or the content you could

12
00:00:37,920 --> 00:00:43,720
use in her text or in her content, both are available as well as text content.

13
00:00:43,730 --> 00:00:47,610
So that one is another way to update that inner content of the element.

14
00:00:47,640 --> 00:00:54,000
So there's a lot of different ways to make updates and use the one that's appropriate for the situation.

15
00:00:54,180 --> 00:01:01,170
You can also get the element object as a variable and then you can use that and shorten your code.

16
00:01:01,180 --> 00:01:05,160
So we've got an example here where we're doing our selection of the element.

17
00:01:05,160 --> 00:01:10,290
We're selecting the one with an idea of one, and then we're updating the TEMEL.

18
00:01:10,290 --> 00:01:11,910
We're updating the style color.

19
00:01:12,150 --> 00:01:17,910
So setting the fight to read saying style background, some background color to blue and then updating

20
00:01:17,910 --> 00:01:22,220
the inner text to say tests are doing quite a bit of changes on that one.

21
00:01:22,560 --> 00:01:26,610
So you can also get the element and you can set the element ID.

22
00:01:26,850 --> 00:01:33,390
So one way that we were able to select the elements is via the ID so we can get that ID value from the

23
00:01:33,390 --> 00:01:33,860
element.

24
00:01:33,870 --> 00:01:39,090
And here's an example of how we're selecting all the list items were looping through all the list items

25
00:01:39,300 --> 00:01:42,510
we're updating the text, the inner HTML, the inner text.

26
00:01:42,750 --> 00:01:44,870
So we've got a bunch of stuff that we're updating.

27
00:01:44,880 --> 00:01:48,240
We're also updating its ID dynamically with JavaScript.

28
00:01:48,240 --> 00:01:49,740
So that's a really cool feature.

29
00:01:49,920 --> 00:01:51,750
We're updating the inner text there.

30
00:01:52,380 --> 00:01:57,510
We're setting an attributes, so updating its class and adding on a class of test for.

31
00:01:57,720 --> 00:02:00,570
So there's a lot of stuff going on and we're going to be covering this.

32
00:02:00,780 --> 00:02:01,680
So you had to do this.

33
00:02:02,310 --> 00:02:07,110
So the different methods that we're using is to get an attribute.

34
00:02:07,320 --> 00:02:10,230
This gives us the ability to get the elements attribute.

35
00:02:10,410 --> 00:02:13,470
There's an example of how we're getting the element attribute.

36
00:02:13,650 --> 00:02:19,620
So we're getting element by ID and then updating, getting its attribute and then outputting its attribute

37
00:02:19,620 --> 00:02:21,240
value within the console.

38
00:02:21,450 --> 00:02:23,130
And there's also another example.

39
00:02:23,140 --> 00:02:25,860
So if you can get it, you can also usually set it.

40
00:02:25,860 --> 00:02:27,330
So that's also the case here.

41
00:02:27,510 --> 00:02:32,970
So using set attribute gives you the ability to set the attribute name to Hello Button.

42
00:02:33,150 --> 00:02:36,630
And in our example, we're going to be setting the class to a value.

43
00:02:36,810 --> 00:02:40,110
You can also set disabled to a value as well.

44
00:02:40,320 --> 00:02:45,600
So there's a lot of things that you can do when you're setting attributes as well as you can return

45
00:02:45,600 --> 00:02:46,650
back to attribute.

46
00:02:46,800 --> 00:02:51,380
When you do get you can also update an element image and a neutral path.

47
00:02:51,390 --> 00:02:52,770
So we've got an example here.

48
00:02:53,100 --> 00:02:59,460
Since we can get the attribute and attribute for the element is that if we can update the RF with a

49
00:02:59,460 --> 00:03:06,450
new value, we can also get the image source and update the image source with a new value.

50
00:03:06,450 --> 00:03:09,900
So quite a lot that we can do when we're getting and setting attributes.

51
00:03:10,530 --> 00:03:15,380
You can also remove an element from a page by using the remove method.

52
00:03:15,600 --> 00:03:21,660
So selecting the element that you want to remove and then specifying remove will remove the element

53
00:03:21,660 --> 00:03:22,500
from the page.

54
00:03:22,710 --> 00:03:28,920
So there is a challenge to this lesson, of course, and the objective is to update all the list items

55
00:03:28,920 --> 00:03:34,800
with IDs in sequence and also content with the particular count.

56
00:03:34,810 --> 00:03:41,220
So we're going to take all the list items reset or add IDs that are going to be in sequence as well

57
00:03:41,220 --> 00:03:45,510
as doing list item zero one, two, three, four, five, six.

58
00:03:45,870 --> 00:03:49,080
We're also going to get the class and output it into the console.

59
00:03:49,090 --> 00:03:53,940
So if the element has a class, we're going to update it into the ANADA, into the console.

60
00:03:54,120 --> 00:03:58,500
So we're getting the attribute class and we're going to output them if it does have it.

61
00:03:58,530 --> 00:04:03,150
So first and then we're also going to remove the first div with the class of.

62
00:04:03,600 --> 00:04:05,880
So that's quite a bit to this challenge.

63
00:04:05,880 --> 00:04:11,460
I'll give you a sneak peek at the code and there really isn't a lot of code in order to accomplish this.

64
00:04:11,700 --> 00:04:13,650
So it's just a few lines of JavaScript.

65
00:04:13,650 --> 00:04:16,890
And as you can see, there's quite a bit you can do with JavaScript.

66
00:04:17,190 --> 00:04:18,240
Supports the video.

67
00:04:18,440 --> 00:04:24,300
Try it out and I'll walk you through all of what we've covered in the earlier part of this lesson.

68
00:04:24,570 --> 00:04:28,140
So I know we had quite a bit of stuff going on in this lesson.

69
00:04:28,350 --> 00:04:35,730
So first of all, let's select the element as a value that we can use so we can just do it as a test

70
00:04:35,730 --> 00:04:42,870
or we can call it temp elements and using document sort of processing it into a variable object called

71
00:04:42,870 --> 00:04:49,640
temp and using query selector, we're going to select the element with the H1 tag.

72
00:04:49,980 --> 00:04:55,500
So now we've got it within the temp object and we could update its inner text.

73
00:04:55,500 --> 00:04:58,560
So let's get it to say hello.

74
00:04:58,570 --> 00:04:59,850
So see, the update was.

75
00:04:59,940 --> 00:05:08,760
On there, you can also update in our HTML, so this will give you the ability to add HTML so we can

76
00:05:08,760 --> 00:05:09,870
do simple line.

77
00:05:10,260 --> 00:05:11,490
So how about we change it to hi.

78
00:05:11,500 --> 00:05:11,910
Hello.

79
00:05:11,940 --> 00:05:13,530
So now we've got Temel in there.

80
00:05:13,530 --> 00:05:19,800
I can see that HTML is added into that element to make this a little bit bigger.

81
00:05:20,520 --> 00:05:26,650
There's also temp and we had text content so we can set the text content.

82
00:05:27,420 --> 00:05:33,160
So in this case, let's set up to Hello World and there's also in our text as well.

83
00:05:33,720 --> 00:05:38,620
So that's another option and we'll just call it Helu.

84
00:05:39,360 --> 00:05:42,570
So there's a few different options to update that inner content.

85
00:05:42,750 --> 00:05:46,980
And as you can see, the biggest differences with the HTML.

86
00:05:47,010 --> 00:05:53,640
So if you want to include HTML, make sure you using the inner HTML and if you console directory out

87
00:05:53,640 --> 00:05:55,500
that temp object.

88
00:05:58,090 --> 00:06:04,840
And you can see that all of these values in our HTML is set, their inner text is set there, and just

89
00:06:04,840 --> 00:06:09,210
like any other object in JavaScript, we can update these values.

90
00:06:09,910 --> 00:06:12,610
And then also going down here, we have text content.

91
00:06:12,790 --> 00:06:19,140
So any value that's here within the object we can select, we can update it and we can manipulate it.

92
00:06:19,510 --> 00:06:21,490
So also going back into the console.

93
00:06:22,090 --> 00:06:25,060
So we've got temp and we can return back.

94
00:06:25,060 --> 00:06:31,380
It's Idy because again, this is an object, so there is no ID set to this particular element.

95
00:06:31,660 --> 00:06:35,740
So let's go ahead and set it to temp one.

96
00:06:36,640 --> 00:06:44,350
And now when we go into the elements, you can see that we've got an ID of temp one set now within the

97
00:06:44,500 --> 00:06:48,450
document object so you can manipulate these element values.

98
00:06:48,700 --> 00:06:51,100
We can also add in classes as well.

99
00:06:51,110 --> 00:06:59,050
So let's create a first first of all, create a class and we'll change the text color to read user javascript

100
00:06:59,050 --> 00:07:02,920
set attribute and setting the attribute class.

101
00:07:02,920 --> 00:07:07,920
When we refresh, we see that we've got it added in a class to that particular elements.

102
00:07:07,930 --> 00:07:09,320
We've got a class of red.

103
00:07:09,610 --> 00:07:16,720
You can also read the class value if you want by using a get get attribute to that, you can get class

104
00:07:16,720 --> 00:07:17,110
as well.

105
00:07:17,290 --> 00:07:22,540
So temp get attribute and attribute that we want to return back is class.

106
00:07:22,550 --> 00:07:28,360
So you can see that the class that's been set in there is so you can get and set attributes and there's

107
00:07:28,360 --> 00:07:30,700
also remove as well that we covered.

108
00:07:30,710 --> 00:07:32,080
So now we covered quite a bit.

109
00:07:32,200 --> 00:07:35,320
And as you can see now, it's been that elements been removed.

110
00:07:35,680 --> 00:07:41,980
So we don't have we still have temp sitting within the memory, but we've removed it from the HTML,

111
00:07:41,980 --> 00:07:43,060
from the DOM object.

112
00:07:43,090 --> 00:07:44,410
So that's an interesting effect.

113
00:07:44,410 --> 00:07:46,900
With remove it removes it from the visible part.

114
00:07:46,900 --> 00:07:51,820
We can still hold it within the memory and we can still access that and we can update it manipulated.

115
00:07:51,970 --> 00:07:54,310
And then eventually we can also add it back into the page.

116
00:07:54,310 --> 00:07:56,120
And I'll show you how to do that coming up as well.

117
00:07:56,170 --> 00:07:58,800
This lesson is going to be continued, so I had to break it up.

118
00:07:58,810 --> 00:08:00,130
So the second part coming up.