Original subtitles

1 1

Let's start this section by learning 2

2

how the DOM really works behind the scenes 3

3

and more specifically how the DOM is organized internally. 4

4

This will make it easier to understand everything else 5

5

that's gonna follow in this section. 6

6

So first, remember that the DOM 7

7

is basically the interface between all JavaScript code 8

8

and the browser, or more specifically HTML documents 9

9

that are rendered in and by the browser. 10

10

Now we have written a ton of JavaScript code 11

11

in this course so far, 12

12

but many times completely without interacting 13

13

with the browser so without using the DOM. 14

14

Right? 15

15

But now we're back to working with webpages 16

16

and therefore with the DOM 17

17

and this time we're going to learn as much as possible 18

18

about the DOM and how to create amazing dynamic effects. 19

19

So let's remember what we already know about the DOM, 20

20

which is that we can use it to make 21

21

JavaScript interact with the browser 22

22

and again more specifically we can create 23

23

and modify and delete elements, 24

24

set styles and classes and attributes 25

25

and listen and respond to events. 26

26

In practice this works because a DOM tree 27

27

is generated from any HTML document 28

28

and a DOM tree is a tree like structure made out of nodes 29

29

which looks something like this. 30

30

And we can then interact with this tree 31

31

as we already did a couple of times in this course. 32

32

Now how does that interaction actually work? 33

33

Well the DOM is a very complex API 34

34

which remember stands for application programming interface. 35

35

So it's the interface we can use to 36

36

programmatically interact with the DOM. 37

37

In practice that means that the DOM 38

38

contains a ton of methods and properties 39

39

that we use to interact with the DOM tree 40

40

such as the querySelector, addEventListener 41

41

or createElement methods, 42

42

or also the innerHTML, textContent or children properties 43

43

and many, many more. 44

44

Now in the DOM there are different types of nodes 45

45

just as I mentioned before. 46

46

For example some nodes are HTML elements 47

47

but others are just text, remember? 48

48

And this is really important to understand 49

49

because all these DOM methods and properties 50

50

are organized into these different types of objects. 51

51

And so let's now take a look at how the DOM API 52

52

is organized behind the scenes. 53

53

So first, every single note in the DOM tree 54

54

is of the type, node. 55

55

And such as everything else in JavaScript, 56

56

each node is represented in JavaScript by an object. 57

57

This object gets access to special node methods 58

58

and properties, such as text content, child nodes, 59

59

parent nodes, clone nodes and many others. 60

60

Now we already know that there are different types of nodes. 61

61

Right? 62

62

So how should these be represented? 63

63

Well, this node type has a couple of child types so to say. 64

64

And these are the element type, the text type, 65

65

the comment type and also the document type. 66

66

So whenever there is text inside any element, 67

67

we already know that it gets its own node. 68

68

Right? 69

69

And that node will be of the type, text. 70

70

And the same actually happens for HTML comments 71

71

and that's because the rule is that everything 72

72

that's in the HTML has to go into the DOM as well. 73

73

Now for the element itself there is 74

74

the element type of node. 75

75

And this type of node gives each HTML access 76

76

to a ton of useful properties 77

77

such as innerHTML, classList, children or parent element. 78

78

There are also many useful methods 79

79

like append, remove, insertAdjacentHTML, querySelector, 80

80

closest and that's just to name a few. 81

81

So again, each element will be represented internally 82

82

as an object. 83

83

Now just to make this complete, 84

84

the element type has internally an HTML element, 85

85

child type. 86

86

And that element type itself has exactly one child type 87

87

for each HTML element that exists in HTML. 88

88

So we have a special type for buttons, 89

89

a special type for images, 90

90

for links, and so on and so forth. 91

91

And that's important because each of these HTML elements 92

92

can have different unique properties. 93

93

For example and image has a source attribute in HTML 94

94

which no other element has. 95

95

Or the anchor element for links 96

96

has the HREF attribute which also no other element has. 97

97

And so the DOM needs a way of storing 98

98

these different attributes 99

99

and therefore different types 100

100

of HTML elements were created in the DOM API. 101

101

And just to make sure that we're all on the same page here, 102

102

this diagram that I'm showing you here 103

103

is of course not a DOM tree. 104

104

Right? 105

105

So this is not a representation of any HTML document. 106

106

This is just a way that different types of nodes 107

107

are represented behind the scenes in the DOM API. 108

108

Now, right? 109

109

But anyway, now comes the really important part, 110

110

because what makes all of this work 111

111

is something called inheritance. 112

112

So what is inheritance? 113

113

Well inheritance means that all the child types 114

114

will also get access to the methods and properties 115

115

of all their parent node types. 116

116

For example an HTML element will get access to everything 117

117

from the element type, like innerHTML, or classList 118

118

or all these other methods and properties. 119

119

And besides that it will also get access to everything 120

120

from the node type because that is also its parent type. 121

121

Okay? 122

122

So we can think of this as though 123

123

the HTML button element for example, 124

124

is also an element and also a node. 125

125

All right? 126

126

Now this might seem all a bit weird and confusing 127

127

but don't worry. 128

128

We will learn why this kind of inheritance works very soon 129

129

when we finally talk about object oriented JavaScript. 130

130

For now, what I want you to understand is that a DOM API 131

131

is broken up into these different types of nodes. 132

132

I also want you to understand that each 133

133

of these types of nodes 134

134

has access to different properties and methods 135

135

and that some of them 136

136

even inherit more properties and methods 137

137

from their ancestors in this organization. 138

138

All right? 139

139

Now we didn't talk yet about the documents node type. 140

140

So document, which we use all the time in DOM manipulation 141

141

is in fact just another type of node 142

142

so it contains important methods, 143

143

such as querySelector, createElement 144

144

and getElement by I.D. 145

145

And note how querySelector 146

146

is available on both the document and element types. 147

147

So keep this in mind because it will be important later on. 148

148

All right, and now there is just 149

149

one final missing piece here 150

150

because the DOM API actually needs a way 151

151

of allowing all the node types to listen to events. 152

152

And remember we usually listen for events by calling the 153

153

addEventListener method on an element or the document. 154

154

Right? 155

155

So why does that actually work? 156

156

Well its because there is a special node type called 157

157

EventTarget which is a parent of both the node type 158

158

and also the window node type. 159

159

And so with this, thanks to inheritance, 160

160

we can call addEventListener on every single type of node 161

161

in the DOM API because all elements 162

162

as well as document and window, 163

163

and even text and comment will inherit this method 164

164

and therefore we will be able to use addEventListener 165

165

on all of them just as if it was their own method. 166

166

Now just to be clear, we do never 167

167

manually create an eventTarget object. 168

168

Okay. 169

169

This is just an abstract type 170

170

that we do not use in practice. 171

171

This all really happens behind the scenes 172

172

to make all the functionality work as we expect it to work. 173

173

So in a nutshell this is how the DOM API works 174

174

and is structured behind the scenes. 175

175

There are still some simplifications here 176

176

but this is all that really matters. 177

177

And I really wish that I could have had this diagram 178

178

when I learnt JavaScript for the first time. 179

179

Because I really think this helps structuring 180

180

all this information in your mind. 181

181

Now if you want to go even deeper than this 182

182

there is still tons of material 183

183

that you can check out in the MDN documentation 184

184

and if you ask me it's all really fascinating. 185

185

But again, all that you need to know 186

186

is really in this lecture. 187

187

It took me a lot of hours to put this one together 188

188

but I think it was well worth it 189

189

and I hope you think the same. 190

190

But anyway lets now move on 191

191

to the practical part Of this section 192

192

were we will then 193

193

finally use many of these things in action.