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.
Frase um.
Frase dois.
Frase três.
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.
Conteúdo do parágrafo.
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 = 'Novo texto';
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 = '
Texto do parágrafo
';
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 = '
Texto do parágrafo
';
var p = document.getElementsByTagName('p')[0];
var div = document.createElement('div');
div.innerHTML = 'Outro texto.';
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 = '
Texto do parágrafo
';
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.
Conclusão
Agora você tem o conhecimento para controlar toda a estrutura das páginas e com isso criar códigos mais conscientes e não-obstrutivos.
Próximo Tutorial > Introdução Ao Javascript Parte 3
