1 00:00:02,360 --> 00:00:08,930 When speaking about manipulating elements, it's also important to understand the difference between attributes 2 00:00:09,020 --> 00:00:15,440 and properties because it's easy to confuse these two things or to not even be aware of these two different 3 00:00:15,530 --> 00:00:22,250 things because often, indeed attributes are mapped to properties and some live synchronization is set 4 00:00:22,250 --> 00:00:26,710 up and I'll show what l mean in a second but that's not always the case, 5 00:00:26,720 --> 00:00:32,130 for example here we have an input element with an ID, with a CSS class and with a value 6 00:00:32,420 --> 00:00:36,410 and it's interesting because there we have three different kinds of attributes which behave in different 7 00:00:36,410 --> 00:00:42,890 ways when it comes to the DOM object that is created and how the properties of that object are initialized. 8 00:00:43,820 --> 00:00:46,880 So these are all attributes here placed in the HTML codes, 9 00:00:46,910 --> 00:00:53,300 so what you write in the HTML code is named an attribute, what you add on the HTML tag, that's an 10 00:00:53,420 --> 00:01:01,130 attribute of that tag. What the browser does with these attributes is it creates such a DOM object based 11 00:01:01,130 --> 00:01:02,960 on the tag name, input 12 00:01:02,960 --> 00:01:09,890 in that case and preconfigures it and preconfigures some of its properties based on these attributes 13 00:01:10,220 --> 00:01:15,470 because the important thing is that the attribute is the thing in your HTML code, in your HTML text in 14 00:01:15,470 --> 00:01:22,310 the end. The property is a value stored in the object that's created based on your HTML code 15 00:01:22,310 --> 00:01:28,100 so to say, right? Objects in Javascript have properties, no matter if there are some DOM objects or 16 00:01:28,100 --> 00:01:28,830 not. 17 00:01:28,880 --> 00:01:35,150 So of course for DOM objects, we also have properties and these simply reflect the configuration and 18 00:01:35,150 --> 00:01:40,940 setup and positioning and so on of that rendered DOM node, of the DOM object 19 00:01:40,940 --> 00:01:46,760 and the idea of attributes is that you, if you're writing HTML code, can provide a certain default 20 00:01:46,760 --> 00:01:50,690 configuration to this to be created DOM object. 21 00:01:50,690 --> 00:01:54,770 So that's what you do with attributes and how they are translated to properties 22 00:01:54,770 --> 00:01:59,420 and here for example, we see that if we get access to this input element and store it in a constant, let's 23 00:01:59,420 --> 00:02:05,780 say we name it input, then we can read the ID from it but also the class name and the value and the 24 00:02:05,780 --> 00:02:10,130 properties as I mentioned are automatically added on the created DOM objects. 25 00:02:10,130 --> 00:02:16,190 Now here, it's important to understand that not every attribute has a one-to-onemapping in properties 26 00:02:16,190 --> 00:02:16,500 though, 27 00:02:16,910 --> 00:02:22,020 input ID has it, there we have an ID attribute and an ID property 28 00:02:22,280 --> 00:02:25,940 and if we change the value of the attribute, the property updates, 29 00:02:25,940 --> 00:02:30,000 if we change the value of the property, the attribute will update, 30 00:02:30,020 --> 00:02:33,350 so we have some live synchronization going on here. 31 00:02:33,470 --> 00:02:35,570 Input class name is different, 32 00:02:35,570 --> 00:02:38,280 there we also have live synchronization, 33 00:02:38,300 --> 00:02:41,230 so if we change the property, the attribute will change, 34 00:02:41,240 --> 00:02:46,220 if we change the attribute, the property will change but the names are not equal so we don't really have 35 00:02:46,220 --> 00:02:49,130 a one-to-one mapping. Class on the input, 36 00:02:49,130 --> 00:02:55,370 so on the HTML tag is translated to a class name property here on the DOM object and 37 00:02:55,440 --> 00:03:01,700 of course the browser does this automatically, it's just important to know that not always the attribute name 38 00:03:01,700 --> 00:03:07,010 is equal to the property name and for value, we have yet another different behavior. 39 00:03:07,100 --> 00:03:09,030 There we have a one-to-one mapping, 40 00:03:09,080 --> 00:03:15,350 it's called value as an attribute and value as a property but we have no real life synchronisation going 41 00:03:15,350 --> 00:03:15,660 on, 42 00:03:15,740 --> 00:03:21,290 only one way because what you have here is actually that if you change the input value, this will not 43 00:03:21,290 --> 00:03:28,100 be reflected back to the attribute, only if you change the attribute, the value properties value will change 44 00:03:28,100 --> 00:03:33,740 again and that makes sense because you have to keep in mind that for example this input element is there 45 00:03:33,740 --> 00:03:35,360 to hold some user input 46 00:03:35,630 --> 00:03:40,160 and if you would always reflect this back to the attribute, then that would mean that if you ever want 47 00:03:40,160 --> 00:03:46,460 to reset the input to its initial value which the developer writing the HTML code at some point of time 48 00:03:46,460 --> 00:03:51,710 stored in that value attribute, that this would not be possible if we always reflected the latest user 49 00:03:51,710 --> 00:03:56,810 input in the value attribute because then we could never reset it because we lost the original value 50 00:03:56,810 --> 00:03:58,320 we wanted to assign there. 51 00:03:58,400 --> 00:04:04,880 So that's why when the user types there, the users input is stored on the value property but not reflected 52 00:04:04,880 --> 00:04:07,060 back into the HTML code. 53 00:04:07,220 --> 00:04:08,870 So let's see that in practice here 54 00:04:08,870 --> 00:04:17,480 and for that, I'll add an input element here actually with a value of default text here and after saving 55 00:04:17,480 --> 00:04:18,250 this, we can reload, 56 00:04:18,260 --> 00:04:20,820 of course the color here is gone by the way. 57 00:04:20,870 --> 00:04:23,520 So here we have that input element with the default text 58 00:04:23,690 --> 00:04:31,160 and again of course, we can store a reference to it by using for example query selector and here then 59 00:04:31,160 --> 00:04:39,860 just the inputs tag selector like this and we can of course console.dir input here to get access to 60 00:04:39,860 --> 00:04:40,360 it. 61 00:04:40,520 --> 00:04:47,090 We find a lot of properties which we already know but if we scroll down to v, we will also find one which 62 00:04:47,090 --> 00:04:52,920 is not available on all elements and that's the value property which in this case holds default text. 63 00:04:52,940 --> 00:05:00,900 Now if I go to the input here and in this elements tab here, we change default text by adding an exclamation 64 00:05:00,900 --> 00:05:02,100 mark for example, if 65 00:05:02,100 --> 00:05:13,310 we go back to the console, you'll see that if I reselect this, so const input2 document query 66 00:05:13,310 --> 00:05:23,450 selector input and I now console.dir input2, you will see that if we scroll down to the value at 67 00:05:23,450 --> 00:05:29,210 the bottom here, we have this exclamation mark in there as well. 68 00:05:29,210 --> 00:05:33,230 So if I change the attribute that is reflected in the DOM object, 69 00:05:33,230 --> 00:05:34,410 so that is reflected. 70 00:05:34,430 --> 00:05:43,490 Now if I go ahead and we reset input to .value equal to some other input the user might have entered 71 00:05:44,720 --> 00:05:46,430 and I hit enter, 72 00:05:46,430 --> 00:05:48,580 you see this this reflected in the user interface, 73 00:05:48,590 --> 00:05:50,120 right? This is set as a value here, 74 00:05:50,120 --> 00:05:51,000 so that's great 75 00:05:51,170 --> 00:05:57,770 but if we now inspect this again, we see there the value is still the default text we had in the attribute 76 00:05:57,770 --> 00:05:58,610 before, 77 00:05:58,610 --> 00:06:01,760 so there this is not reflected back. 78 00:06:01,880 --> 00:06:06,920 Now as I explained before, for CSS classes and ID for example, that's different. 79 00:06:06,920 --> 00:06:15,260 If I select my h1 tag here with get element by ID main title and I then set the ID equal to new 80 00:06:15,260 --> 00:06:22,910 ID for example, I don't lose my reference here by the way because here we set up this connection and 81 00:06:22,920 --> 00:06:25,320 thereafter, this is mapped to the address in memory, 82 00:06:25,340 --> 00:06:26,900 so the address in memory is stored here, 83 00:06:26,900 --> 00:06:32,000 so if I change that ID, this doesn't clear that connection, just the same command would of course 84 00:06:32,000 --> 00:06:37,190 not work again because in elements we now see this has a new ID and this is now also reflected here 85 00:06:37,340 --> 00:06:38,510 in the HTML code, 86 00:06:38,510 --> 00:06:45,570 so there it is reflected back into the attribute. The same would be true for class name by the 87 00:06:45,570 --> 00:06:53,470 way. Now important, if you do want to change an attribute, then you also have a method for that, you have 88 00:06:53,470 --> 00:06:55,230 a set attribute method. 89 00:06:55,240 --> 00:07:00,600 So on the input for example, we could call set attribute and this takes two arguments, two parameters 90 00:07:00,600 --> 00:07:03,340 and the first one is the name of the attribute, 91 00:07:03,340 --> 00:07:06,080 so here we could set value, should be a string 92 00:07:06,220 --> 00:07:09,610 and the second is the value you want to assign to that attribute, 93 00:07:09,670 --> 00:07:15,670 so here some other default text and if you do that and you hit enter, 94 00:07:15,670 --> 00:07:23,140 this does not update UI because actually, changing this value here will not overwrite any existing changes 95 00:07:23,140 --> 00:07:29,530 that might have been made so that you don't accidentally get rid of the user input but you do clear 96 00:07:29,680 --> 00:07:33,060 that value here, you do indeed change that attribute here 97 00:07:33,160 --> 00:07:35,370 but since we have no live sync, 98 00:07:35,380 --> 00:07:44,110 indeed if I go to the value that's stored in there, I still have the other value which was set and not 99 00:07:44,200 --> 00:07:52,970 the new attribute value here. So value indeed of course is one of the more complex properties you can 100 00:07:52,970 --> 00:07:58,370 work with due to the way how it updates under which circumstances but generally of course, it's pretty 101 00:07:58,370 --> 00:08:03,740 straightforward regarding how this value attribute and property behaves, it behaves such that you don't 102 00:08:03,740 --> 00:08:09,310 accidentally clear user input and that your changes you made to value aren't easily dismissed but 103 00:08:09,310 --> 00:08:14,870 that you can still have that attribute around and either assign a new value or of course if you would 104 00:08:14,870 --> 00:08:21,410 want to reset the input, you could always just set value equal to input.getAttribute to get the 105 00:08:21,410 --> 00:08:26,360 value stored in the attribute, reach out to the value attribute and since this doesn't reflect the current 106 00:08:26,360 --> 00:08:32,900 input but instead whatever you set here or originally in the HTML code, you can run this code here 107 00:08:33,500 --> 00:08:36,820 to reset the content in there to that starting code. 108 00:08:36,850 --> 00:08:40,110 That's what I meant with that resetting and why this is kept around. 109 00:08:40,160 --> 00:08:44,780 So this is how you can work with attributes and properties with set attribute and get attribute 110 00:08:45,080 --> 00:08:48,300 and dot notation to interact with properties like this 111 00:08:48,500 --> 00:08:54,920 and this is therefore how we can evaluate values stored in DOM objects and also change them if we 112 00:08:54,920 --> 00:08:55,400 need to.