forked from gabrielmaikon/lp-not-2021-2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
15-criacao-DOM.html
114 lines (92 loc) · 4.17 KB
/
15-criacao-DOM.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página modelo</title>
</head>
<body>
<h1>Criação de elementos HTML via JavaScript</h1>
<p>Este arquivo demonstra como criar novos elementos HTML usando Javascript.</p>
<ul>
<li>Maçã</li>
<li>Banana</li>
<li>Uva</li>
</ul>
<script>
// Ativa verificações adicionais de variáveis
// Modo "chato" do JavaScript
'use strict'
/*
A INTRODUÇÃO DE UM NOVO ELEMENTO NO HTML VIA JS ENVOLVE DUAS ETAPAS:
1) A criação do elemento, que é responsabilidade do proprietário (owner),
ou seja, do document.
2) A incorporação do novo elemento na estrutura DOM é responsabilidade do
pai (parent) do novo elemento.
*/
// Criando um novo elemento (etapa 1)
const novoItem = document.createElement('li')
// Colocando conteúdo no novo elemento
novoItem.textContent = 'Laranja'
// Capturando o pai do novo elemento
// Seleciona o primeiro (e único) elemento do tipo ul no documento
const lista = document.querySelector('ul')
// Incorporando o novo elemento como filho de seu pai (etapa 2)
lista.appendChild(novoItem)
const novoItem2 = document.createElement('li') // Etapa 1
novoItem2.textContent = 'Jabuticaba'
lista.appendChild(novoItem2) // Etapa 2
const novoItem3 = document.createElement('li')
novoItem3.textContent = 'Morango'
lista.appendChild(novoItem3)
const novoParag = document.createElement('p') // Etapa 1
novoParag.textContent = 'Este parágrafo foi adicionado usando JavaScript.'
novoParag.style.color = 'blue'
// body não precisa ser capturado, pode ser acessado diretamente
// via document.body
document.body.appendChild(novoParag) // Etapa 2
const novaDiv = document.createElement('div')
novaDiv.textContent = 'Sou uma div'
novaDiv.style.background = 'yellow'
novaDiv.style.textAlign = 'center'
document.body.appendChild(novaDiv)
const novoItem4 = document.createElement('li')
novoItem4.textContent = 'Amora'
lista.appendChild(novoItem4)
// Conclusão: appendChild() sempre vai colocar o novo elemento
// como ÚLTIMO filho de seu pai
const novoItem5 = document.createElement('li')
novoItem5.textContent = 'Abacaxi'
// insertBefore() tem dois parâmetros:
// 1º ~> o novo item a ser inserido
// 2º ~> o item já existente, que servirá de REFERÊNCIA
// para o local onde o novo item será inserido
lista.insertBefore(novoItem5, novoItem)
const novoItem6 = document.createElement('li')
novoItem6.textContent = 'Abacate'
lista.insertBefore(novoItem6, novoItem3)
const novoParag2 = document.createElement('p')
novoParag2.textContent = 'Este parágrafo foi inserido aqui com insertBefore().'
document.body.insertBefore(novoParag2, lista)
// Inserindo um novo elemento no início da lista
const novoItem7 = document.createElement('li')
novoItem7.textContent = 'Caju'
// Usando querySelector() para pegar o primeiro elemento
// do tipo li
const itemMaca = document.querySelector('li')
lista.insertBefore(novoItem7, itemMaca)
const novoItem8 = document.createElement('li')
novoItem8.textContent = 'Ameixa'
// Captura TODOS os elementos do tipo especificado
// e retorna um VETOR contendo todos eles
const todosItens = document.querySelectorAll('li')
lista.insertBefore(novoItem8, todosItens[3])
// CONCLUSÕES:
// 1) insertBefore() permite posicionar o novo elemento
// entre os filhos já existentes de seu pai, usando um
// outro elemento existente como ponto de referência.
// 2) querySelectorAll() captura todos os elementos do
// tipo especificado dentro de um vetor.
</script>
</body>
</html>