1 00:00:06,540 --> 00:00:09,150 - So far, we've seen two different ways 2 00:00:09,150 --> 00:00:12,210 in which we can load HTML into our test environment. 3 00:00:12,210 --> 00:00:15,930 The first approach we looked at was like, I've shown here. 4 00:00:15,930 --> 00:00:18,030 We used the document object that was created 5 00:00:18,030 --> 00:00:19,830 for us by JS DOM. 6 00:00:19,830 --> 00:00:23,940 We called the standard DOM API method to create an element. 7 00:00:23,940 --> 00:00:27,600 And then we assigned some content to the element and an ID. 8 00:00:27,600 --> 00:00:28,740 And then we added the element 9 00:00:28,740 --> 00:00:30,930 into the document's body structure. 10 00:00:30,930 --> 00:00:33,120 So that's one way of adding content 11 00:00:33,120 --> 00:00:36,870 so that we can then test against it using JavaScript. 12 00:00:36,870 --> 00:00:38,460 If you have a lot of content 13 00:00:38,460 --> 00:00:42,090 then it's quite painful creating each element one by one. 14 00:00:42,090 --> 00:00:43,590 So the other approach that we've seen 15 00:00:43,590 --> 00:00:46,740 is where you basically have a string of literal HTML 16 00:00:46,740 --> 00:00:49,140 and then you assign it directly into your body. 17 00:00:49,140 --> 00:00:53,520 So here in the document object provided by JS DOM. 18 00:00:53,520 --> 00:00:56,430 The document object has a standard body property 19 00:00:56,430 --> 00:00:58,530 obviously represents the body element 20 00:00:58,530 --> 00:01:02,850 and I've assigned the inner HTML to be a chunk of content. 21 00:01:02,850 --> 00:01:05,910 So as when we do that the document object model 22 00:01:05,910 --> 00:01:09,840 will automatically it'll automatically create objects 23 00:01:09,840 --> 00:01:12,780 in the DOM tree to represent the document structure. 24 00:01:12,780 --> 00:01:14,310 We've seen that. 25 00:01:14,310 --> 00:01:16,350 Okay, so a third approach is 26 00:01:16,350 --> 00:01:19,650 rather than writing code to create the HTML, 27 00:01:19,650 --> 00:01:20,580 a third approach would be 28 00:01:20,580 --> 00:01:24,120 to actually load in an existing HTML document directly. 29 00:01:24,120 --> 00:01:26,220 And that's what we're going to see in this section. 30 00:01:26,220 --> 00:01:27,900 So if you wanna take a look at the folder 31 00:01:27,900 --> 00:01:30,483 at JS DOM Loading HTML. 32 00:01:30,483 --> 00:01:33,150 Here's what it looks like. 33 00:01:33,150 --> 00:01:35,490 And if you open that folder in a browser, 34 00:01:35,490 --> 00:01:38,409 so if you open that folder in a code editor, 35 00:01:38,409 --> 00:01:39,900 it looks like this. 36 00:01:39,900 --> 00:01:41,280 So a couple of things to note, 37 00:01:41,280 --> 00:01:44,520 first of all, remember to configure 38 00:01:44,520 --> 00:01:46,710 the test environment to be JS DOM. 39 00:01:46,710 --> 00:01:48,720 So that we have a document object. 40 00:01:48,720 --> 00:01:52,050 Here's the HTML document that I'm gonna load in. 41 00:01:52,050 --> 00:01:54,720 Okay, and we'll see how to do that. 42 00:01:54,720 --> 00:01:57,240 And this is the code that's going to load 43 00:01:57,240 --> 00:01:58,680 the existing document. 44 00:01:58,680 --> 00:02:01,440 So let's take a closer look at how to do that. 45 00:02:01,440 --> 00:02:04,200 So first of all, and here's the HTML document. 46 00:02:04,200 --> 00:02:06,240 Very simple, it could be complex, 47 00:02:06,240 --> 00:02:08,460 but this is a simple HTML document. 48 00:02:08,460 --> 00:02:10,120 The body content has a heading 49 00:02:11,560 --> 00:02:14,550 and what the first paragraph has an ID 50 00:02:14,550 --> 00:02:17,640 with some nested child content. 51 00:02:17,640 --> 00:02:20,520 This paragraph says "hi" in bold. 52 00:02:20,520 --> 00:02:23,610 The second paragraph has a different ID obviously, 53 00:02:23,610 --> 00:02:25,290 with some different content. 54 00:02:25,290 --> 00:02:27,870 This paragraph says, "bye" in italics. 55 00:02:27,870 --> 00:02:29,760 That's the HTML document 56 00:02:29,760 --> 00:02:33,330 which I would like to load into my test harness 57 00:02:33,330 --> 00:02:38,330 so I can write code that accesses this HTML page. 58 00:02:38,340 --> 00:02:42,810 So this is how you load HTML content 59 00:02:42,810 --> 00:02:47,130 from an HTML file into your JS DOM document. 60 00:02:47,130 --> 00:02:51,990 First of all, I'm importing the standard FS module. 61 00:02:51,990 --> 00:02:55,320 That's the standard libi for doing file API 62 00:02:55,320 --> 00:02:58,020 and it has a read file sync method. 63 00:02:58,020 --> 00:02:59,970 It reads a file synchronously. 64 00:02:59,970 --> 00:03:01,530 You give it the file name, 65 00:03:01,530 --> 00:03:04,080 index at HTML from the current folder, 66 00:03:04,080 --> 00:03:06,210 and it basically gives you back 67 00:03:06,210 --> 00:03:09,960 it gives you back the HTML document effect 68 00:03:09,960 --> 00:03:11,730 read a file like this. 69 00:03:11,730 --> 00:03:15,720 That is just read in just as a, as a text file. 70 00:03:15,720 --> 00:03:17,670 You can say two string 71 00:03:17,670 --> 00:03:21,600 and that will give you the content of that file as a string 72 00:03:21,600 --> 00:03:25,470 and then assign that HTML to the N HTML property. 73 00:03:25,470 --> 00:03:27,600 So this is similar to what I had before 74 00:03:27,600 --> 00:03:30,450 in my JS DOM document. 75 00:03:30,450 --> 00:03:32,190 I'm getting the document element. 76 00:03:32,190 --> 00:03:34,990 So remember, that's basically the HTML element 77 00:03:36,452 --> 00:03:39,840 and then I'm assigning it's inner HTML to be 78 00:03:39,840 --> 00:03:42,450 what I've just read in from the file. 79 00:03:42,450 --> 00:03:43,860 The difference from before is 80 00:03:43,860 --> 00:03:46,110 that I've given it the HTML manually 81 00:03:46,110 --> 00:03:48,600 and here I've given it the content of the file 82 00:03:48,600 --> 00:03:51,660 that I've just read in, read the file into this string 83 00:03:51,660 --> 00:03:55,323 assign that string into my document object. 84 00:03:57,000 --> 00:03:59,310 Right, so basically that picture 85 00:03:59,310 --> 00:04:03,750 on the right hand side shows the structure of my document. 86 00:04:03,750 --> 00:04:06,000 We have the document object at the top. 87 00:04:06,000 --> 00:04:10,500 It has an HTML child element, which has a head and a body. 88 00:04:10,500 --> 00:04:13,170 The head had a child, which was the title. 89 00:04:13,170 --> 00:04:18,000 So just a, a quick reminder of what that looks like. 90 00:04:18,000 --> 00:04:19,290 Here's my head. 91 00:04:19,290 --> 00:04:22,667 It has a, a title element as a child 92 00:04:22,667 --> 00:04:25,110 and then there's a body element. 93 00:04:25,110 --> 00:04:27,690 The body element has a head in each one 94 00:04:27,690 --> 00:04:30,540 and two paragraphs and each of those paragraphs, 95 00:04:30,540 --> 00:04:33,510 well the first paragraph has a bold child element 96 00:04:33,510 --> 00:04:36,780 and the second paragraph has an italic child element. 97 00:04:36,780 --> 00:04:41,220 Okay? So that's the body, the body content. 98 00:04:41,220 --> 00:04:43,500 It has a child for the head in one 99 00:04:43,500 --> 00:04:45,000 which I can get if I need to, 100 00:04:45,000 --> 00:04:48,360 a child for the first paragraph with an ID p1 101 00:04:48,360 --> 00:04:50,980 and a child for the second paragraph ID p2 102 00:04:51,840 --> 00:04:54,600 and inside there, there's another child element. 103 00:04:54,600 --> 00:04:57,840 If you are interested, bold and italic. 104 00:04:57,840 --> 00:05:00,210 So that entire content is going, 105 00:05:00,210 --> 00:05:05,210 has been read in into my document object. 106 00:05:05,310 --> 00:05:08,460 Okay, so let's run some tests. 107 00:05:08,460 --> 00:05:11,670 I can verify that the document node exists 108 00:05:11,670 --> 00:05:15,330 while it does exist because we are running in JS DOM mode. 109 00:05:15,330 --> 00:05:19,500 And I can also check a bit further from my document node. 110 00:05:19,500 --> 00:05:20,880 I can get the document element. 111 00:05:20,880 --> 00:05:22,440 Remember there is a difference. 112 00:05:22,440 --> 00:05:25,109 The document node is at the top. 113 00:05:25,109 --> 00:05:27,810 The document element is the HTML element. 114 00:05:27,810 --> 00:05:30,090 It's the root element. 115 00:05:30,090 --> 00:05:34,200 So make sure that exists first of all, and make sure 116 00:05:34,200 --> 00:05:39,200 that the name of that element is HTML case insensitive. 117 00:05:39,960 --> 00:05:41,280 Very good. 118 00:05:41,280 --> 00:05:44,700 Next let's access an element by its ID. 119 00:05:44,700 --> 00:05:48,082 So document takes us to the document node, 120 00:05:48,082 --> 00:05:52,140 get element by ID standard dot API 121 00:05:52,140 --> 00:05:55,623 give it the ID p1 remember was the first paragraph. 122 00:05:58,137 --> 00:05:59,937 P1 is the ID of the first paragraph. 123 00:06:01,720 --> 00:06:04,642 So this will gimme back a pointer to the first paragraph 124 00:06:04,642 --> 00:06:09,537 and the inner HTML I'm checking this para says "hi". 125 00:06:10,740 --> 00:06:12,780 Okay, I'm just checking that the content 126 00:06:12,780 --> 00:06:14,930 that I'm picking up is the correct content. 127 00:06:16,380 --> 00:06:17,340 Good. 128 00:06:17,340 --> 00:06:20,130 Also you can use query selector. 129 00:06:20,130 --> 00:06:22,146 This will give you back the first element 130 00:06:22,146 --> 00:06:25,890 or the first node that matches this CSS selector 131 00:06:25,890 --> 00:06:30,120 and the hash symbol means ID remember in HTML. 132 00:06:30,120 --> 00:06:33,191 So I'm gonna, from the top, from the document node again 133 00:06:33,191 --> 00:06:38,191 find the first node that matches this selector an ID p2. 134 00:06:40,890 --> 00:06:43,009 So that's gonna be this paragraph. 135 00:06:43,009 --> 00:06:45,630 That would be the second paragraph. 136 00:06:45,630 --> 00:06:46,930 And that's that one there. 137 00:06:48,000 --> 00:06:49,320 Okay. So let's have a look at that. 138 00:06:49,320 --> 00:06:52,320 That should give us this one here. 139 00:06:52,320 --> 00:06:56,613 And this paragraphs in the HTML, this para says "bye" 140 00:06:57,720 --> 00:07:00,561 this para says "bye", okay, 141 00:07:00,561 --> 00:07:03,603 so that should all work, shouldn't it? 142 00:07:04,590 --> 00:07:08,280 Run the tests and it all works beautifully. 143 00:07:08,280 --> 00:07:10,980 So in this example, we had HTML 144 00:07:10,980 --> 00:07:13,380 in a file and we loaded that content. 145 00:07:13,380 --> 00:07:15,870 And then we basically wrote our JavaScript 146 00:07:15,870 --> 00:07:19,050 against the content that we've just loaded from the webpage. 147 00:07:19,050 --> 00:07:20,670 So that's quite a realistic approach. 148 00:07:20,670 --> 00:07:23,400 You know often, you would have an existing webpage 149 00:07:23,400 --> 00:07:25,500 that your JavaScript code needs to test against. 150 00:07:25,500 --> 00:07:27,550 And well, we've just seen how to do that.