Manipular elementos html com JavaScript DOM
Pietro Gaião | julho 4th, 2009 | JavaScript | 4 Comments »
Sempre que navego pela Internet me esbarro com uma grande quantidade de informativos falando sobre manipulação de um elemento usando JavaScript DOM. Só que em muitos casos ensinam a selecionar apenas pelo ID.
Pois bem, vou mostrar agora 4 formas de manipular o html.
Podemos manipular selecionando por:
- ID
- Nome da Classe
- Pelo Atributo
- Pela Tag
Selecionando elementos pelo ID
A forma mais simples de selecionar um elemento é pelo ID. Usamos o método document.getElementById( ).
Sintaxe:
var elemento = document.getElementById("id_do_elemento");
Exemplo:
<html>
<head>
<title>Pietro Gaião</title>
<script type="text/javascript">
function alerta(){
var preco = document.getElementById('preco');
alert(preco.innerHTML)
}
</script>
</head>
<body>
<span id="preco">R$ 1500,00</span>
<br><a href="#" onClick="alerta()">Alert com o valor acima.</a>
</body>
</html>
Simples, não?!
Seleção por nome de classe
E se você quiser selecionar um elemento que NÃO TEM UM ID? Para selecionar pelo nome da classe temos que selecionar todos os elementos, usar um loop e só depois o elemento que desejamos.
Exemplo:
Se quiser selecionar um elemento com a classe “preco”, primeiro criamos a variável “todos_elementos” e depois selecionamos todos os elementos “(‘*’)”.
<html>
<head>
<title>Pietro Gaião</title>
<script type="text/javascript">
function alerta(nomeClass){
var todos_elementos = document.getElementsByTagName('*');
var precos = Array();
for (i=0; i<todos_elementos.length; i++){
var el = todos_elementos[i];
if (el.className == nomeClass){
precos.push(el.innerHTML);
}
}
alert(precos)
}
</script>
</head>
<body>
<span class="preco">R$ 1500,00</span>
<a href="#" onClick="alerta('preco')">Alert com o valor acima.</a>
</body>
</html>
O código acima pega todos os elementos com a classe “preco” e joga dentro de um outro Array, “precos”.
Selecionar pelo atributo
Usamos o mesmo método que o anterior.
<html>
<head>
<title>Pietro Gaião - Tutorial</title>
<script type="text/javascript">
function ahref(){
var links = document.getElementsByTagName('a');
for (var i=0; i<links.length; i++){
var link_a = links[i];
var rel = link_a.getAttribute('href');
alert(rel);
}
}
</script>
</head>
<body>
<a href="linkteste.html">Somente mais um texto</a><br /><br />
<button onClick="ahref();">Mostrar o valor do href</button>
</body>
</html>
Selecionar pela tag
Esse é mais simples.
document.getElementsByTagName()
Exemplo:
Vamos selecionar o segudo elemento <span> da página:
<html>
<head>
<title>Pietro Gaião</title>
<script type="text/javascript">
function alerta(){
var selectTag = document.getElementsByTagName('span')[1];
alert(selectTag.innerHTML)
}
</script>
</head>
<body>
<span>R$ 1500,00</span><br>
<span>R$ 1800,00</span>
<br><a href="#" onClick="alerta()">Alert com o valor acima.</a>
</body>
</html>
Observe que ao selecionar o elemento com o método “document.getElementsByTagName(‘span’)[1];”, eu passei a informação [1], ela que seta a posição da minha tag.
Bom, é isso aí, procurei ser o mais objetivo possível.
Os exemplos estão completos e montados, para facilitar ainda mais o aprendizado.
Abraços a todos.
Popularity: 28% [?]
como que muda uma posiçao de imagem com o javascript tipo quero pegar via php do mysql e adicionar uma variavel js que pega da variavel php e atribui a minha imagem.
Perfeito! Me ajudou muito bro… Parabéns, muito bem explicado e escrito! Já esta nos favoritos!
Ótimo ‘post’ velho, Parabés.
[...] Manipular elementos html com JavaScript DOM AKPC_IDS += "434,";Popularity: 12% [?] [...]