Duvidas Sobre Comandos ...

[Tavinho]

Olá galera !!

Tenho visto muitos scripts que se utilizam de 2 elementos (propriedades?), mas não consegui compreende-los, será que alguém poderia me dizer, qual a função deles e me dar um exemplo prático disso, pra que eu posso estudar e aprender a trabalhar com eles ???

Os comandos são :

document.getElementById

e

inner.html

Desde já agradeço a atenção e aguardo uma resposta de vocês ....

Um abraço

E FELIZ 2005

falou !!!

[Fernando_Arruda]

Tavinho,

não imagino o q seja getElementById mas innerHTML se refere à parte escrita (em html, ou seja, não só o texto) de um objeto.

Como exemplo eu vou sitar um simples script para escrever algo em qualquer lugar do documento (para o IE, já o netscape tem q ser de outra forma):

<div id="div1"></div>
<script>
document.all("div1").innerHTML= "<tags> ou Texto a escrever";
</script>

Assim você pode acessar ou modificar o conteúdo de uma "área" de seu site delimitada por <div></div>.

[Crystian]

Completando o que o Fernando já explicou, o getElementById() como o próprio nome diz, serve para pegar um elemento pelo ID. Então utilizando o exemplo que o fernando passou, ao invés de utilizar all(que é um método que funciona somente no IE) utilizaremos o document.getElementById()

<div id="div1"></div>

<script>

document.getElementById("div1").innerHTML= "<tags> ou Texto a escrever";

</script>

o getElementById() é sempre usado com o document.

Entendeu os dois?

[Tavinho]

HEHEHE

Ainda fiquei meio confuso pra ser honesto ...

Qual a vantagem de se utilizar o document.getElementbyId ??

Qual seria a diferença entre :

<script>

document.getElementById("div1").innerHTML= "<tags> ou Texto a escrever";

</script>

e

<div id="div1">Texto a escrever</div>

Isso que esta me confundindo ...

Os dois códigos, não servem pra fazer uma "referencia" ao objeto (div) ??

Se puder postar um exemplo simples mesmo de como se usa, acho que entenderei de uma forma mais clara ...

Desculpe a ignorancia ...

Um abraço

falou !!!

[Illidan]

Bom, getElementById() e innerHTML são duas coisas diferentes. O primeiro é um método (ou seja, uma função), enquanto o segundo é uma propriedade (ou seja, uma variável) de qualquer tag HTML.

O getElementById() serve pra rastrear uma tag no código HTML com um determinado ID. Pelo certo, só deve haver uma tag com o mesmo ID em toda a página.

O innerHTML vai retornar o conteúdo interno da tag HTML que foi rastreada: <tag> conteúdo </tag> (retorna "conteúdo")

Então, neste exemplo:

<div id="nome">

    <b>José Alfredo</b>

</div>

<script type="text/javascript">

    objeto = document.getElementById("nome");

    conteudo = objeto.innerHTML;

    document.write(conteudo); // vai imprimir "<b>José Alfredo</b>"

</script>

Entendeu? você poderia ainda mudar dinamicamente o conteúdo da tag <div> nesse exemplo, da seguinte forma:

document.getElementById("nome").innerHTML = "novo conteúdo";

Qualquer dúvida, posta aí...

Abraços!

[Crystian]

Isso mesmo Illidan, só complementando esse tipo de variações que essas duas propriedades nos dão, é muito importante, pois podemos dar dinamismo a objetos estaticos e muitas vezes "não físicos"(que não estão no código) e com isso nós podemos mudar e mudar e mudar nossos códigos e torna-los cada vez melhor. E a melhor coisa disso tudo é q as duas coisas que você tah falando, método getElementById e propriedade innerHTML são suportadas pelos principais browsers.

Faça bom uso...

Abraço

Crystian

[Fernando_Arruda]

Primeiramente obrigado, eu realmente não sabia como utilizar a função getElementById(). Gostaria de reforçar q há uma disvantagem em usar o document.all pois só é aceitado no IE, assim como document.layer não é aceito pelo IE.

Só pra complementar, gostaria de expor um exemplo bem funcional combinando innerHTML, div e CSS. Trata-se de um quadro suspenso no site (muito usado para propagandas). Qualquer um que possui os conhecimentos desses elementos pode manipular facilmente esse exemplo.

<div id="quasus" style="position: absolute"></div>
<script>
document.getElementById("quasus").innerHTML= "Texto a escrever/modificar";
document.getElementById("quasus").style.pixelTop= 300;
document.getElementById("quasus").style.pixelLeft= 300; //Colocará o conteúdo de <div> no pixel 300 à direita da borda esquerda do navegador e à baixo da borda inferior das barras de ferramentas
</script>

Pode-se combinar também métodos como document.getElementById("quasus").style.visibility ou display.

Espero que tenha sido útil.

[Tavinho]

Valeu a todos !!!