1
00:00:00,300 --> 00:00:01,040
Welcome back.

2
00:00:01,050 --> 00:00:03,240
In this video we're going to pick up where we left off.

3
00:00:03,240 --> 00:00:07,020
We're going to keep talking about some other ways of manipulating elements.

4
00:00:07,020 --> 00:00:12,420
Remember we select them and then manipulate and so far we've seen how we can change the color or any

5
00:00:12,420 --> 00:00:17,330
style properties and also how we can use the class list to affect styling as well.

6
00:00:17,640 --> 00:00:22,050
So in this video we're going to talk about two different properties both of which allow us to change

7
00:00:22,050 --> 00:00:24,770
the text or the aged him out on a page.

8
00:00:24,780 --> 00:00:31,080
So if I wanted to change the content instead of an H1 tag or instead of a strong tag like I have here

9
00:00:31,350 --> 00:00:35,040
or for I wanted change anchor tag the text itself.

10
00:00:35,040 --> 00:00:37,030
That's what we're going to see how to do in this video.

11
00:00:37,410 --> 00:00:40,590
So the first property is something called text content.

12
00:00:41,190 --> 00:00:47,430
As you can see here I've a paragraph with some text and a strong tag that says Awesome.

13
00:00:47,520 --> 00:00:50,090
And then the rest of the paragraph text.

14
00:00:50,160 --> 00:00:57,900
So if I select this with document Duckery selector P I save that to a variable and I do tag dot text

15
00:00:57,900 --> 00:01:04,500
content that will retrieve the text inside of that each time element and text is defined as anything

16
00:01:04,620 --> 00:01:08,210
between HTML tags but not including the tax.

17
00:01:08,430 --> 00:01:09,870
So you'll see it returns.

18
00:01:09,870 --> 00:01:11,760
This is an awesome paragraph.

19
00:01:11,760 --> 00:01:18,110
It doesn't contain the strong tags so it just extracts all the text from inside of that paragraph.

20
00:01:18,270 --> 00:01:20,240
However many layers deep it needs to go.

21
00:01:20,280 --> 00:01:23,620
It grabs all the text and returns one big string.

22
00:01:24,120 --> 00:01:30,310
And of course we can also set text content like I did here tag text content equals blah blah blah.

23
00:01:30,510 --> 00:01:33,830
And that will reset the text content to be blah blah blah.

24
00:01:33,870 --> 00:01:35,270
Inside of this paragraph.

25
00:01:35,460 --> 00:01:40,140
Ok so I'm going to go ahead and demonstrate how we can use the text content property before we do that

26
00:01:40,140 --> 00:01:40,350
.

27
00:01:40,350 --> 00:01:46,500
I'm going to update our sample demo Tim Page with just a few more lines of markup so that we have some

28
00:01:46,500 --> 00:01:47,940
more text to work with.

29
00:01:47,970 --> 00:01:55,740
So I'm going to add a UL and inside this you will going to add let's do flowers.

30
00:01:55,860 --> 00:01:57,500
So orchids.

31
00:01:57,900 --> 00:02:04,700
Let's do succulence and last the tulips.

32
00:02:04,730 --> 00:02:05,260
OK.

33
00:02:05,400 --> 00:02:06,560
We're going to go ahead and work with this.

34
00:02:06,560 --> 00:02:09,680
In the javascript console.

35
00:02:09,840 --> 00:02:16,800
So here's our page here's our well with our three allies and then we also have this paragraph that has

36
00:02:16,800 --> 00:02:22,380
the strong tag around the word super corgi mixes are super adorable as you can see.

37
00:02:22,560 --> 00:02:24,340
Yes they are.

38
00:02:24,340 --> 00:02:31,800
So I'm going to go to the consul and let's start by just selecting this paragraph far P equals document

39
00:02:31,820 --> 00:02:32,020
.

40
00:02:32,280 --> 00:02:36,740
And my first instinct is always to use query selector because it's so easy.

41
00:02:36,900 --> 00:02:38,470
But I'm not going to do that.

42
00:02:38,580 --> 00:02:41,410
Just that we use another way just get more practice.

43
00:02:41,460 --> 00:02:50,550
I'm going to use GET elements by tag name and that tag name is paragraph and then remember we still

44
00:02:50,550 --> 00:02:52,320
have to ask for the first one.

45
00:02:52,690 --> 00:03:01,620
So now if we look at P we have that paragraph and if we run text content on that of text content it

46
00:03:01,620 --> 00:03:04,320
tells us corgi mixes are super adorable.

47
00:03:04,320 --> 00:03:06,510
So it takes all the text inside there.

48
00:03:06,870 --> 00:03:13,650
Let's do the same thing on the UL so that select the UL var UL and this time I will use queery selector

49
00:03:15,470 --> 00:03:17,770
ul.

50
00:03:18,150 --> 00:03:19,280
Let's look at the UL.

51
00:03:19,320 --> 00:03:21,570
Make sure we have the correct one.

52
00:03:21,570 --> 00:03:22,820
Definitely the right one.

53
00:03:22,980 --> 00:03:26,640
And let's do teks content on that.

54
00:03:27,330 --> 00:03:35,030
And you can see it gets rid of the tags and it just gets the pure text content inside of that UL and

55
00:03:35,040 --> 00:03:37,440
then what we can do is also update that.

56
00:03:37,440 --> 00:03:42,780
So this is a little bit dangerous actually because let's say I want to update what this paragraph text

57
00:03:42,780 --> 00:03:49,070
content is and I want to update it to say corgi mixes are really really super adorable.

58
00:03:49,440 --> 00:04:00,630
Well I could do p text content equals and then say corgi mixes are really really super adorable but

59
00:04:00,630 --> 00:04:02,600
hopefully you can see the problem.

60
00:04:02,670 --> 00:04:05,890
I'm going to get rid of this strong tag here.

61
00:04:06,090 --> 00:04:09,180
If I hit enter just completely overwrites it.

62
00:04:09,180 --> 00:04:14,610
So if we expect this element now we've just gotten rid of whatever was inside there which was a strong

63
00:04:14,600 --> 00:04:15,490
take.

64
00:04:15,600 --> 00:04:20,280
So text content is a little bit dangerous in that sense if you're using it to set something it's not

65
00:04:20,280 --> 00:04:22,690
bad but you just have to be careful about it.

66
00:04:22,710 --> 00:04:24,880
You need to know exactly what's inside of an element.

67
00:04:24,900 --> 00:04:30,420
If there is H.T. email tags that you want to preserve you don't want to just automatically set all of

68
00:04:30,420 --> 00:04:33,720
text content to be a news stream because that will erase everything.

69
00:04:34,050 --> 00:04:39,330
There's another property that works along the same lines as text content except it actually keeps the

70
00:04:39,480 --> 00:04:43,480
two male elements intact so it doesn't just extract the text.

71
00:04:43,500 --> 00:04:46,240
It actually maintains the structure with a correct each time.

72
00:04:46,260 --> 00:04:52,800
Elements returned as well as the text so that property is called Inner HMO.

73
00:04:53,580 --> 00:04:55,020
So we have our same paragraph.

74
00:04:55,020 --> 00:04:59,970
This is an awesome paragraph with strong tags around it around awesome.

75
00:05:00,060 --> 00:05:07,140
And then we select it with query selector and then we run tag dot inner h m l and that gives me this

76
00:05:07,140 --> 00:05:11,870
is an awesome paragraph while keeping the strong tag there.

77
00:05:12,270 --> 00:05:18,510
So I'll show you another example and refresh the page so that we have our strong tag back here and I'm

78
00:05:18,510 --> 00:05:20,640
going to go ahead and select the paragraph again.

79
00:05:20,850 --> 00:05:28,040
Document doc query selector paragraph and we're going to run.

80
00:05:28,350 --> 00:05:33,760
Let's just review text content first and then let's do it for him.

81
00:05:34,870 --> 00:05:38,350
And you can see we get the strong tag returned to us as well.

82
00:05:38,940 --> 00:05:43,300
Let's do the same thing for the UL and the lies that are inside of it.

83
00:05:43,320 --> 00:05:49,020
So var UL equals document doc query selector.

84
00:05:49,770 --> 00:05:58,710
You will and then you'll that inner h t m l and we get the tags as well.

85
00:05:58,740 --> 00:06:03,150
So this is useful and we'll see a few situations where we're going to take advantage of it in some of

86
00:06:03,150 --> 00:06:04,770
the projects that we built.

87
00:06:04,770 --> 00:06:08,830
Text is also useful if we're just changing what's inside of a tag.

88
00:06:09,120 --> 00:06:15,240
So usually we don't actually set inner h him out to be something because it's the same problem that

89
00:06:15,250 --> 00:06:20,820
we would have with setting the text content it just overwrites whatever is currently inside of enraged

90
00:06:20,820 --> 00:06:21,300
him.

91
00:06:21,510 --> 00:06:31,820
So I'll show you that if I say UL dot inner HTML is now equal to plants are awesome.

92
00:06:32,870 --> 00:06:36,170
It just completely overrides it just like it did for text content.

93
00:06:36,210 --> 00:06:41,530
So if we want to add new elements or we want to interact with HTML there are other ways of doing that

94
00:06:41,540 --> 00:06:41,640
.

95
00:06:41,760 --> 00:06:45,440
But if all that we want to do for instance is change this title.

96
00:06:45,450 --> 00:06:47,750
Welcome to my Dom demo.

97
00:06:47,810 --> 00:06:49,340
You could select that first.

98
00:06:49,470 --> 00:06:50,410
It's an H-1.

99
00:06:50,730 --> 00:06:53,420
And you notice there is no H him out inside of it.

100
00:06:53,430 --> 00:06:54,850
It's just an H-1.

101
00:06:54,990 --> 00:06:59,000
So we could use either text content or energy M-L doesn't matter.

102
00:06:59,010 --> 00:07:03,190
But most people would use text content because that's all that is text content.

103
00:07:03,360 --> 00:07:05,530
And we could reset it to be something else.

104
00:07:05,580 --> 00:07:12,060
So that would just be a matter of document get let's do query selector again and I'm not going to save

105
00:07:12,060 --> 00:07:17,970
it to a variable just so that you get used to seeing this document selector H-1 and then we can chain

106
00:07:17,970 --> 00:07:29,760
on at the end dot text content equals and of this lesson.

107
00:07:29,760 --> 00:07:33,060
And you can see my changes reflected appear.

108
00:07:33,060 --> 00:07:39,180
So to recap text content enter HD M-L two different ways of grabbing the content of a given element

109
00:07:39,540 --> 00:07:42,750
we select it first then we run it enraged him.

110
00:07:42,810 --> 00:07:49,860
Or text content on that selected element text content will extract only the text and return a big string

111
00:07:49,860 --> 00:07:55,970
full of text and enraged him Mel will give us everything as a string including the edged him out elements

112
00:07:55,990 --> 00:07:56,590
.

113
00:07:57,240 --> 00:07:59,000
So here's a little bonus at the end.

114
00:07:59,190 --> 00:08:04,120
This is not something that I expect you to remember but there is another difference between enraged

115
00:08:04,120 --> 00:08:07,100
HTML and text content and I'll illustrate that here.

116
00:08:07,350 --> 00:08:14,700
Let's let's try something like this document dump body which gives us the whole body datt inner HMO

117
00:08:14,790 --> 00:08:15,180
.

118
00:08:15,420 --> 00:08:21,230
And you can see if we get all the HTML for the body everything we can do the same thing with entered

119
00:08:21,240 --> 00:08:30,090
to or with text content like this and we get all of the text on our page which is just these three lines

120
00:08:30,090 --> 00:08:31,050
.

121
00:08:31,230 --> 00:08:36,480
What I can do though is if I wanted to change I wanted to get rid of everything on this page which is

122
00:08:36,480 --> 00:08:42,840
not really a good idea but if I wanted to and I wanted to replace it with a new H-1 and that H-1 just

123
00:08:42,840 --> 00:08:50,550
said goodbye to do that I could do something like this document up bodycam text content equals and I

124
00:08:50,550 --> 00:08:57,700
could put in an H-1 tag in here and do something like this where I'm writing HMO.

125
00:08:57,930 --> 00:08:59,380
And if I hit enter.

126
00:08:59,940 --> 00:09:02,190
Oh no it actually doesn't work.

127
00:09:02,190 --> 00:09:07,070
So text content is not going to treat the string as HMO.

128
00:09:07,080 --> 00:09:14,540
It treats it purely as text so it doesn't render the H-1 tag versus if I did the same thing with enraged

129
00:09:14,550 --> 00:09:15,460
him.

130
00:09:17,520 --> 00:09:19,400
In her HMO.

131
00:09:20,340 --> 00:09:22,740
You can see it actually renders it as an H-1.

132
00:09:22,830 --> 00:09:28,440
So that's a nuance but important difference text content treats whatever it gives you and whatever you

133
00:09:28,440 --> 00:09:31,560
give it as just text and inner him out.

134
00:09:31,600 --> 00:09:36,210
I actually treat it like H M L and rendered on the page if you give it tags to render