Introdução Ao Javascript Parte 2

Olá! É a primeira vez que visitas o nosso blog? Subscreve o nosso RSS Feed para receberes notificações de novos artigos. Ou segue-nos no Twitter.

Tutorial Anterior > Introdução Ao Javascript Parte 1

Neste tutorial você vai aprender a acessar os elementos da página, criar e alterar a estrutura além do conteúdo e atributos.

documentElement

Muitas das alterações feitas na árvore do documento precisam percorrer o caminho até o elemento desejado. E para isso sempre partem do objeto document, que simboliza a raiz do código, a tag html ou se você estiver lidando com XML a tag que engloba todas as outras. A propriedade documentElement retorna este elemento.





var raiz = document.documentElement; // retorna  html

Acessando Os Nós

Você já sabe acessar um elemento baseado na tag e no id. Mas nem sempre temos estas informações ao nosso dispor. Isso não é problema se ao menos tivermos uma ideia da posição do elemento na árvore do documento.

Os elementos da página estão dispostos obedecendo a uma hierarquia. Existem o ancestral, os pais, filhos e irmãos.

Vamos trabalhar com este código HTML.





<div>

   <p>Frase um.</p>

    <p>Frase dois.</p>

    <p>Frase três.</p>

</div>

Vamos acessar os elementos baseados na hierarquia.





var div = document.getElementsByTagName('div')[0];



var primeiro = div.firstChild;

document.write(primeiro);



var segundo = primeiro.nextSibling;

document.write(segundo);



var ultimo = div.lastChild;

document.write(ultimo);



var terceiro = div.childNodes[2];

document.write(terceiro);



var ancestral = ultimo.parentNode;

document.write(ancestral);

Primeiro é acessado o elemento div que contém os parágrafos.
Com o firstChild é possível acessar o primeiro descendente desta div.
O nextSibling acessa o vizinho/irmão. Ou seja, um elemento que divide o mesmo antecessor que o atual.
Para atingir o último elemento existente dentro da div usamos o lastChild.
Outra forma de acessar os elementos é capturar todos com o childNodes e acessá-los numericamente, já que teremos uma array; iniciada sempre em 0.
Por fim, você pode saber que elemento é o ancestral/pai do atual através do parentNode.

Esta forma de acessar os elementos da página possui interpretações diferentes dependendo do navegador. O Firefox, por exemplo, conta enter e espaço com o um nó.

Por isso, como garantia, é melhor verificar o tipo do nó retornado. Elementos, o que exclui espaço em branco e afins, são do tipo 1.





var div = document.getElementsByTagName('div')[0];



if (div.firstChild.nodeType==1)

{

var primeiro = div.firstChild;

document.write(primeiro);

}

Se o primeiro nó retornado não for um elemento, o código não é executado.

Acessando Formulário

Para acessar os formulários da página, além de utilizar o getElementById() e getElementsByTagName() temos uma terceira alternativa mais direta. Os formulários existentes no documento são agrupados em uma array onde o primeiro formulário esta na posição zero e assim por diante. Então para selecionar o segundo formulário da página você pode escrever:





var segundoForm = document.forms[1];

Se preferir pode selecionar pelo nome do formulário:





var segundoForm = document.forms[‘nome’];

Consequentemente surge mais uma forma de selecionar os elementos dentro do formulário.





var primeiroCampo = segundoForm.elements[0];

A Propriedade innerHTML

Aprendemos uma outra forma de acessar os elementos da página, agora vamos recuperar o conteúdo deste elemento.

A propriedade innerHTML retorna o conteúdo do elemento especificado.





<body>



<p>Conteúdo do parágrafo.</p>



</body>



<script type="text/javascript">



var elemento = document.getElementsByTagName("p");

alert(elemento[0].innerHTML);



</script>

Como mostrado no tutorial anterior, o getElementsByTagName retorna uma array com os elementos especificados, por isso o colchetes e o número zero. Na linha seguinte, é mostrado um alert com o conteúdo do parágrafo recuperado pela innerHTML.

Agora, para alterar o conteúdo deste paragrafo, também podemos utilizar o innerHTML, inclusive adicionando tags HTML:





elemento[0].innerHTML = '<strong>Novo texto</strong>';

Inserção De Elementos

Ainda trabalhando com a árvore do documento, além de alterar o conteúdo dos elementos , é possível criar e remover esses elementos.

Com o método createElement() é possível adicionar elementos na página. Para colocar texto dentro deste elemento temos o createTextNode(). E finalmente para unir os dois utilizamos o appenChild().





var paragrafo = document.createElement('p');

var texto = document.createTextNode('Texto do parágrafo');

paragrafo.appendChild(texto);

document.body.appendChild(paragrafo);

Na primeira linha é criado o elemento. Veja que é preciso sempre utilizar o objeto document para a criação. Na linha seguinte outra variável recebe o texto do parágrafo. Na terceira, este texto é anexado ao parágrafo e na última linha isso é acrescentado à arvore do documento. Veja que mais uma vez o objeto document, pois ele que oferece acesso à estrutura HTML. O body representa a tag do mesmo nome.

Se ao invés de anexar ao corpo da página a intenção for inserir dentro de uma div, o mesmo procedimento deve ser feito, criando o elemento e anexando ao body para em seguida inserir o parágrafo com o texto.

Apesar de ser organizado e seguir uma lógica simples, adicionar elementos desta maneira é bastante trabalhoso. Por isso, você pode usar uma alternativa que reduz as linhas do código de quatro para uma.





document.body.innerHTML = '<p>Texto do parágrafo </p>';

Incrivelmente mais simples, não? Na estrutura do documento, dentro da tag body é inserido o HTML completo de uma só vez graças a propriedade innerHTML.

Claro que é importante você saber os métodos acima já que nem sempre é possível utilizar o innerHTML.

O appendChild() sempre insere o elemento depois. Até por isso traduzindo, chama-se anexar criança/descendente. Para anexar conteúdo antes de um determinado elemento, entra em ação o método insertBefore().

Para anexar outro antes do parágrafo inserido acima o código fica:





var p = document.getElementsByTagName('p')[0];

var novoP = document.createElement('p');

novoP.innerHTML = 'Novo texto';

document.body.insertBefore(novoP, p);

É selecionado o primeiro parágrafo da árvore; um novo parágrafo é criado e um texto inserido nele. O insertBefore() aceita dois parâmetros, o novo elemento a ser inserido e antes de qual ele será. E antes do método sempre informar em que posição na árvore do documento irá ocorrer esta modificação.

Remoção E Substituição De Elementos

Se você pode criar, você pode destruir. Para isso existe o removeChild().

Para remover o parágrafo inserido no código anterior:





var p = document.getElementsByTagName('p')[0];

document.body.removeChild(p);

Com o getElementsByTagName() é retornada uma array contendo todos os parágrafos do documento. E na mesma linha já informamos que a variável receberá o primeiro que for encontrado. Em seguida ele é removido da árvore do documento com o removeChild().

Se ao invés de simplesmente apagar o elemento queremos colocar outro no lugar, podemos utilizar o método replaceChild(). Ele requer dois parâmetros, o novo elemento e o que será substituído.





document.body.innerHTML = '<p>Texto do parágrafo</p>';

var p = document.getElementsByTagName('p')[0];

var div = document.createElement('div');

div.innerHTML = '<span>Outro texto.</span>';

document.body.replaceChild(div, p);

No código da página é inserido um texto; esse parágrafo é selecionado; uma div é criada; e preenchida por outro texto. Ocorre então a alteração. Dentro do corpo do documento a div criada substitui o elemento de parágrafo.

Trabalhando Com Atributos

Todo elemento HTML possui atributos que definem na maioria das vezes a aparência de cada um. E assim como podemos criar e remover elementos da página, podemos modificar seus atributos com o javascript.

O método para saber o valor de determinado atributo é o getAttribute().





document.body.innerHTML = '<p id="primeiro">Texto do parágrafo</p>';

var p = document.getElementsByTagName('p')[0];



var id = p.getAttribute('id');

document.write(id);

Inserimos um parágrafo dentro do corpo da página com um id atribuído. Este elemento é acessado e guardado em uma variável. É nesta variável que procuramos o ‘id’ com o getAttribute(). E temos como resultado ‘primeiro’.

Para alterar o valor deste atributo ou adicionar outro, utilizamos o setAttribute(). Neste método é preciso informar o nome do atributo e o valor que ele recebe.





p.setAttribute('id', 'segundo');

Agora o parágrafo que tinha como valor do id ‘primeiro’ tem o valor ‘segundo’. Caso o elemento ainda não possuísse um id, ele passaria a ter. Pois além de alterar valores, o setAttribute() cria.

Pois bem. Podemos acessar e alterar os atributos, não poderia faltar a opção de excluir. O removeAttribute() somente precisa do nome do atributo.





p.removeAttribute('id');

Se o elemento não possuir este atributo, o código retorna erro, então antes de remover, você pode utilizar o getAttribute() para saber se o elemento possui o atributo e desta maneira ter uma garantia contra erros.

O efeito rollover, quando a imagem muda ao receber a seta do mouse, trabalha recebendo o valor do atributo ‘src’ da imagem e substituindo pelo endereço de outra imagem.