Get Element by Id

getElementById() Method
Definio e Uso
O mtodo getElementById() retorna o elemento que tem o atributo de id
com o valor especfico.
Esse mtodo um dos mais comuns no HTML DOM, e usado quase toda
vez que se quer manipular, ou pegar informao de algum elemento no
documento.
Retorna null se no existir elementos com o ID especfico.
O ID deve ser nico na pgina. Entretanto, se existir um ou mais elementos
com o ID requerido , o mtodo getElementById() retorna o primeiro
elemento no cdigo fonte.
Sintaxe
document.getElementById(Id do elemento)
Valor dos Parmetros

Parmetro
Tipo
Descrio
ID do
elemento
String
Necessrio. O atributo de Id o valor do elemento

que voc quer usar
Exemplos
Exemplo: uso simples do mtodo
1 <!DOCTYPE html>
2 <html>
3
4
<head>
<meta charset="utf-8">
5 <head>
6
7
<body>
<p id="teste">Clique para alterar o texto.</p>
<button onclick="myFunction()">Clica aqui</button>
10
<script>
11
function myFunction() {
12
document.getElementById("teste").innerHTML = "Funcionou :)";
13
14
15
}
</script>
</body>
16 </html>
Exemplo: uso simples do mtodo retornar null
1 <!DOCTYPE html>
2 <html>
3
4
<head>
5 <head>
6
7
<body>
<p id="teste">Clique para alterar o texto.</p>
10
<script>
11
12
document.getElementById("tags").innerHTML = "No funcionou :(";
13
14
15
}
</script>
</body>
16 </html>
Exemplo: mais de um elemento com a ID requisitada
1 <!DOCTYPE html>
2 <html>
3
4
<head>
5 <head>
<body>
<p id="teste">Apenas um de ns vai mudar.</p>
<p id="teste">Voc sabe quem ser?</p>
<p id="teste">Acho que serei eu.</p>
10
<p id="teste">No, serei eu, eu sou melhor.</p>
11
<p id="teste">Haha, idiotas.</p>
12
<button onclick="myFunction()">Clica para descobrir</button>
13
<script>
14
15
document.getElementById("teste").innerHTML = "HAHAHAHA losers";
16
var cor = document.getElementById("teste");
17
cor.style.color = 'blue';
18
19
20
}
</script>
</body>
21 </html>
getElementsByName() Method
Definio e Uso
O mtodo getElementsByName() retorna a coleo com todos os elementos
com o nome(o valor o valor do atributo nome), como um array.
Nota: Em HTML5, o atributo "nome" caiu em desuso e foi substitudo pelo
atributo "id" para muitos elementos.
Sintaxe
document.getElementsByName(nome do elemento)
Valor dos Parmetros

Parmetro
Tipo
Descrio
nome do
elemento
String
Necessrio. O atributo nome o valor do elemento

que voc quer acessar/manipular
Exemplos
Exemplo: uso simples do mtodo
1 <!DOCTYPE html>
2 <html>
3
4
<head>
5 <head>
6
<body>
<p id="teste">Clique para pegar o elemento.</p>
<p id="demo"></p>
10
<script>
11
12
var x = document.getElementsByName("fname")[0].tagName;
13
document.getElementsByName("demo").innerHTML = x;
14
15
16
}
</script>
</body>
17 </html>

Get Element by Id

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Get Element by Id

Enviado por

Direitos autorais:

Formatos disponíveis

getElementById() Method

Valor dos Parmetros

Necessrio. O atributo de Id o valor do elemento

<p id="teste">Clique para alterar o texto.</p>

<button onclick="myFunction()">Clica aqui</button>

document.getElementById("teste").innerHTML = "Funcionou :)";

<p id="teste">Clique para alterar o texto.</p>

<button onclick="myFunction()">Clica aqui</button>

document.getElementById("tags").innerHTML = "No funcionou :(";

<p id="teste">Apenas um de ns vai mudar.</p>

<p id="teste">Voc sabe quem ser?</p>

<p id="teste">Acho que serei eu.</p>

<p id="teste">No, serei eu, eu sou melhor.</p>

<p id="teste">Haha, idiotas.</p>

<button onclick="myFunction()">Clica para descobrir</button>

document.getElementById("teste").innerHTML = "HAHAHAHA losers";

var cor = document.getElementById("teste");

Valor dos Parmetros

Necessrio. O atributo nome o valor do elemento

<p id="teste">Clique para pegar o elemento.</p>

<button onclick="myFunction()">Clica aqui</button>

Você também pode gostar