Javascript >> O elemento “document”

Em javascript possuímos um elemento muito importante, o “document”, este elemento é como se fosse a página HTML em que o código javascript esta sendo executado, a partir dele temos acesso a todos os demais elementos da página e outras funcionalidades.

No elemento document possuímos a propriedade document.location.href, esta propriedade guarda a url da página atual, através dela também podemos fazer com que o navegador do usuário chame outra página, conforme o exemplo abaixo:

<script> document.location.href = “http://www.google.com/”; </script>

Um dos principais aspectos do elemento “document” é o seu método “getElementById()”, com este método podemos referenciar qualquer elemento HTML de uma página através de seu ID. Uma vês que conseguimos “pegar” um elemento HTML através do método “getElementById()” podemos realizar diversas operações com o mesmo, como por exemplo: alterar sua formatação, alterar seu conteúdo, move-lo pela tela e etc...

Suponha que você possua uma página onde exista o seguinte elemento:

<div id=’MinhaDiv’>Boooooo</div>

Note que este elemento possui a propriedade id, esta propriedade é importantíssima para que possamos referenciar o elemento posteriormente com o javascript.

Suponha que nos seja solicitado imprimir numa janela de alerta o conteúdo da div em questão, para tal seria necessário executar o seguinte código:

<script>
alert(document.getElementById(‘MinhaDiv’).innerHTML);
</script>

Onde:
“alert();” é a função javascript utilizada para exibir uma janela com uma mensagem
“document.getElementById()” é o método utilizado para se recuperar um elemento HTML da página
“.innerHTML” é a propriedade existente em todos elementos HTML que guarda o seu conteúdo

Ainda no elemento document possuímos outro método importante, o método “.write()”. Este método é utilizado para se escrever no HTML da página alguma coisa, por exemplo, ao fazer:

Ola <script>document.write(“<b>João</b>”);</script>

Teríamos como resultado escrito em nossa página a frase “Ola João” onde João estaria em negrito devido as tags <b> e </b> que foram escritas no código HTML da página.

Veja abaixo uma listagem contendo os principais casos de uso do elemento document.

Acessa a classe css de um elemento (mais informações no capítulo Css e Javascript ):
document.getElementById("_____").className
Acessa a propriedades css específicas de um elemento (mais informações no capítulo Css e Javascript ):
document.getElementById("_____").style.______
Acessa o conteúdo de um elemento html:
document.getElementById("_____").innerHTML
Acessa o endereço de uma imagem em um elemento <img>:
document.getElementById("_____").src
Acessa o endereço da página atual:
document.location.href
Escreve algo no código html:
document.write("__________")