All language subtitles for 072 Selecting and Manipulating Elements.en_US1

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian Download
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:01,360 --> 00:00:03,520 Now that we have a better understanding 2 00:00:03,520 --> 00:00:07,090 of what DOM and DOM manipulation are, 3 00:00:07,090 --> 00:00:11,423 lets now actually select and manipulate some more elements. 4 00:00:12,850 --> 00:00:14,370 So in the previous lecture, 5 00:00:14,370 --> 00:00:17,810 we already selected this message element here, 6 00:00:17,810 --> 00:00:20,780 by using querSelector, right? 7 00:00:20,780 --> 00:00:25,600 Then we also got the text content from the selected element. 8 00:00:25,600 --> 00:00:28,320 But besides getting the text content, 9 00:00:28,320 --> 00:00:32,190 we can also set the content of the element. 10 00:00:32,190 --> 00:00:33,870 So let do that. 11 00:00:33,870 --> 00:00:35,740 So instead of start guessing, 12 00:00:35,740 --> 00:00:38,690 lets say like correct number. 13 00:00:38,690 --> 00:00:41,303 So that's actually gonna be like the winning phrase. 14 00:00:42,200 --> 00:00:44,053 So again we select the element, 15 00:00:45,690 --> 00:00:46,540 so querySelector, 16 00:00:50,804 --> 00:00:52,750 and the same selector so again, 17 00:00:52,750 --> 00:00:54,953 the element with the class of message, 18 00:00:55,860 --> 00:00:59,630 and then again text content. 19 00:00:59,630 --> 00:01:03,210 So that's exactly the same as here, okay. 20 00:01:03,210 --> 00:01:05,920 Now here we actually then logged the result 21 00:01:05,920 --> 00:01:08,550 to the console so that we could see it. 22 00:01:08,550 --> 00:01:09,383 But here, 23 00:01:09,383 --> 00:01:12,930 we will actually set this content to something else. 24 00:01:12,930 --> 00:01:15,053 And we do that by writing equal, 25 00:01:15,950 --> 00:01:18,703 and then whatever we want the new content to be. 26 00:01:20,020 --> 00:01:23,083 So lets say, correct number, 27 00:01:24,060 --> 00:01:26,873 and I'm also gonna add here the party emoji, 28 00:01:28,360 --> 00:01:30,173 but again you don't need to do that. 29 00:01:31,200 --> 00:01:34,510 It's just to improve the design of the app a little bit 30 00:01:34,510 --> 00:01:35,700 basically. 31 00:01:35,700 --> 00:01:37,130 And so now if I save this, 32 00:01:37,130 --> 00:01:40,640 it should immediately change this text content here. 33 00:01:40,640 --> 00:01:42,293 So watch as I save now, 34 00:01:43,640 --> 00:01:45,430 and nothing happened, 35 00:01:45,430 --> 00:01:48,150 but that's because I'm here on the demo version. 36 00:01:48,150 --> 00:01:49,860 So I need the real one, 37 00:01:49,860 --> 00:01:53,030 and so here you see now correct number. 38 00:01:53,030 --> 00:01:55,220 Great, so that worked. 39 00:01:55,220 --> 00:01:57,700 And down here we still have to start guessing, 40 00:01:57,700 --> 00:02:00,210 because that's what the content of the element 41 00:02:00,210 --> 00:02:01,403 used to be before. 42 00:02:03,360 --> 00:02:05,980 So in this line we started by reading the content 43 00:02:05,980 --> 00:02:07,160 of the element, 44 00:02:07,160 --> 00:02:10,660 and so at the beginning it will still start guessing. 45 00:02:10,660 --> 00:02:14,500 Because that's what's written here in the HTML element, 46 00:02:14,500 --> 00:02:16,710 in the beginning, right? 47 00:02:16,710 --> 00:02:18,920 Then in the next line we changed it, 48 00:02:18,920 --> 00:02:21,690 and now if we would attempt to read it again, 49 00:02:21,690 --> 00:02:25,090 it should then be this new content that we set before. 50 00:02:25,090 --> 00:02:28,610 So lets copy and paste this line here really quick. 51 00:02:28,610 --> 00:02:29,600 Give it a save, 52 00:02:29,600 --> 00:02:32,090 and so now you see that of course 53 00:02:32,090 --> 00:02:35,860 after changing the text content when we then read it, 54 00:02:35,860 --> 00:02:37,910 it will be this new content, 55 00:02:37,910 --> 00:02:39,673 so exactly what we have now here. 56 00:02:41,820 --> 00:02:44,170 Okay, that makes sense? 57 00:02:44,170 --> 00:02:48,880 And so what we did here is really already DOM manipulation. 58 00:02:48,880 --> 00:02:52,590 Because in fact, here we manipulated the text content 59 00:02:52,590 --> 00:02:54,460 of one of the DOM notes. 60 00:02:54,460 --> 00:02:56,373 So essentially this element here. 61 00:02:58,160 --> 00:03:02,320 So lets now do the same with this secret number, 62 00:03:02,320 --> 00:03:03,890 and also the score. 63 00:03:03,890 --> 00:03:06,080 So both of these values, 64 00:03:06,080 --> 00:03:08,680 are basically stored in an element. 65 00:03:08,680 --> 00:03:12,130 So lets take a look at the HTML and so, 66 00:03:12,130 --> 00:03:14,230 this is what I was telling you in the beginning, 67 00:03:14,230 --> 00:03:16,280 that we would need this HTML 68 00:03:16,280 --> 00:03:19,320 to basically get the class names of all the elements 69 00:03:19,320 --> 00:03:21,260 that we are interested in. 70 00:03:21,260 --> 00:03:23,620 So this secret number here, 71 00:03:23,620 --> 00:03:25,220 so this here, 72 00:03:25,220 --> 00:03:29,930 is basically this div element here with the class number. 73 00:03:29,930 --> 00:03:32,030 And then the score as you see down here, 74 00:03:32,030 --> 00:03:33,023 from this 20, 75 00:03:33,940 --> 00:03:35,780 this is where it's 20 is, 76 00:03:35,780 --> 00:03:36,730 and in this case, 77 00:03:36,730 --> 00:03:40,730 it is this span element with the class score. 78 00:03:40,730 --> 00:03:41,840 So now lets go ahead 79 00:03:41,840 --> 00:03:46,253 and select the elements with the class number and score. 80 00:03:49,210 --> 00:03:52,800 Okay, so that's exactly what we did before, 81 00:03:52,800 --> 00:03:54,290 so querySelector, 82 00:03:55,770 --> 00:03:57,423 with the class number. 83 00:03:58,810 --> 00:04:01,370 And just to experiment some more with this, 84 00:04:01,370 --> 00:04:04,973 lets actually set it to something, lets say 13. 85 00:04:05,930 --> 00:04:10,930 And then document dot querySelector dot score. 86 00:04:14,630 --> 00:04:18,090 And by the way, there also other ways of selecting elements 87 00:04:18,090 --> 00:04:20,890 but we will talk about them in one of the next projects. 88 00:04:22,340 --> 00:04:26,680 And lets set this element also to another value. 89 00:04:26,680 --> 00:04:30,040 Now I'm actually, I'm forgetting the text content here, 90 00:04:30,040 --> 00:04:32,500 so we cannot set the entire element, 91 00:04:32,500 --> 00:04:36,173 because the element has way more than just the content. 92 00:04:37,460 --> 00:04:41,623 So I really have to say that the text content should be 13. 93 00:04:43,170 --> 00:04:44,920 So text content, 94 00:04:44,920 --> 00:04:46,810 and now as I re-log this, 95 00:04:46,810 --> 00:04:49,640 this should be 13 and this 20. 96 00:04:49,640 --> 00:04:52,850 Lets actually set this to another number, 97 00:04:52,850 --> 00:04:54,750 otherwise we wouldn't see it changing. 98 00:04:55,870 --> 00:04:59,850 And indeed we get 13 and ten now, 99 00:04:59,850 --> 00:05:02,150 great, that's amazing. 100 00:05:02,150 --> 00:05:05,040 So doing some great DOM manipulation here. 101 00:05:05,040 --> 00:05:07,170 And now lets move on and do the same, 102 00:05:07,170 --> 00:05:09,490 actually with this input field. 103 00:05:09,490 --> 00:05:11,610 So an input field as the name says, 104 00:05:11,610 --> 00:05:13,940 is where we can input some data. 105 00:05:13,940 --> 00:05:17,410 And so actually we can also get the data from here, 106 00:05:17,410 --> 00:05:19,523 and we can of course also set it. 107 00:05:21,380 --> 00:05:24,000 So lets just see how that works, 108 00:05:24,000 --> 00:05:26,180 and it's very similar. 109 00:05:26,180 --> 00:05:29,610 So as always, we start by selecting the element. 110 00:05:29,610 --> 00:05:31,440 And now we need to get the class name, 111 00:05:31,440 --> 00:05:32,943 of this element. 112 00:05:35,100 --> 00:05:38,360 And so, that is 113 00:05:38,360 --> 00:05:39,690 it's right here. 114 00:05:39,690 --> 00:05:42,070 So it has the class of guess, 115 00:05:42,070 --> 00:05:44,533 and as I said, it an input element. 116 00:05:46,450 --> 00:05:48,490 So, again, 117 00:05:48,490 --> 00:05:51,010 dot which is the class selector 118 00:05:51,010 --> 00:05:53,670 and then the name of the class which is guess. 119 00:05:53,670 --> 00:05:55,430 And here we got this error, 120 00:05:55,430 --> 00:05:57,030 because the query selector method 121 00:05:57,030 --> 00:05:59,300 expects at least one argument. 122 00:05:59,300 --> 00:06:01,668 And as we went to the HTML file, 123 00:06:01,668 --> 00:06:04,700 and then saved this JavaScript file, 124 00:06:04,700 --> 00:06:06,570 but we didn't have any string here, 125 00:06:06,570 --> 00:06:08,550 so any parameter yet. 126 00:06:08,550 --> 00:06:10,540 And that's why we got that error. 127 00:06:10,540 --> 00:06:13,010 And now if we want to get the value, 128 00:06:13,010 --> 00:06:15,130 which right now is actually empty. 129 00:06:15,130 --> 00:06:16,850 But if we want to get that, 130 00:06:16,850 --> 00:06:20,023 now, this time, we read the value property. 131 00:06:20,880 --> 00:06:22,500 And so lets, 132 00:06:22,500 --> 00:06:24,890 log that to the console actually. 133 00:06:24,890 --> 00:06:27,003 So again using the CL snippet. 134 00:06:29,320 --> 00:06:30,783 And if we re-logged this now, 135 00:06:31,670 --> 00:06:35,590 yeah, we just get this like empty value here. 136 00:06:35,590 --> 00:06:39,700 Because there is really nothing in there, okay. 137 00:06:39,700 --> 00:06:42,900 But the big difference is that with an input field, 138 00:06:42,900 --> 00:06:44,600 to get the actual value, 139 00:06:44,600 --> 00:06:46,853 we use the value property. 140 00:06:48,240 --> 00:06:53,240 And we can of course also use it to set a value, 141 00:06:53,800 --> 00:06:55,803 so to manipulate this element. 142 00:06:59,060 --> 00:07:04,060 So dot value equals 23, give it a save. 143 00:07:04,900 --> 00:07:06,810 And now we see 23 here. 144 00:07:06,810 --> 00:07:09,840 So as if we had written it ourselves. 145 00:07:09,840 --> 00:07:13,620 So we can delete it here just like any input field, 146 00:07:13,620 --> 00:07:15,600 but instead of us written the number, 147 00:07:15,600 --> 00:07:19,423 it was JavaScript who wrote the 23 here for us. 148 00:07:20,530 --> 00:07:23,070 Simply by executing this code here. 149 00:07:23,070 --> 00:07:26,063 And to make this line of work actually, 150 00:07:30,110 --> 00:07:33,190 and to this line of code here actually work, 151 00:07:33,190 --> 00:07:37,250 we can move it below the one where we are setting the value. 152 00:07:37,250 --> 00:07:41,710 So in this code lets use alt and the down arrow 153 00:07:41,710 --> 00:07:43,480 to move this line down, 154 00:07:43,480 --> 00:07:47,010 and then we should expect to see 23 here in the console 155 00:07:47,010 --> 00:07:48,743 instead of this empty line. 156 00:07:49,770 --> 00:07:50,760 And indeed. 157 00:07:50,760 --> 00:07:54,630 Now we first write 23 here to this input field, 158 00:07:54,630 --> 00:07:57,180 and then afterwards we read it, 159 00:07:57,180 --> 00:08:01,410 and then the value is indeed 23, great. 160 00:08:01,410 --> 00:08:05,860 But now what if we actually wanted to get this number here, 161 00:08:05,860 --> 00:08:07,770 for example to log it to the console. 162 00:08:07,770 --> 00:08:11,070 Whenever we clicked on this button, 163 00:08:11,070 --> 00:08:14,240 well, that's taking it to a whole new level, 164 00:08:14,240 --> 00:08:16,120 and so handling the click of a button 165 00:08:16,120 --> 00:08:19,060 is what we're gonna learn in the next video. 166 00:08:19,060 --> 00:08:20,223 See you there soon. 11803

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.