Original subtitles

1 1

In this lecture we're gonna learn 2

2

how to select, create and delete elements with JavaScript. 3

3

Now, the goal of this lecture is more to be 4

4

like a quick reference for you in the future 5

5

because these methods that I'm gonna show you here 6

6

are actually way more difficult to find 7

7

and to understand from the MDN documentation. 8

8

And so when you need some of these methods in the future 9

9

then all you have to do is to come back 10

10

to this lecture and see how it works. 11

11

And let's start by learning a little bit more 12

12

about selecting elements. 13

13

And I'm gonna start at the very top of any HTML document. 14

14

So as you know, that is the document. 15

15

And so actually we do have a special way of selecting 16

16

the entire document of well, of any webpage, 17

17

so of any document and that's document element, all right. 18

18

So just document here is not enough 19

19

to select the document element 20

20

because this is not the real DOM element, all right? 21

21

So for example if we want to apply CSS styles 22

22

to the entire page we always need 23

23

to select document element, okay? 24

24

Let's just take a look here in the console. 25

25

And so indeed that is now the entire HTML here, okay? 26

26

And we can also easily select the head and body. 27

27

So that's just head and dot body as you can imagine. 28

28

So this is not visible on the page 29

29

and the body is then also the entire kind 30

30

of visible document, all right? 31

31

So for these special elements 32

32

we don't even need to write any selector 33

33

but otherwise as you already know, 34

34

we can use query selector. 35

35

So that's nothing new, 36

36

for example we can select the header element just like this 37

37

and this will then return the first element 38

38

that matches this selector here. 39

39

Now, if we want to select multiple elements 40

40

then we should use document.queryselectorAll. 41

41

So again, we already used this one 42

42

and so here on this page 43

43

we have multiple elements with these section class. 44

44

So basically each of these here are a section 45

45

with the class of section, okay? 46

46

And I will actually store this here in a variable 47

47

because I want to show you something 48

48

a little bit later, okay? 49

49

But as you know already, this will return a node list 50

50

and then that will contain all of the elements 51

51

that are a section so that are selected by this selector. 52

52

So these ones we have been using all the time. 53

53

And in fact they are the most used ways 54

54

of selecting elements. 55

55

Now, as you learned hopefully from the previous lecture 56

56

these are available not only on the document here 57

57

like this, but also on all the elements, okay? 58

58

And we actually use this a lot when we want 59

59

to select child elements as we will do 60

60

a little bit later in this section, okay? 61

61

Next I think we also already talked 62

62

about get element by ID. 63

63

And so here we only pass the ID name itself 64

64

without the selector. 65

65

So this section here has ID section one 66

66

and so, yeah, we don't need the selector here. 67

67

That's only for the query selector methods, all right. 68

68

So I showed you this one 69

69

because now there are also some others. 70

70

So there are get elements and get elements, 71

71

so with an S by tag name. 72

72

And so let's say we want to get all the buttons. 73

73

So all the elements with the name of button basically. 74

74

So that's actually store this also all buttons 75

75

and then log it to the console. 76

76

Let's give it some more space here. 77

77

And so here now you see all the buttons 78

78

that are on our page. 79

79

Now, what I wanted to show you is 80

80

that this method actually returns an HTML collection. 81

81

So that's different from a node list 82

82

because an HTML collection is actually 83

83

a so-called life collection. 84

84

And that means that if the DOM changes then this collection 85

85

is also immediately updated automatically. 86

86

So for example, if I remove this button here 87

87

and I can do that by clicking inspect 88

88

and then that will select that button here 89

89

then all I need to do is to hit delete 90

90

and then if I go back here to the console 91

91

and try to read the allButtons again 92

92

then you see that we only have eight elements in here 93

93

while before we had nine, right? 94

94

So that's something very important to keep in mind 95

95

when you use this selector here, okay? 96

96

And sometimes it's actually quite helpful 97

97

to have an HTML collection like this 98

98

which updates automatically 99

99

because of course we can also delete elements 100

100

from the DOM programmatically not just manually 101

101

like I just deleted this button here earlier, all right. 102

102

Now the same does not happen with a node list. 103

103

So if I take this whole section here and delete it 104

104

and if I then try to read all the sections 105

105

then I still have the same four elements here 106

106

in the node list. 107

107

And that's because this variable here was created 108

108

by the time that this section still existed. 109

109

And it didn't update itself 110

110

as I deleted one of its elements, all right? 111

111

So again, that's important to keep in mind, okay? 112

112

And finally I also want to show you 113

113

get elements by class name. 114

114

So this is similar again to get element by ID 115

115

and get elements by tag name. 116

116

So here we can now specify a class name. 117

117

So let's say button and once again 118

118

we don't need a selector. 119

119

So it's not a dot, it's simply the name of the classes. 120

120

And this one will also return a life HTML collection. 121

121

So just as I explained to you earlier, okay. 122

122

So this is how we select elements, 123

123

selecting elements once of these, you already knew. 124

124

So basically these two more modern ones 125

125

but these ones also have a place. 126

126

So this one and this one in case that you really need 127

127

an HTML collection which in some situations is useful 128

128

but most of the time, I simply keep using query selector 129

129

and query selector all, okay. 130

130

Next up, let's talk about creating and inserting elements. 131

131

Now we can create HTML elements using 132

132

the insert adjacent HTML function 133

133

that we used before and the Bankist application remember. 134

134

So we used insert adjacent HTML to create movements, right? 135

135

And this is a quick and easy way of creating elements 136

136

that I really like a lot and use the most actually. 137

137

So please go back to the Bankist application 138

138

and remember exactly how it works now, right? 139

139

So I don't need to talk about this one here again 140

140

and I will instead focus 141

141

on some other ways of creating elements 142

142

because sometimes it's more useful 143

143

to actually build the element a bit more 144

144

from scratch, like more programmatically using 145

145

a combination of some other methods. 146

146

So let's see how and then it will all make sense, okay? 147

147

So let's use document.createElement, okay? 148

148

And then here we need to pass 149

149

in the string of basically the tag name. 150

150

So I want to create a div here now. 151

151

And so this will return a DOM element 152

152

that we can then save somewhere. 153

153

And I'm calling this one message 154

154

and I will explain why in a second, okay? 155

155

So again, this here creates a DOM element 156

156

and then stores that element into the message. 157

157

Now that element is not yet anywhere in our DOM. 158

158

All this is is a DOM object that we can now use 159

159

to do something on it but it is not yet in the DOM itself. 160

160

So it's nowhere to be found on our webpage here, okay? 161

161

If we want it on the page then we need 162

162

to manually insert it into the page. 163

163

But first let's actually do something with it. 164

164

So for example, we can add classes. 165

165

And so now this is like any other selection 166

166

that we have, okay? 167

167

So if we have an element in our DOM and select it 168

168

for example, using query selector here like this 169

169

then the result is also a DOM object 170

170

that we can use in our code. 171

171

And this year is now just the same. 172

172

It's just an object that represents a DOM element. 173

173

And so just like before we can use, for example 174

174

class list on it, so class list, and then we can add 175

175

and I will add a class called cookie message. 176

176

And that's because here we will now programmatically 177

177

built an element which will display a small cookie message 178

178

on the bottom of the screen. 179

179

So I'm sure you've seen these on all web pages these days. 180

180

They're quite annoying. 181

181

So let me search here for cookie and here you go. 182

182

So this is the class that I created for this cookie message. 183

183

And so this is the one we are adding now 184

184

to our newly created element, okay? 185

185

Let's get rid of this here and now we can keep going. 186

186

So for example, we can add text into the element 187

187

and as always we do that using text content. 188

188

So let's just say we use cookies for improved functionality 189

189

and analytics, something like that, analytics, okay? 190

190

So this inserts simply text 191

191

but of course we can also insert a HTML. 192

192

And so that is then inner HTML 193

193

which we also already used before. 194

194

And remember that we can use both of these properties 195

195

to read and to set content, okay? 196

196

And so here let's not write a string of HTML 197

197

so let's copy this and then we can also like add a button. 198

198

Okay, I'm missing the colon here. 199

199

So let's add a button element. 200

200

Okay, so I'm just writing some HTML here. 201

201

This doesn't matter, just copy this code. 202

202

All right, It's just that it will have 203

203

the correct formatting then based 204

204

on the CSS that I wrote before. 205

205

So this will basically just display 206

206

a nicely formatted button saying, got it, okay? 207

207

But anyway we now have this element 208

208

and all we have to do now is to insert it into our DOM. 209

209

And let's do that here in our header. 210

210

So give it some more space. 211

211

So all of this year is our header element. 212

212

So this takes up so much space. 213

213

Can't get rid of it for some reason. 214

214

So all of this is our header. 215

215

And so we cannot select this header 216

216

and then a pent or message to that element. 217

217

And we already have that here, let's call this the header 218

218

and now we can say header.prepend. 219

219

And now indeed, here it is. 220

220

So here is our message. 221

221

So maybe you saw it being added here. 222

222

So indeed is now also really in our DOM. 223

223

Now, for some reason, I think this doesn't look quite right. 224

224

Well, maybe it does. 225

225

So what matters here is that we just inserted 226

226

this element really into our HTML, so right into our DOM. 227

227

So prepending basically adds the element 228

228

as the first child of this element, okay? 229

229

But we can also edit as the last child. 230

230

And so that is a append. 231

231

So header.append message and watch what happens now? 232

232

So now we see that it's really appended, 233

233

so it's the last child. 234

234

So it's gotta be, yeah, it's here. 235

235

Now what we see here is that the element 236

236

was actually only insert at once, 237

237

now that's because this element here 238

238

so message is now indeed a life element living in the DOM. 239

239

And so therefore it cannot be 240

240

at multiple places at the same time. 241

241

It's just like a person that also cannot be 242

242

at two places simultaneously, right? 243

243

So what's happened here is that we first prepended 244

244

the element and then we appended it. 245

245

And what this appends did here 246

246

was to basically move the element 247

247

from being the first child to being the last child. 248

248

All right, so basically it moved the element 249

249

and didn't really insert it 250

250

because it was already inserted here by prepend 251

251

So what this means is that we can use 252

252

the prepend and append methods not only to insert elements 253

253

but also to move them. 254

254

And again, that is because a DOM element is unique. 255

255

So it can always only exist at one place at a time. 256

256

But now what if we actually wanted 257

257

to insert multiple copies of the same element? 258

258

Well, in that case we actually would have 259

259

to first copy the first element. 260

260

So let's comment out this part here and say header.append 261

261

and then instead of appending the message directly 262

262

we first clone it. 263

263

So that's clone node, and then we need to pass 264

264

in true or we can pass in true which simply means 265

265

that all the child elements will also be copied. 266

266

And so now as you see, we get the same cookie message 267

267

in both places, but usually this is not what we want. 268

268

So let's actually only append it. 269

269

So having it here at the bottom 270

270

where it makes the most sense. 271

271

Now, to finish there are actually two more methods 272

272

and that is before and after. 273

273

And as the name says this one will insert a message 274

274

before to header element. 275

275

So as a sibling and this one here 276

276

after the header element, so also as a sibling. 277

277

Let's just get rid of this so we can see it here before. 278

278

And so now it's actually really before the header, 279

279

so first a cookie message 280

280

and then the header, but they are siblings. 281

281

And now the same here, it's now after the header. 282

282

So you have the whole header 283

283

and then we have this cookie element, all right? 284

284

So that is how we create 285

285

and insert elements, programmatically 286

286

and now to finish, let's also delete elements, okay? 287

287

So what I'm gonna do is to remove this element 288

288

when we click this button, 289

289

so let's select this button 290

290

and then as we click it, remove the message. 291

291

So document.querySelector and we gave it a class 292

292

of a button close cookie, right? 293

293

And then add event listener. 294

294

And now all we have to do is message.remove. 295

295

And again here, we don't have to select 296

296

the message element again 297

297

because we already have it in memory. 298

298

So we already have it stored in a variable. 299

299

So there's no need to run a document or query selector. 300

300

Of course we could do it and it would work as well. 301

301

So we could select the element with the class 302

302

of cookie message, but again, that's not necessary 303

303

because we already have it stored in memory, okay? 304

304

And so if I click this done, it's gone, all right? 305

305

It's nowhere to be found now, 306

306

now this remove method here is actually very recent. 307

307

Before this method existed all we could do 308

308

was to remove child elements. 309

309

And so back then we had to select the parent element first 310

310

and then remove the child from there. 311

311

So that would look like this. 312

312

So message and then we would move up in a DOM tree, 313

313

remove child and then again the name of the element 314

314

that we want to remove. 315

315

So this is a bit cumbersome 316

316

but again, this is how we used to do it. 317

317

And I'm sure you will see this in some code basis 318

318

because many people also don't yet know 319

319

about this newer way of doing things. 320

320

And by the way, this way of moving up and down 321

321

in the DOM tree like selecting, the parent element 322

322

is called DOM traversing. 323

323

And there a whole lecture on that a bit later 324

324

in this section, let's just see if this works as well. 325

325

And indeed it does. 326

326

So this is how we select, create, insert and delete elements 327

327

and to make this 100% complete, just make sure 328

328

that you review the insert adjacent HTML method as well 329

329

that we used before in the Bankist application.