Aprendendo mais sobre o DOM
- Texto do alerta da página:
- "Aprendendo a usar o DOM em JavaScrip."
Sumário
1. Colocar conteúdo HTML no alerta da web pagina web
- Selecionar o elemento:
- var P39 = document.getElementById('tester')
- Adicionar o elemento no alert da pagina:
window.alert(P39.textContent)window.alertserve para alertar algo na página webp1é a variável criadatextContent: mostra o texto no alerta da página,mas existem varias formas além do textContent para mostrar os elementos,veja a seguir:
- As três formas de inserir o conteúdo JavaScript no HTML são:
- O innerHTML mostra as tags junto com o texto dentro do HTML. É a forma menos segura,pode abrir a porta para ataques XSS (injeção de código).
- As tags aparecem junto no alerta
window.alert(`Texto para o alerta`+ li.innerHTML)- O textContent mostra apenas o texto. Ele ignora qualquer tag HTML que você forneça. Por isso, é a opção mais segura
- As tags não aparecem no alerta,apenas o texto,e ele mostra todos os textos,até mesmo os textos ocultos.
window.alert(`Texto para o alerta`+ li.textContent)- TextContent É o mais seguro contra ataques XSS!!
- innerText,parecido com textContent, mostra apenas o texto, mas ele verifica se o texto está visível ou escondido pelo CSS. por isso costuma ser mais lento; o textContent é o padrão para segurança e performance.
- As tags não aparecem no alerta,mas ele lhe dá apenas o que está visível na tela que o Usuario vê.
window.alert(`Texto para o alerta`+ li.innerText)
2. Criar um elemento no JS
Criar uma imagem pelo JS:
var img = document.createElement('img')
Adicionar Id no elemento criado:
img.setAttribute('id','foto')
Adicionar arquivo/imagem no elemento criado:
img.setAttribute('src','namefoto.png')
Adicionar o elemento à página como filho de algum elemento:
.appendChild()
Exemplo prático:
res.appendChild(img)
res: variável
img: imagem que foi adicionada
3. As 5 formas de selecionar um elemento HTML pelo JavaScript
- Por marca
- getElementsByTagName('')[ ]
- Ex:
var P20 = document.getElementsByTagName('Li')[29]. - Por id:
- getElementById('')
- Ex:
var P7 = document.getElementById('SelectingId') - Por nome:
- getElementsByName('')[ ]
- Ex:
var SixLi = document.getElementsByName('SixLi')[0] - Por classe
- getElementsByClassName('')[ ]
- Ex:
var sevenLi = document.getElementsByClassName('sevenLi')[0] - Por seletor
- Ex:
var LastLiSelector = document.querySelector('#LastLiSelector')
A melhor forma:
3. Estilos CSS dentro do JavaScript
A cor deste elemento foi alterada pelo JS
- Para alterar a cor de texto: variável.style.color = 'color'
- Ex:
- p2.style.color = 'red'
Alterar a cor do background
corpo.style.background = 'green'
4. Mostrar a variável no documento HTML
document.write(p1.innerText)
É possível escrever um texto para aparecer junto da variável:
document.write('Texto escrito' + p1.innertext)
5. Mudar o Texto de um Elemento HTML pelo JS
- Criar a variável e selecionar o elemento:
var buttonBack = document.getElementById('buttonBack');buttonBack.innerText ='Voltar para a página anterior';
6. Function JS
Clique aqui para mudar a cor
Clique para mostrar seu nome!
Clique para mover
Aproxime para mudar tudo
Ver Explicações
var ChangeStyle = document.getElementById('allStyle')- seleciona o elemento
allStyle.addEventListener('click', AllstyleGroup)- addEventListener fica "escutando" a variável allStyle, nesse caso se houver um click do mouse no elemento ele irá executar/enviar o AllstyleGroup.
allStyle.addEventListener('mouseleave', AllstyleGroupOut)- Fica escutando a variável allStyle igual ao evento anterior ,porém nesse caso se o mouse sair da área do elemento ele irá ser executado,ao invés do click.
function AllstyleGroup(){- Escopo de função ('function') ,tudo que for criado ou executado nele fica dentro,por exemplo,se criar uma variável dentro,ela funcionará apenas dentro dele.
- Estilos da função:
ChangeStyle.innerText = `Seu nome é ${AlertText},muito prazer!`ChangeStyle.style.background = 'Purple'ChangeStyle.style.transform = 'translateX(50px)'ChangeStyle.style.transform = 'transform 2s'ChangeStyle.style.width = '150px'ChangeStyle.style.height = '113px'}function AllstyleGroupOut(){- Escopo de função ('function')
ChangeStyle.textContent = 'Aproxime para mudar tudo'ChangeStyle.style.transform = 'translateX(0px)'ChangeStyle.style.transition = 'transform 2s'ChangeStyle.style.background = 'red'}