Seletor através da CLASSE
Para selecionar atráves da Classe de alguma tag, precisa:
Criar uma variável para guarda essa informação:
var campo = *que vai receber :
Diz que o que vai receber é um documento:
document. *ai você especifica o que você quer:
Diz para pegar o elemento, que é uma "class" e vai passar o nome dessa "classe":
getElementsByClassName() *ai dentro do parentes coloque o nome da tag:
Diz qual é o nome da "classe" e qual é sua posição:
("texto") [2] ; a classe = "texto", na posição "2"
Ficando assim o comando para pegar algo de um HTML :
var campo = document.getElementsByClassName("texto")[2];
Vamos começar criando 3 tipos de tags diferentes,
e adicionar uma "classe" em cada uma das tags,
a "classe" servi para estilizar "CSS" ou manipular através do "JS" :
h1 classe = "texto" Titulo em h1 /h1
h2 classe = "texto" Titulo em h /h2
p classe = "texto" Paragráfo /p
Para selecionar, vamos criar um botão e colocar uma função/açao:
button onclick="exibirTexto()" "Clique aqui" /button
Veja como é o código:
Agora vamos criar a função, para exibir o texto :
Na tag "script", coloque :
_function exibirTexto() { dentro dela coloque:
__// armazenar a tag com a "classe texto", que está na posição "2"
__var campo = document.getElementsByClassName("texto")[2];
__// Para exibir o html => use o "innerHTML"
__alert(campo.innerHTML);
_} fecha a "function"
Veja como é o código:
Apesar das classes terem o mesmo nome, a posição selecionada é "2",
lembrando que conta: "0, 1, 2".
Agora vamos ver se está funcionando na prática,
ao clicar no botão "Clique aqui", tem que aparecer o "Paragráfo",
Titulo em h1
Titulo em h2


Paragráfo