Original subtitles

1 1

So in this section, 2

2

we're going to make JavaScript interact 3

3

with a webpage for the very first time. 4

4

And the technical term for that is doing DOM Manipulation. 5

5

Now, in the last lecture, 6

6

you already selected an element from a page. 7

7

And what that means is that you, kind of, 8

8

interacted with the DOM already. 9

9

So in this lecture, 10

10

let's learn what the DOM actually is and how it works. 11

11

So what is the DOM actually? 12

12

Well, DOM stands for Document Object Model, and it is, 13

13

basically, a structured representation of HTML documents. 14

14

The DOM allows us to use JavaScript to access HTML elements 15

15

and styles in order to manipulate them. 16

16

to change HTML attributes and also to change 18

18

CSS styles from our JavaScript. 19

19

So we can say that DOM is basically a connection point 20

20

between HTML documents and JavaScript code. 21

21

Now, the DOM is automatically created 22

22

by the browser as soon as the HTML page loads. 23

23

And it's stored in a tree structure like this one. 24

24

In this tree, each HTML element is one object. 25

25

And so let's now take a look at this DOM structure 26

26

in a little bit more detail. 27

27

And to illustrate this here is a very simple HTML document, 28

28

and here is what a DOM tree 29

29

corresponding to this HTML looks like. 30

30

So, as I already mentioned, this is a tree structure, 31

31

which looks a bit like a family tree, right? 32

32

And actually we used the terms, child element, 33

33

parent element, sibling element and so on, 34

34

when we talk about the DOM tree and DOM manipulation. 35

35

Anyway, as you can see for each element in the HTML, 36

36

there is one element node and the DOM tree, 37

37

and we can access and interact 38

38

with each of these nodes using JavaScript. 39

39

Okay, so the DOM always starts with the document object, 40

40

right at the very top. 41

41

And document is a special object 42

42

that we have access to in JavaScript. 43

43

And this object serves as an entry point into the DOM. 44

44

Remember how you used document dot query selector 45

45

in the last lecture to select an element. 46

46

So that means that the query selector method 47

47

is available on the document object. 48

48

And so that's why we say that document 49

49

is the entry point to the DOM, 50

50

because we need it to start selecting elements. 51

51

All right, then the first child element of document 52

52

is usually the HTML element, because that's usually 53

53

the root element in all HTML documents. 54

54

Next, HTML usually has two child elements, head and body. 55

55

And so of course you can also 56

56

find them here in the DOM tree. 57

57

In the HTML, they are adjacent elements, 58

58

and so they are siblings in our DOM as well. 59

59

Then, as we keep going deeper 60

60

into the nested HTML structure, 61

61

we keep adding more and more children to the DOM tree. 62

62

So inside head and body, you have more child elements, 63

63

and the two sections and the body, 64

64

even have child elements themselves. 65

65

And from there, it goes even deeper 66

66

because the first paragraph also has a child, 67

67

which is this link element here. 68

68

And with that, finally, 69

69

we have all our HTML elements in the DOM tree. 70

70

But a Dom tree actually has more than just element nodes. 71

71

It also has nodes for all the text itself, 72

72

comments and other stuff, 73

73

because basically the rule is that 74

74

whatever is in the HTML document also has to be in the DOM. 75

75

And so, as you see, the DOM really is 76

76

a complete representation of the HTML document, 77

77

so that we can manipulate it in complex ways. 78

78

And with this, you should now have a good overview 79

79

of how the DOM works and what it looks like. 80

80

But before we finish, I need to clarify something 81

81

that many beginners find confusing. 82

82

So, many people believe that the DOM 83

83

and all the methods and properties 84

84

that we can use to manipulate the DOM, 85

85

such as documented or the query selector 86

86

and lots of other stuff are actually part of JavaScript. 87

87

However, this is not the case. 88

88

Remember that JavaScript is actually just a dialect 89

89

of the ECMAScript specification, 90

90

and all this DOM related stuff is simply not in there. 91

91

So up until this point, 92

92

we have only used the JavaScript language itself. 93

93

But starting in this section, 94

94

we will also use JavaScript in a browser. 95

95

I mean, sure, we have used Google Chrome 96

96

to run our code in the developer console, 97

97

but that's not what I mean here. 98

98

What I mean is to manipulate webpages 99

99

that are actually displayed and rendered in the browser, 100

100

just like any normal website that you know. 101

101

Okay. 102

102

But, now you might ask, 103

103

"If the DOM is not a part of the JavaScript language, 104

104

then how does this all work?" 105

105

Well, the DOM and DOM methods 106

106

that browsers implement 109

109

And API stands for Application Programming Interface. 111

111

But more about that later. 112

112

For now, what you need to know 113

113

is that a web APIs are, basically, 114

114

libraries that are also written in JavaScript 115

115

and that are automatically available for us to use. 116

116

So all this happens behind the scenes, 117

117

we don't have to import or do anything, okay? 118

118

And there is actually an official DOM specification 119

119

that browsers implement, 120

120

which is the reason why DOM manipulation 121

121

works the same in all browsers. 122

122

Now, besides the DOM, 123

123

there are actually a ton more web APIs, 124

124

such as timers, the fetch API, and many more. 125

125

Again, we will learn a lot more about this later on. 126

126

For now, let's finally start our project 127

127

and do some DOM manipulation in practice.