Java Script

JavaScript DOM: introduo API
Veja neste artigo a histria, caractersticas, formao, e os

scripts que manipulam elementos HTML, podendo ser feitos
com JavaScript, onde utilizado o modelo DOM como base
para seu desenvolvimento.
A linguagem JavaScript foi originalmente desenvolvida por Brendan Eich da Netscape com o nome
inicial de Mocha, modificado posteriormente para LiveScript e depois para JavaScript. A
nomenclatura LiveScript foi utilizada ainda no lanamento da linguagem, na verso beta do
navegador Netscape 2.0, mais precisamente em setembro de 1995, obtendo mudana de nome em
anncio conjunto com a Sun Microsystems, em dezembro do mesmo ano, quando foi implementada
no navegador Netscape verso 2.0B3.
A mutao do nome LiveScript para JavaScript se deu na mesma poca em que o Netscape
adicionou suporte a tecnologia Java em seu navegador (Applets). A escolha foi criticada por parecer
uma estratgia de marketing da Netscape em se aproveitar da popularidade do recm-lanado Java.
No demorou muito para a linguagem JavaScript ser aceita de forma ampla como linguagem de
script cliente-side de pginas web. Por isso, a Microsoft lanou um dialeto compatvel com a
linguagem de nome JScript para evitar problemas de trademark. JScript inovou mtodos para
aperfeioar mtodos do JavaScript relacionados a data que apresentavam problemas. O JavaScript e
Jscript so to similares que os dois termos so comumente usados de forma intercambivel.
A Netscape anunciou, em novembro de 1996, que tinha havia submetido JavaScript para Ecma
internacional como um candidato a um padro industrial. O resultado do trabalho posteriormente foi
a verso padronizada, intitulada ECMAScript.
Desde ento, o JavaScript tem se transformado na linguagem de programao mais popular da web.
Inicialmente, muitos profissionais denegriram a linguagem, pois a mesma tinha como alvo principal
o pblico leigo. Com o advento do Ajax, JavaScript teve sua popularidade de volta e recebeu mais
ateno profissional. Com isso, a proliferao de frameworks e bibliotecas, prticas de programao
aperfeioadas, aumento no uso do JavaScript fora do ambiente comum dos navegadores e uso de
plataformas JavaScript server-side se tornou notria.
O projeto CommonJS foi fundado em janeiro de 2009, seu objetivo era especificar uma biblioteca
padro para o desenvolvimento JavaScript fora do navegador.
JavaScript x Java
pouco provvel que algum programador que esteja iniciando seus estudos sobre as linguagens da
web no tenha se deparado com essa dvida: o JavaScript tem o mesmo objetivo do que o Java?
No primeiro momento muitos acham que sim, por suas semelhanas no nome e por serem
linguagens web. Observe algumas distines que mostram que essas duas linguagens no tem nada
em comum.
JavaScript
Linguagem de scripting sem necessidade de compilao;
Cdigo integrado no HTML;
Interaes e efeitos nas pginas;
Falta de confidencialidade do cdigo;
Linguagem simples.
Java
Linguagem de programao compilados na JVM;
Independente de plataforma;
Fortemente tipada;
Linguagem mais complexa;
Segurana no cdigo.
Colocando JavaScript em uma pgina web

A primeira coisa a ser feita deixar que o navegador web saiba que ser informado algum tipo de
script ao invs do HTML, onde a tag <script> entra. Essa tag colocada dentro das tags <head>
ou <body> de um documento HTML, a mesma pode ser inserida em vrios scripts dentro da mesma
pgina ou apenas sendo chamada em arquivos externos com a extenso .js. A opo de fazer uma
chamada JavaScript para o arquivo uma boa prtica, pois funciona como um repositrio contendo
todos os scripts guardados em um lugar e o programador pode aproveitar os cdigos em outras
pginas, sem precisar repetir o cdigo, apenas fazendo a chamada desse arquivo.
Nos exemplos mostrados nesse artigo foram criados arquivos.html e usado o programa Notepad++
para elaborao do cdigo.
Na Listagem 1 mostramos o cdigo simples de mensagem de boas vindas para o usurio.
Listagem 1. Cdigo de Boas vindas
<!DOCTYPE html>
<html>
<head>
<title>Script Boas Vindas</title>
<script type="text/JavaScript">
alert("Seja Bem vindo! ");
</script>
</head>
<body>
Corpo do Html
</body>
</html>
Interatividade com o usurio atravs dos eventos

Os eventos so mecanismos que se comunicam com as aes que o usurio executa em um
determinado documento HTML, de onde provm alguma interatividade. Tambm pode ser pensado
que os eventos so notificaes JavaScript que permitem saber quando alguma ao aconteceu. O
objetivo dos eventos responder os acontecimentos de uma pgina web com o cdigo JavaScript.
Vejamos a lista dos principais eventos que essa linguagem possui:
onBlur: ativado quando o usurio retira o foco da aplicao de um elemento da pgina. O
foco da aplicao o lugar onde est o cursor.
onChange: Muda o estado de um elemento de formulrio, s vezes no se produz at que o
usurio retire o foco da aplicao do elemento.
onClick: Quando clicado no boto do mouse sobre um elemento da pgina, geralmente um
boto ou um link.
onFocus: Quando um elemento da pgina ou a janela recebe o foco da aplicao. Contrrio
do evento onblur.
onKeydown: Gerado no instante que um usurio pressiona uma tecla, independentemente
de solt-la ou no. A produo acontece no momento do clique.
onKeypress: Resultado de uma tecla clicada por um tempo especfico. Antes disso, produz-
se um onekeydown no momento que se pressiona a tecla.
onKeyup: Produzido quando o usurio deixa de apertar uma tecla, ou seja, no momento que
libera a tecla.
onLoad: Quando a pgina e as imagens terminarem de carregar.
onMousedown: Quando o usurio clica sobre um elemento da pgina, produzindo no
momento do clique do boto, independente de estar solto ou no.
onMousemove: Produz-se quando o mouse se move pela pgina.
onMouseout: Ocorre com a retirada da seta do mouse da rea ocupada um elemento da
pgina.
onMouseover: Quando a seta do mouse entra na rea ocupada por um elemento da pgina.
onMouseup: Resulta do momento que o usurio solta o boto do mouse, que previamente
havia clicado.
onMove: Ocorre com o movimento da janela do navegador ou um frame.
onResize: Quando a janela do navegador redimensionada, ou o frame, no caso de que a
pgina os tenha.
onReset: Ocorre quando um usurio clica no boto de reset de um formulrio.
onSelect: Executa quando um usurio realiza uma seleo de um elemento de um
formulrio.
onSubmit: Quando o boto do tipo submit envia algum formulrio. executado antes do
envio do formulrio.
Na Listagem 2 apresentado como trabalhar com alguns eventos citados acima.
Listagem 2. Trabalhando com eventos
<!DOCTYPE html>
<html>
<head>
<title>Calculadora interactiva</title>
<script language="JavaScript">
function calculaResultado(form) {
form.resultados.value = eval(form.entrada.value);
}
function expressaoMatematica(form) {
form.entrada.blur();
form.entrada.value = prompt("Insira uma expresso
matemtica. Ex: 2 + 2","");
calculaResultado(form);
}
function limparCampos(){
var entradaValor =
document.getElementById("entrada").value;
var resultadoValor =
document.getElementById("resultados").value;
//Passa o valor do campo para vazio

entradaValor = "";
resultadoValor = "";
}
</script>
</head>
<body>
<h1>Calcula expresso matemtica</h1>
<form method="post" onsubmit="limparCampos()">
Calculadora:<input type="text" name="entrada" value=""
onFocus="expressaoMatematica(this.form)">
<br>Resultado:<input type="text" name="resultados"
value="" onFocus="this.blur()">
<input type="submit" value="LimparCampos">
</form>
</body>
</html>
Na Listagem 3 mostrado o evento verificando as coordenadas do mouse.

Listagem 3. Verificando coordenadas do mouse
<html>
<head>
<title>Cordenadas do Mouse via JavaScript</title>
<script>
function coordenadas(evento) {
var x;
var y;
if (window.event){//Forma de se pegar as
coordenadas no Internet Explorer ou Google Chrome
x =
window.event.clientX;
y =
window.event.clientY;
}else{//Forma de se pegar as coordenadas no
Firefox ou Google Chrome
x = evento.clientX;
y = evento.clientY;
}
document.getElementById("coordenadas").inne
rHTML = "Cordenadas atual do mouse: " + x + ", " + y;
}
document.onmousemove = coordenadas;
</script>
</head>
<body>
<div id="coordenadas"></div>
</body>
</html>
A seguir realizado um script que faz a interao com o usurio atravs de imagens, funes e
textos de apresentao. Portanto, para ser gerada alguma ao, os seguintes passos tero que ser
pensados nesse cenrio, como:
1. Saber quando a pgina termina de carregar.
2. Saber como exibir a ao para que o usurio consiga visualiz-la.
O primeiro item envolve a reposta de um evento, provavelmente um que seja executado ao carregar
a pgina. O segundo item envolve usar um recurso JavaScript predefinido.
Na Listagem 3 realiza-se a chamada de uma funo desenvolvida, que faz uma saudao para o
usurio com o texto que for digitado.
Na Listagem 4 realizada uma interao com o usurio.
Listagem 4. Cdigo de interao com o usurio
<!DOCTYPE html>
<html>
<head>
<title>Interagindo com o usurio</title>
function olaSmile(){
var nomeUsuario = prompt("Qual
o seu nome?", "Digite aqui");
if(nomeUsuario){
alert('Prazer em
conhecer voc, '+nomeUsuario);
document.getElement
ById("idImgFeliz").src = "feliz.jpg"
}
}
</script>
</head>
<body onload="alert('Ol usurio, clique na imagem para fazer a
interao!');">
<div style="margin-top:100px; text-align:center">
<img id="idImgFeliz" SRC="infeliz.jpg"
alt="infeliz" onClick="olaSmile()" style="cursor:pointer"/>
</div>
</body>
</html>
Criando Funes Inteligentes

As funes so pequenos trechos de cdigos que permitem tornar os mesmos reutilizveis e mais
eficientes, ou seja, transformam grandes problemas em pequenos. Os objetivos em se ter funes
em um programa so: divises de tarefas, organizao do cdigo e solues de problemas. Possuir
funes nos cdigos uma forma inteligente de fazer sistemas, pois deixam o script mais simples e
organizado. Geralmente se uma funo quando for necessrio fazer chamadas de eventos ou quando
submeter uma pgina.
Veja no cdigo da Listagem 5 um exemplo de manipulao do componente HTML conhecido
como dual list, mostrando como selecionar um ou mais itens.
Listagem 5. Selecionando um ou mais itens
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Transfere itens - Dual List</title>
</head>
<script>
var strDes;
var strRem;
function onMoveItem(objRemetente, tdRemetente, objDestino,

tdDestino){
var totalRem;
var totalDes;
var strtemp
var strValor;
strDes = "<SELECT id='" + objDestino.id + "' style='WIDTH: 130px;

height: 100px' name='" + objDestino.id + "' multiple='multiple'
onchange='setaValor(this.id);' height='200px'>";
strRem = "<SELECT id='" + objRemetente.id + "' style='WIDTH:
130px; height: 100px' name='" + objRemetente.id + "' multiple='multiple'
onchange='setaValor(this.id);' height='200px'>";
totalRem = objRemetente.length;
totalDes = objDestino.length;
for (i=0; i < totalDes; i++){

strValor = objDestino.options[i].text;
strDes += "<option value='" + strValor + "'>" +
strValor + "</option>";
}
for (i=0; i < totalRem; i++){
strValor = objRemetente.options[i].text;
if (objRemetente.options[i].selected){
strDes += "<option value='" + strValor +
"'>" + strValor + "</option>"
}else{
strRem += "<option value='" + strValor +
"'>" + strValor + "</option>"
}
}
strDes += "</SELECT>";
strRem += "</SELECT>";
document.getElementById(tdDestino).innerHTML = strDes;
document.getElementById(tdRemetente).innerHTML = strRem;
sortSelect(document.getElementById(objRemetente.id), true);
sortSelect(document.getElementById(objDestino.id), true);
}
</script>
<body>
<table width="100%" border="0" style="margin:100 1 1 1">
<tr>
<td width="33%" align="center" >
</td>
<td width="34%">
<table width="100%" border="0">
<tr>
<td align="center"
id="tdFilhos">
<SELECT
id=cboFilhos style="WIDTH: 130px; height: 100px" name=cboFilhos
multiple="multiple">
<option value="0">RS</option>
<option value="1">SC</option>
<option value="2">SP</option>
<option value="3">RJ</option>
<option value="4">TO</option>
<option value="5">AM</option>
<option value="6">CE</option>
</SELEC
T>
</td>
<td valign="middle"
align="center">
<input
type="button" id="btnMoverDir" name="cboMoverDir" value=">>"
onClick="onMoveItem(cboFilhos, 'tdFilhos', cboFilhosSel,
'tdFilhosSel');"/><BR /><br />
<input
type="button" id="btnMoverEsq" name="cboMoverEsq" value="<<"
onClick="onMoveItem(cboFilhosSel, 'tdFilhosSel', cboFilhos, 'tdFilhos');"/>
</td>
<td align="center"
id="tdFilhosSel">
<SELECT
id=cboFilhosSel style="WIDTH: 130px; height: 100px" name=cboFilhosSel
multiple="multiple" height="200px">
</SELEC
T>
</td>
</tr>
</table>
</td>
<td width="33%">
</td>
</tr>
</table>
</body>
</html>
Na Listagem 6 vemos outro cdigo que fora o usurio inserir a informao correta, neste caso o
campo e-mail.
Listagem 6 . Validao do campo email.
<!DOCTYPE html>
<html>
<head>
<script>
function validaForm()
{
var x=document.forms["formValidacao"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

{
alert("E-mail no vlido, verifique!");
return false;
}else{
alert("Email vlido = "+x);
return true;
}
}
</script>
</head>
<body>
<form name="formValidacao" onsubmit="return validaForm();"
method="post">
Email: <input type="text" name="email">
<input type="submit" value="Validar Informao">
</form>
</body>
</html>
Na Listagem 7 brevemente demonstrado como o programador consegue fazer uma pequena

validao no formulrio HTML usando a linguagem JavaScript.
Listagem 7. Validao de campos.
<html>
<head>
<title>Script Validao de Campos</title>
function validaCampos(form) {
//Recupera o id do elemento
nome dentro do form
var nome =
document.getElementById("nome").value;
if (nome == "") {
alert("Digite algum
texto no campo!");
form.nome.focus();
return false;
}
//Recupera o id do elemento
idade dentro do form
var idade =
document.getElementById("idade").value;
if (idade == "" || !
validaNumero(idade)) {
alert("Digite
apenas nmeros!");
form.idade.focus();
return false;
}
//Verifica se foi selecionado

ou no
if (form.sexo[0].checked==false
&& form.sexo[1].checked==false) {
alert("Selecione o
sexo!");
return false;
}
}
//Funo que valida se o campo um nmero

function validaNumero(numero)
{
var ValidaChars = "0123456789";
var IsNumero=true;
var Char;
for (i = 0; i < numero.length &&

IsNumero == true; i++)
{
Char = numero.charAt(i);
if (ValidaChars.indexOf(Char)
== -1)
{
IsNumer
o = false;
}
}
return IsNumero;
}
</script>
</head>
<body>
<form name="formCad" onsubmit="return
validaCampos(formCad)">
Digite o nome:
<input id="nome" type="text" size="12"/>
<br />
Digite a idade:
<input id="idade" type="text" size="5"/>
<br />
Sexo: <input type="radio" name="sexo"
value="0"> Masculino
<input type="radio"
name="sexo" value="1"> Feminino
<br/><br/>
<input type="submit" value="Salvar">
</form>
</body>
</html>
Comportamentos e propriedades dos elementos via DOM

Existe um modelo de objeto genrico entre o HTML, XML e o JavaScript que ajuda na construo
de aplicaes ricas para web, conhecido como DOM (Document Object Model).
Por ser um padro da Web (W3C), os scripts gerados tm compatibilidade nos principais
navegadores, gerando um conforto maior para o desenvolvimento.
O DOM uma API independente de linguagem que facilita a manipulao da estrutura de um
documento e seus elementos de pginas HTML, XML, XHTML ou pginas JavaScript. Ajuda
tambm na customizao dos elementos de modo completo, possibilitando aos programas e scripts
acessarem e atualizarem dinamicamente o contedo e o estilo de um documento.
Nessa API existem dois mtodos que provavelmente so os mais usados na rea de
desenvolvimento listados abaixo:
document.getElementById(id) Retorna elemento a partir do valor de seu atributo ID. Por
boas prticas, todos os elementos html devem possuir a propriedade id para serem
manipulados pela API. Caso aconteam tentativas de acessos aos elementos que no
possuem id definidos, sempre ir retornar o valor nulo (null).
document.getElementByTagName(tag) Retorna um conjunto de elementos que so
definidos pela tag do elemento. Esse mtodo retorna um array contendo todos os elementos
na pgina, na ordem na qual aparecem no documento HTML.
Na Listagem 8 mostrado um exemplo do acesso por tag com o elemento getElementByTagName.
Listagem 8. getElementByName Function
<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
//Recupera os elementos que encontram-se no
documento
var x=document.getElementsByTagName("input");
alert("Resposta = "+x.length);
}
</script>
</head>
<body>
<input type="text" size="20"><br>

<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="Clique e veja
quantos elementos inputs esto nessa pgina?">
</body>
</html>
Quando o modelo DOM representado em um documento HTML, a pgina pode ser representada
como uma hierarquia de elementos na forma de uma rvore (tree), ou seja, cada folha na rvore
representa um n (node), que se relaciona diretamente a cada elemento em uma pgina. Na hora que
um n aparece sob outro n na rvore construda uma hierarquia, nesse caso acaba sendo
considerado um filho desse n.
Cada n em uma rvore DOM classificado conforme seu tipo. Os principais tipos de n
basicamente so de elemento e texto.
Elemento Qualquer elemento HTML que corresponde a uma tag no cdigo HTML.
Texto O contedo do texto para um elemento, sempre armazenado como um n-filho sob
um elemento.
Na Figura 1 e Listagem 9 mostrado um exemplo de cdigo com a hierarquia dos elementos html
de modo grfico.
Figura 1. rvore DOM dos elementos html.
Listagem 9. Exemplo da estrutura da Figura 1.
<!DOCTYPE html>
<html>
<head>
<title>Ttulo da pgina</title>
</head>
<body>
<h1>
Pargrafo 1 da pgina
<h1>
<p>Pargrafo 1 da pgina <em>pedao do text node com
elemento em</em> volta para o elemento pargrafo</p>
<p>Pargrafo 2 da pgina</p>
</body>
</html>
Na Listagem 10 so mostrados quais os atributos do elemento HTML conhecido como div.

Atravs da propriedade innerHTML conseguido o acesso a todo o contedo armazenado no
elemento.
Listagem 10. Hierarquia do elemento div.
<html>
<head>
<title>Hieraquia do elemento div por JavaScript</title>
function listarAtributos(){
var elem = document.getElementById("conta");
var atributos = "";
for(var i = 0; i < elem.attributes.length; i++){

atributos += elem.attributes[i].nodeName + "<br>";
}
elem.innerHTML = atributos;
}
</script>
</head>
<body>
<div id="conta" style="border: 1px solid red">Aqui um elemento

DIV</div>
<button onclick="JavaScript:listarAtributos()">Listar atributos da

DIV</button>
</body>
</html>
A origem das interaes com o DOM tem como o objeto document, que um n superior na
rvore de ns de um documento. Esse objeto oferece dois mtodos que so o getElementById( ) e
getElementByTagName( ), ambos j mostrados em scripts anteriores.
A seguir so mostrados os mtodos que podem ser usados para percorrer o documento, bem como:
hasChildNodes - retorna true se o elemento possui filhos;
firstChild - retorna uma referncia ao primeiro elemento filho;
lastChild - retorna uma referncia ao ltimo elemento filho;
nextSibling - retorna uma referncia ao irmo posterior ao elemento;
previousSibling - retorna uma referncia ao irmo anterior ao elemento;
nodeName - retorna o nome da TAG do elemento (apenas para elementos n);
nodeValue - retorna o valor do elemento (apenas para elementos texto);
nodeType - retorna o tipo do elemento;
parentNode - retorna uma referncia ao elemento pai.
Essas propriedades so a chave para ser capaz de manipular a rvore de documentos para acessar
dados especficos do n.
Veja na Listagem 11 a recuperao das informaes sobre cada elemento no documento.
Listagem 11. Propriedades elementos DOM.
<html>
<head>
<title>
Propriedades da rvore DOM
</title>
<script>
//nossas variveis globais, que sero compartilhadas por todas as
nossa funes
var el;
var nome;
var tipo;
var valor;
function start()
{
el = document.documentElement; //pega o elemento HTML, raiz do
documento
nome = document.getElementById("nome"); //pega o elemento com o
id nome
tipo = document.getElementById("tipo"); //pega o elemento com o
id tipo
valor = document.getElementById("valor"); //pega o elemento com o
id valor
mostra();
}
function mostra() //exibe as informaes

{
nome.value = el.nodeName;
tipo.value = el.nodeType;
valor.value = el.nodeValue;
}
function restart() //retorna para o elemento raiz

{
el = document.documentElement;
mostra();
}
function primeiroFilho() // vai para o primeiro elemento filho

{
if(el.firstChild){
el = el.firstChild;
mostra();
}
else
alert("O Elemento no possui filhos !");
}
function ultimoFilho() // vai para o ltimo elemento filho

{
if(el.lastChild){
el = el.lastChild;
mostra();
}
else
alert("O Elemento no possui filhos !");
}
function obterPai() // volta para o elemento pai

{
if(el.parentNode){
el = el.parentNode;
mostra();
}
else
alert("O Elemento no possui Pai !");
}
function proximoIrmao() //vai para o irmo posterior

{
if(el.nextSibling){
el = el.nextSibling;
mostra();
}
else
alert("O Elemento no possui um prximo irmo !");
}
function irmaoAnterior() //vai para o irmo anterior

{
if(el.previousSibling){
el = el.previousSibling;
mostra();
}
else
alert("O Elemento no possui um irmo anterior !");
}
</script>
</head>
<body>
<form>
<fieldset>
<input type="button" name="next" value="Next Irmo"
onClick="proximoIrmao();" />
<input type="button" name="prev" value="Prev Irmo"
onClick="irmaoAnterior();" />
<input type="button" name="parent" value="Pai"
onClick="obterPai();" />
<input type="button" name="first" value="First Filho"
onClick="primeiroFilho();" />
<input type="button" name="last" value="Last Filho"
onClick="ultimoFilho();" />
<input type="button" name="reiniciar" value="Reiniciar"
onClick="restart();" />
<br/>
Valor :<input type="text" name="valor" id="valor" value=""
size="65" />
<br/>
Tipo : <input type="text" name="tipo" id="tipo" value="" />

<br/>
Nome do elemento:<input type="text" name="nome" id="nome" />

</fieldset>
</form>
</body>
</html>
<script language="JavaScript">
start();// inicia no elemento HTML, mas antes ele espera que todo o
documento esteja carregada
</script>
Com este artigo podemos concluir que o JavaScript a linguagem para quem deseja desenvolver
mais a lgica e saber como manipular elementos, pois capaz de se adaptar com outras linguagens
Web e frameworks, fechando uma boa parceria.
Publicado no Canal Front-end web
Guia JavaScript +
por Thiago Vincius

Front-end expert
Object1

Java Script

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Java Script

Enviado por

Direitos autorais:

Formatos disponíveis

JavaScript DOM: introduo API

Veja neste artigo a histria, caractersticas, formao, e os

Colocando JavaScript em uma pgina web

Interatividade com o usurio atravs dos eventos

//Passa o valor do campo para vazio

Na Listagem 3 mostrado o evento verificando as coordenadas do mouse.

Criando Funes Inteligentes

function onMoveItem(objRemetente, tdRemetente, objDestino,

strDes = "<SELECT id='" + objDestino.id + "' style='WIDTH: 130px;

for (i=0; i < totalDes; i++){

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

Na Listagem 7 brevemente demonstrado como o programador consegue fazer uma pequena

//Verifica se foi selecionado

//Funo que valida se o campo um nmero

for (i = 0; i < numero.length &&

Comportamentos e propriedades dos elementos via DOM

<input type="text" size="20"><br>

Na Listagem 10 so mostrados quais os atributos do elemento HTML conhecido como div.

for(var i = 0; i < elem.attributes.length; i++){

<div id="conta" style="border: 1px solid red">Aqui um elemento

<button onclick="JavaScript:listarAtributos()">Listar atributos da

function mostra() //exibe as informaes

function restart() //retorna para o elemento raiz

function primeiroFilho() // vai para o primeiro elemento filho

function ultimoFilho() // vai para o ltimo elemento filho

function obterPai() // volta para o elemento pai

function proximoIrmao() //vai para o irmo posterior

function irmaoAnterior() //vai para o irmo anterior

Tipo : <input type="text" name="tipo" id="tipo" value="" />

Nome do elemento:<input type="text" name="nome" id="nome" />

por Thiago Vincius

Você também pode gostar