1 00:00:06,640 --> 00:00:10,840 This section is all about dome. 2 00:00:10,930 --> 00:00:15,730 That is document object model. 3 00:00:16,149 --> 00:00:23,560 Well, before we get into the technical definition of dome, let me give you some concept. 4 00:00:23,560 --> 00:00:28,300 In that way, it will help you to better understand what is the dome. 5 00:00:28,330 --> 00:00:29,080 Great. 6 00:00:29,290 --> 00:00:32,560 You could see that from the beginning of this course. 7 00:00:32,560 --> 00:00:40,060 To this point, all what we are doing is to display text into the console of our browser. 8 00:00:40,330 --> 00:00:47,380 But in real world applications we are not going to use the console to build applications for users to 9 00:00:47,380 --> 00:00:53,200 see, but instead the console help us to debug and test our code. 10 00:00:53,320 --> 00:01:00,490 So we need to find a way to allow user to interact with our application that we are about to build. 11 00:01:00,730 --> 00:01:03,820 That is why Dome comes into play. 12 00:01:04,120 --> 00:01:07,640 Again, before I give you the definition of Dome. 13 00:01:07,660 --> 00:01:10,180 Let's see some examples here. 14 00:01:10,660 --> 00:01:16,450 For this particular application that I built for my company, which is a voting application. 15 00:01:16,990 --> 00:01:23,460 It could say that this application was built using a HTML, CSS and JavaScript. 16 00:01:23,470 --> 00:01:24,910 That is a front end. 17 00:01:25,150 --> 00:01:25,600 Great. 18 00:01:25,600 --> 00:01:28,660 But behind the scene we are using React. 19 00:01:29,080 --> 00:01:37,330 So let's assume that this application was built using HTML, CSS and JavaScript and the contents you 20 00:01:37,330 --> 00:01:38,620 see on the screen. 21 00:01:38,620 --> 00:01:43,910 You can say that, well, we use HTML to display this content. 22 00:01:43,930 --> 00:01:44,950 That is fine. 23 00:01:44,950 --> 00:01:46,120 That is perfect. 24 00:01:46,120 --> 00:01:50,320 But when it comes to the interactivity of the application. 25 00:01:50,440 --> 00:01:57,760 So if you scroll down and when I click on this award, you can see that it's going to fetch some awards 26 00:01:57,760 --> 00:01:59,080 that I can apply. 27 00:01:59,380 --> 00:02:05,740 So if I click on Apply, you can see that now I can interact with this particular application. 28 00:02:05,890 --> 00:02:09,120 Well, it's because of the dome again. 29 00:02:09,130 --> 00:02:13,120 And if I go to my dashboard, I can do any action. 30 00:02:13,120 --> 00:02:19,440 For example, delete a user or check my transactions, and even I can create a new award. 31 00:02:19,450 --> 00:02:26,290 I can find all my other categories, I can show result, I can do whatever I want, I can interact with 32 00:02:26,290 --> 00:02:27,280 the application. 33 00:02:27,700 --> 00:02:32,200 So with all the HTML and cases, we cannot do this. 34 00:02:32,200 --> 00:02:39,370 But with the help of JavaScript and the DOM, now I can interact with the application, I can edit a 35 00:02:39,370 --> 00:02:41,690 user, I can do whatever I want. 36 00:02:41,710 --> 00:02:44,000 So it's all because of that. 37 00:02:44,020 --> 00:02:44,800 Dom. 38 00:02:45,040 --> 00:02:52,150 So the DOM simply means that it allows us to use JavaScript to interact with our application. 39 00:02:52,270 --> 00:02:55,810 So let's get into that and see what is all about here. 40 00:02:59,550 --> 00:03:02,930 So what is the dome technically? 41 00:03:02,970 --> 00:03:10,980 Dome is a tree structure that represents the structure of the HTML document. 42 00:03:11,310 --> 00:03:19,470 Well, so the estimate that we write, as soon as we render into the browser, we have a structure like 43 00:03:19,500 --> 00:03:22,680 this and this is what we call the dome. 44 00:03:24,160 --> 00:03:29,470 Well, let's use this scenario to explore more when it comes to Dom. 45 00:03:29,770 --> 00:03:39,310 Remember that every application comprises of the HTML, CSS and JavaScript and all these are being rendered 46 00:03:39,310 --> 00:03:40,990 inside our browser. 47 00:03:41,320 --> 00:03:47,860 So let's take it that we have built an application and this application, it comprises of HTML as we 48 00:03:47,860 --> 00:03:56,170 know for structure our application and we have CSS to add some styling to application and we have JavaScript 49 00:03:56,170 --> 00:03:59,320 to add interactivity to our application. 50 00:03:59,740 --> 00:04:06,210 But JavaScript alone could not perform a work to add interactivity to our application. 51 00:04:06,220 --> 00:04:08,140 So let me show you what I mean here. 52 00:04:08,500 --> 00:04:14,380 Let's take it that we want to watch or make a search or query to a certain website. 53 00:04:14,890 --> 00:04:22,930 So as soon as I enter what I want, I'm going to hit enter well before a request is being sent to the 54 00:04:22,930 --> 00:04:23,650 browser. 55 00:04:23,740 --> 00:04:31,600 There is an intermediate here, meaning that with this intermediate it's going to help us to use JavaScript 56 00:04:31,600 --> 00:04:34,210 to interact with our application. 57 00:04:34,690 --> 00:04:38,440 So this intermediate here is what we call the DOM. 58 00:04:38,830 --> 00:04:45,820 So in short, the DOM helps us to use JavaScript to interact with our application. 59 00:04:45,820 --> 00:04:49,030 So back to this application, you can see that again. 60 00:04:49,030 --> 00:04:53,140 I can edit this contestant is because of the DOM. 61 00:04:53,380 --> 00:04:59,260 It's allowing me to add some interactivity to my application using JavaScript. 62 00:04:59,650 --> 00:05:07,360 So with the help of the DOM, now I can use JavaScript to make any request or to interact with my application. 63 00:05:07,360 --> 00:05:11,590 So as soon as I hit enter you can see that with the help of the DOM. 64 00:05:11,590 --> 00:05:15,400 Now I see what I was requesting for. 65 00:05:16,180 --> 00:05:20,200 All right, so let's continue to explore more about the DOM. 66 00:05:20,890 --> 00:05:29,050 Let's take it that we have built an application that comprises of a HTML, CSS and JavaScript. 67 00:05:29,050 --> 00:05:37,630 Well, so before I can interact with my application, that is with the HTML, unless I need JavaScript 68 00:05:37,630 --> 00:05:38,470 in the mix. 69 00:05:38,740 --> 00:05:45,070 So in JavaScript I can add dynamic content into the page without doing it manually. 70 00:05:45,310 --> 00:05:52,920 Well, so the process of adding content to the web page using JavaScript, it needs an intermediate 71 00:05:52,920 --> 00:05:54,610 to call Dom. 72 00:05:55,270 --> 00:06:01,270 So Dom is the interface between the browser and the HTML document. 73 00:06:01,720 --> 00:06:08,110 So the DOM help us to use JavaScript to interact with the HTML. 74 00:06:08,620 --> 00:06:17,710 So Dom is not JavaScript and Dom is not a programming language but instead is a built in API inside 75 00:06:17,710 --> 00:06:18,760 our browsers. 76 00:06:19,210 --> 00:06:23,020 So this DOM is also a complex topic. 77 00:06:23,020 --> 00:06:25,090 We need to know what it means. 78 00:06:25,090 --> 00:06:31,210 Some methods we can use in the DOM to manipulate our content using JavaScript. 79 00:06:31,510 --> 00:06:39,220 So in short, DOM is a way of allowing JavaScript to interact with the HTML dynamically. 80 00:06:39,610 --> 00:06:46,090 So it's a kind of interface or API that help JavaScript to interact with our application. 81 00:06:46,270 --> 00:06:48,610 Now you know what Dom is all about. 82 00:06:48,610 --> 00:06:52,480 Now let's see some use cases or uses of the DOM. 83 00:06:52,630 --> 00:07:00,130 Well again, don't make it possible to use JavaScript to interact with the HTML document. 84 00:07:00,460 --> 00:07:07,930 So with the DOM we can create a HTML website without writing a HTML code manually. 85 00:07:08,500 --> 00:07:11,710 We can use JavaScript to create h one. 86 00:07:11,710 --> 00:07:20,020 We can use JavaScript to add pizza and all of these things are possible because of the DOM. 87 00:07:20,470 --> 00:07:23,890 So let's see some use cases when it comes to the DOM. 88 00:07:23,890 --> 00:07:31,690 Well, with Dom, we can use it to create new elements, for example, P tag or image or whatever. 89 00:07:31,690 --> 00:07:34,360 We can use the DOM to do that. 90 00:07:34,840 --> 00:07:40,120 And again, we can use the DOM to move elements from the page. 91 00:07:40,210 --> 00:07:43,210 And this what normally we see on some application. 92 00:07:43,210 --> 00:07:50,860 For example, if want to delete a content back to this application here, if I go to contestant now 93 00:07:50,860 --> 00:07:57,070 when I click on view details about this contestant, we see that now I can delete this particular contestant. 94 00:07:57,340 --> 00:08:01,060 So that is the purpose of the DOM create. 95 00:08:01,060 --> 00:08:08,890 So now next is I can also or we can also use the DOM to add styling to a HTML. 96 00:08:09,040 --> 00:08:16,510 So instead of adding CSS manually, we can use the DOM with the help of JavaScript to add styles to 97 00:08:16,510 --> 00:08:17,500 our element. 98 00:08:17,500 --> 00:08:23,680 So as we proceed, we are going to use the DOM to add or to create new element to. 99 00:08:24,180 --> 00:08:27,330 Element and add styles to an element. 100 00:08:27,480 --> 00:08:33,059 And above all, we can use the DOM to get value from input field. 101 00:08:33,299 --> 00:08:41,130 So back to this application, let's say that I want to apply for a certain event or award to contest. 102 00:08:41,370 --> 00:08:47,130 Now with the dome, we can get a value from from impute and win the value. 103 00:08:47,130 --> 00:08:49,440 We can do whatever we want with it. 104 00:08:49,440 --> 00:08:53,880 So let's say that I want to apply for this category, so I'll click here. 105 00:08:53,910 --> 00:09:00,480 Now when I enter first name here and with the help of the dome, are we able to retrieve the value here 106 00:09:00,480 --> 00:09:05,160 and send it to, let's say, my server for processing at the back end? 107 00:09:05,160 --> 00:09:08,190 That's one beauty when it comes to the dome. 108 00:09:08,550 --> 00:09:14,220 And apart from that, we can use the dome to set attribute to an element. 109 00:09:14,310 --> 00:09:22,020 Well, and also the most cool part is we can use the dome to add event listener to the element. 110 00:09:22,020 --> 00:09:29,580 So event simply means that any action that we can take it on a web page, we have a couple of them talking 111 00:09:29,580 --> 00:09:30,990 about mouse event. 112 00:09:30,990 --> 00:09:39,150 That example is clicking and drag in all these are event and we have keyboard event key app key press. 113 00:09:39,150 --> 00:09:41,610 All of these are event listeners. 114 00:09:41,610 --> 00:09:45,000 When it comes to form, we have submit and reset. 115 00:09:45,000 --> 00:09:47,250 All these are event listeners. 116 00:09:47,250 --> 00:09:55,920 And again, we go through all these examples and see how we can use the dome to do all these stuffs. 117 00:09:55,920 --> 00:10:03,890 Well, now that we have the clear picture of the Dome, the next video, let's talk about Node. 118 00:10:03,900 --> 00:10:10,830 Now, after that, we will make our hands dirty to start to write code that interact with our browser.