Original subtitles

1 1

This lecture 2

2

is gonna be about Traversing the Dom. 3

3

So Dom traversing is basically walking through the Dom. 4

4

Which means that we can select an element 5

5

based on another element. 6

6

And this is very important 7

7

because sometimes we need to select elements 8

8

relative to a certain other element. 9

9

For example, a direct child or a direct parent element. 10

10

Or sometimes we don't even know the structure 11

11

of the Dom at runtime. 12

12

And in all these cases, we need Dom traversing. 13

13

And this video is gonna be 14

14

another very nice reference lecture for you. 15

15

And so let's now work with this h1 element here, 16

16

and from here we're gonna go downwards, 17

17

upwards and also sideways. 18

18

So let's quickly inspect this element. 19

19

All right. 20

20

So we see, 21

21

so here we have the h1 element 22

22

and in there we have some text, we have some comments, 23

23

then we have the span element, then some more texts 24

24

and even more elements. 25

25

And so this is gonna be a lot of fun, 26

26

exploring a couple of different methods 27

27

and properties to walk around this element. 28

28

So let's start by selecting it. 29

29

Maybe we already did that before somewhere, 30

30

but yeah, that doesn't really matter. 31

31

So let's start with 'going downwards.' 32

32

So basically selecting child elements. 33

33

So the first way of doing that is to use querySelector 34

34

because we already know that querySelector 35

35

also works on elements, not only on the document. 36

36

So let's simply log to the console h1.querySelector 37

37

and then let's again, see here what we could select. 38

38

So we have this class highlight and this class highlight. 39

39

So that's these two green ones, 40

40

and so let's select them here. 41

41

So that's actually querySelectorAll 42

42

because there were two of them, and so class highlight. 43

43

So let's take a look and indeed here they are. 44

44

So this here indeed selects all the elements 45

45

with the highlight class 46

46

that are children of the h1 element. 47

47

and that would work no matter how deep 48

48

these child elements would be inside of the h1 element. 49

49

Okay, and that's very important to notice. 50

50

All right, now, in this case these two elements here 51

51

are direct children of the h1 52

52

but as I said, it would go down as deep as necessary 53

53

into the Dom tree. 54

54

Okay, and also if there were other highlight elements 55

55

on the page, so elements with this class, 56

56

they would not get selected, 57

57

because they would not be children of the h1 element. 58

58

All right? 59

59

So these are two points that are important to note here 60

60

about querySelector and querySelectorAll. 61

61

Now, sometimes all we need are actually direct children. 62

62

And so for that, we can use h1.childNodes. 63

63

So let's take a look. 64

64

And so here we actually get all kinds of stuff. 65

65

So we get texts we get the comment, 66

66

and we get then these elements. 67

67

And that's because we already know 68

68

that nodes can be anything so they can be texts 69

69

or elements or even comments as we have here. 70

70

Okay? 71

71

So this really gives us, every single node 72

72

of every single type that there exists. 73

73

But many times we are simply interested 74

74

in the elements themselves. 75

75

Right? 76

76

So if we wanted to text 77

77

we could use .textContent or .innerHTML. 78

78

So childNodes is not that used 79

79

but instead we can use children just like this. 80

80

And this then gives us an HTMLCollection 81

81

which remembers is a live collection, so it's updated, 82

82

and so here we indeed only get the three elements 83

83

that are actually inside of the h1. 84

84

So that this break in and is span again. 85

85

All right, but this one works only for direct children. 86

86

So keep that in mind. 87

87

Okay? 88

88

Finally, there's also first and last element child. 89

89

So these names are a little bit confusing, 90

90

but one more time, 91

91

that's because of the messy nature of JavaScript 92

92

with all of these things being implemented 93

93

at different points in time. 94

94

And so therefore it was difficult 95

95

to keep consisting naming conventions. 96

96

But anyway, let's use firstElementChild, 97

97

and so here it already is, style.color 98

98

just so that I can show you 99

99

that we can actually also set these properties. 100

100

Or use them to set something like the style. 101

101

So for example, we can do this, 102

102

and then only the first child here 103

103

gets now this color set to white. 104

104

So basically this element here 105

105

which is the first element here of all the children. 106

106

That's why it's called firstElementChild. 107

107

And we can of course do also lastElementChild, 108

108

and let's say this one to black, 109

109

so it's a little bit different in how it used to be. 110

110

Let's say orange red, I really like this one. 111

111

And so now it looks a little bit more crazy. 112

112

Okay, but now let's go upwards. 113

113

So going upwards. 114

114

So basically selecting parents 115

115

and for direct parents, it's actually very straightforward. 116

116

So here we have h1.parentNode. 117

117

And so that one is similar to childNodes. 118

118

So let's see. 119

119

And so it's this header title. 120

120

So as we open this up, we see that indeed this h1 here, 121

121

is inside of header title. 122

122

And so this is the direct parent, 123

123

and so that's why we get this. 124

124

Then there's also the parentElement, 125

125

which is usually the one that we are interested in. 126

126

But in this case, it's simply the same. 127

127

All right? 128

128

Because this element is also a node in this case. 129

129

However, most of the time we actually need a parent element 130

130

which is not a direct parent. 131

131

Or in other words, we might need to find a parent element 132

132

no matter how far away it is and the Dom tree. 133

133

And for that, we have the closest method. 134

134

So that's h1.closest. 135

135

So let's say that on the page, we had multiple headers 136

136

so multiple elements with a class of header, 137

137

but for some reason 138

138

we only wanted to find the one 139

139

that is a parent element of h1. 140

140

So of all h1 element here. 141

141

And so for that, we can use closest. 142

142

And so the closest method receives a query string 143

143

just like querySelector and querySelectorAll. 144

144

All right? 145

145

so .header, 146

146

and then let's do something with it. 147

147

For example, change the background image 148

148

or just change the background. 149

149

And I will set it here now actually to a CSS variable. 150

150

So let me show that to you. 151

151

So here we have all of these CSS variables, 152

152

or as they are officially called 'custom properties' 153

153

and we used them in CSS by doing this. 154

154

So by writing variable 155

155

and then a color and so well, let's actually use a gradient. 156

156

So gradient. 157

157

Yeah so this one. 158

158

Okay? 159

159

Just so you can see that we can use 160

160

custom properties also in CSS. 161

161

So give it a save and beautiful, 162

162

well, it's not that beautiful I must say, 163

163

but indeed it worked. 164

164

So it selected the closest header to our h1 element, 165

165

So the closest parent element that has this class 166

166

and then it's simply applied all style to that element. 167

167

So this is a very important one 168

168

and we're gonna use it all the time 169

169

especially for event delegation. 170

170

So take a note of that, or just keep it in mind. 171

171

Now, if this selector here actually matches the element 172

172

on which we're calling closest, 173

173

then that's actually the element that's gonna be returned. 174

174

So let me also show that. 175

175

So, we are calling this on the h1 element. 176

176

And so if we're looking for the closest h1, 177

177

then that's gonna be exactly the element itself. 178

178

And so, as I just said, 179

179

then that's gonna be the one that will be returned. 180

180

Let's make this a bit more prominent here, 181

181

and so you'll see that indeed, 182

182

now this is the h1 element itself. 183

183

So we can think of closest here 184

184

as basically being the opposite of querySelector. 185

185

So both receive a query string as an input 186

186

but querySelector, finds children, 187

187

no matter how deep in the Dom tree, 188

188

while the closest method finds parents. 189

189

And also no matter how far up in the Dom tree. 190

190

All right, so very important method here to keep in mind, 191

191

and now let's go sideways. 192

192

So selecting siblings, 193

193

and for some reason in JavaScript, 194

194

we can only access direct siblings. 195

195

So basically only the previous and the next one. 196

196

So that's h1.previousElementSibling like this, 197

197

and then there's also the nextElementSibling. 198

198

All right, 199

199

so the previous element sibling is null. 200

200

And so if we take a look at that, 201

201

it makes sense because there is nothing there. 202

202

So this is the first child of this parent element, 203

203

and therefore it doesn't have a previous sibling 204

204

but it has a next sibling. 205

205

And so that's this h4 element, which comes after it. 206

206

And just like before, we also have the same methods 207

207

or actually the same properties for nodes. 208

208

So that's just previous sibling 209

209

and next sibling. 210

210

So let's see, and here the previous sibling 211

211

is now actually text, 212

212

so not sure what that is. 213

213

Well, that's not really important because again, 214

214

most of the time we're gonna be working 215

215

with the elements anyway. 216

216

Now, if we really need all the siblings 217

217

and not just the previous and the next one, 218

218

then we can use the trick of moving up to the parent element 219

219

and then read all the children from there. 220

220

So let's see, 221

221

so h1.parentElement, 222

222

so that's just like we learned before, 223

223

so the direct parent, and then from there, 224

224

we can get all the children. 225

225

So just like we learned here also before, 226

226

so .children, 227

227

and so now we get all of the siblings 228

228

and that of course is gonna include itself. 229

229

So that's all of these elements 230

230

and all of them are siblings. 231

231

And just for fun, 232

232

let's actually do something with them here. 233

233

So this is an HTMLCollection, 234

234

remember, so it's one more time not an array, 235

235

but it is still an iterable 236

236

that we can spread into an array. 237

237

So we can do this, 238

238

and it will then create an array from this. 239

239

And then we can loop over that array 240

240

and do something using the forEach method. 241

241

So let's say that we wanted to change 242

242

some style to all the siblings, 243

243

but accept the element itself. 244

244

And actually that's more straight forward 245

245

than you might imagine, so we can simply do this here, 246

246

so we can check if the element is different 247

247

or equal also works, then the h1. 248

248

Because h1 is or original element itself. 249

249

And so comparisons between elements actually work just fine. 250

250

Okay? 251

251

And so when the element is not the h1 itself, 252

252

then let's change the style, 253

253

and let's say we want the transform property, 254

254

just to scale them a little bit, 255

255

let's say 0.5. 256

256

So scaling them by 50% 257

257

and indeed all the other three siblings 258

258

are now like 50% smaller. 259

259

All right? 260

260

And so this is how we can work 261

261

with all the sibling elements of one element. 262

262

Great, and that's actually the fundamentals 263

263

of Dom traversing. 264

264

And we're gonna need them all the time, and especially, 265

265

when we're doing some more complex event delegation 266

266

likely will do throughout the rest of the section.