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:
print do 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:
print do 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