Programação WEB I DOM (Document Object Manager)

Transcrição

1 Programação WEB I DOM (Document Object Manager)

2 DOM Significa Modelo de Objetos de Documentos e tem por finalidade descrever e padronizar os objetos e seus relacionamentos em uma aplicação. Tem a finalidade de auxiliar o desenvolvimento de aplicações de natureza geral. O DOM pode ser definido também como uma representação da estrutura HTML do documento. Essa representação é apresentada em forma de árvore.

3 DOM

4 Para ter acesso aos itens presentes no documento, estes itens devem ter sido carregados antes de serem chamados. Por isso é importante a utilização do seguinte código: <script type= text/javascript > window.onload = function () { // A função só é chamada ao carregar tudo do documento. function um() { alert( Um ); function dois(){ alert( Dois );

5 Propriedade alinkcolor bgcolor classes Form ids Image images array lastmodified Link links array location referrer title Descrição Cor dos links ativos Cor de fundo Acessar as classes CSS Formulário da página. Acessa pelo nome Ids do CSS Imagem da página. Acessa pelo nome Cada uma das imagens da página no array Data da última modificação Um link da página. Acessa pelo nome Um array com cada um dos links da página. A URL do documento que se está visualizando. A página de onde vem o usuário Título da página

6 document.title Altera ou retorna o Título do documento Document.title = Testando ; document.bgcolor Altera ou retorna a Cor de fundo do documento document.bgcolor= #000FF ;

7

8 document.getelementbyid() Acessa o elemento cujo ID foi definido e retorna uma referência ao elemento. window.onload = function(){ var teste = document.getelementbyid( tipo ); <body> <h2 id= tipo >Tipos de Acesso ao DOM</h2>

9 element.style A propriedade style permite que sejam definidas regras de estilo a serem aplicadas nos elementos. Sintaxe: Elemento.style.propriedade = valor da propriedade ; Na sintaxe Javascript as propriedades css compostas por duas palavras separadas por hífen devem ser escritas em camelcase. background-color = backgroundcolor Z-index = zindex text-ident = textident border-top-width = bordertopwidth padding-left = paddingleft

10 window.onload = function(){ var teste = document.getelementbyid( tipo ); teste.style.backgroundcolor = #00FF00 ; teste.style.border= 2px solid #0000FF ; <body> <h2 id= tipo >Tipos de Acesso ao DOM</h2>

11 document.getelementsbytagname() Acessa todos os elementos do DOM do tipo definido no parâmetro tag e retorna um array cujos itens fazem referência aos elementos desse tipo, na ordem em que aparecem na marcação. window.onload = function(){ var teste = document.getelementsbytagname( h2 ); <body> <h2 id= tipo >Tipos de Acesso ao DOM</h2> <h2>teste 2</h2> <h2>teste 3</h2>

12 window.onload = function(){ var teste = document.getelementsbytagname( h2 ); teste[0].style.backgroundcolor = red ; teste[1].style.backgroundcolor= green ; <body> <h2 id= tipo >Tipos de Acesso ao DOM</h2> <h2>teste 2</h2> <h2>teste 3</h2>

13 document.getelementsbyname() Acessa todos os elementos cujo atributo name tenha sido definido no parâmetro window.onload = function(){ var teste = document.getelementsbyname( teste ); <body> <input name= teste /> <a name= teste />

14 document.getelementsbyname() Acessa todos os elementos cujo atributo name tenha sido definido no parâmetro window.onload = function(){ var teste = document.getelementsname( teste ); teste[0].style.backgroundcolor = red ; <body> <input name= teste /> <a name= teste />

15 innerhtml Permite que se inspecione ou se defina o conteúdo HTML de um elemento do DOM. window.onload = function(){ var mensg = document.getelementbyid( msg ); var parag = document.getelementsbytagname( p ); parag[0].innerhtml = Mudando o Parágrafo ; mensg.innerhtml= <h2>testando</h2> ; <body> <div id= mensg ></div> <p>texto!</p>

16 Links Document.links Retorna uma coleção com todos os links presentes no documento que tenham o atributo href. Document.links.length // Retorna a quantidade de links em uma página.

17 Links <html> <head> <script type="text/javascript"> function mudarendereco(){ var link = document.links[0]; link.href=" </script> </head> <body> <a id="x" href=" onclick="mudarendereco()"> Mudar endereço </a> </body> </html>

18 Document.forms Retorna uma coleção com todos os formulários presentes no documento. Document.forms.length // Retorna a quantidade de formulários em uma página.

19 Document.images Retorna uma coleção com todos os formulários presentes no documento. Document.images.length // Retorna a quantidade de imagens em uma página.

20 As Imagens são objetos por si só, portanto é possível criar novas instâncias de um image usando o construtor new. Var imagem = new image(); Imagem.src = imagem01.jpg ; Imagem.width = 350px ;

21 Construa um slideshow de imagens, em que se possa avançar e retornar imagens.

22 Eventos window.onload = function(){ var mensg = document.getelementbyid( msg ); var texto = document.getelementbyid( texto ); mensg.onclick = function(){ texto.innerhtml = Teste ; <body> <input type= button id= msg value= Clique Aqui /> <p id= texto >Texto!</p>

23 Recuperando Itens de um Formulário Como acessar um formulário: Nome (atributo NAME) Array de formulários <form name="formulario1"> <input type=text name=campo1> <input type=text name=campo2> </form> document.formulario1 document.forms[0]

24 Recuperando Itens de um Formulário Como acessar elementos do formulário: Nome (atributo NAME) Array de elementos <form name="formulario1"> <input type=text name=campo1> <input type=text name=campo2> </form> document.formulario1.campo1 document.formulario1.elements[0] document.formulario1.campo2 document.formulario1.elements[1] var variavel = document.formulario1.elemento1.value

25 Implemente o código de uma calculadora, porém agora utilizando o objeto documento e suas formas de acesso aos itens do documento. Siga a Interface mostrada abaixo e utilize funções para realizar as ações solicitadas.

26 Adicionando Linhas em uma Tabela window.onload = function(){ var tabela = document.getelementbyid("tabela"); var linha = tabela.insertrow(-1); //Insere uma linha como última. var col1 = linha.insertcell(0); //Insere uma Coluna var col2 = linha.insertcell(1); //Insere outra Coluna col1.innerhtml = "Valor 1"; col2.innerhtml = "Valor 2";

27 Excluindo Linhas em uma Tabela document.getelementbyid( tabela").deleterow(0); 0 pode ser substituído pelo número da linha que se quer deletar.

28 Implemente o código que recebe dois valores vindos de campos de um formulário e acrescentem esse valor em uma tabela.

29 createelement Cria um elemento appendchild Acresce um filho a um elemento //1º - Referencia o elemento onde deseja-se criar var conteudo = document.getelementbyid("box"); // 2º - Define nova tag a ser criada var newelement = document.createelement( h1 ); // 3º - Cria o elemento texto newelement.appendchild(document.createtextnode( Elemento criado")); // 4º - Inclui novo elemento conteudo.appendchild(newelement);

30 insertbefore appendchild insere o objeto sempre como o último filho (child) de um elemeto pai (parent) insertbefore insere um elemento em um local específico // 1º var newelement = document.createelement(what); // 2º newelement.appendchild(document.createtextnode("título do parágrafo")); // 3º var referencia = document.getelementbyid("paragrafo"); // 4º var parenttag = referencia.parentnode; // 5º parenttag.insertbefore(newelement, referencia);

31 setattribute Declara ou altera Atributos de elementos var input = document.createelement('input'); input.setattribute('type', 'text'); input.setattribute('name', Teste ); input.setattribute('id', 'new_input ); input.setattribute('value', '');

32 Criando Elementos function criar(){ //onde o elemento será adicionado pai = document.getelementbyid("corpo"); //definimos qual elemento queremos criar elem = document.createelement("h1"); //Definimos o texto do elemento. txt = document.createtextnode("texto criado dinamicamente "+pai.childnodes.length); //adicionamos o texto no elemento elem.appendchild(txt); //adicionamos o elemento com o texto na div corpo pai.appendchild(elem);

33 Excluindo Elementos function deletar(){ //se não existir elementos h1 ele não faz nada. if (pai.childnodes.length!= 0){ //de onde o elemento será deletado pai = document.getelementbyid("corpo"); //como o elemento h1 é filho do elemento corpo usamos o childnodes[x] //para deletarmos. elem = pai.childnodes[pai.childnodes.length-1]; //remove o elemento //elem.removenode(true); pai.removechild(elem)

34 Inserindo Elementos em um Select function adicionar() { var x=document.getelementbyid("myselect"); var option=document.createelement("option"); option.text="kiwi"; try { // Tenta executar para o Internet Explorer x.add(option,x.options[null]); catch (e) { x.add(option,null);

35 Excluindo Elementos de um Select function removeoption() { var x=document.getelementbyid("myselect"); x.remove(x.selectedindex);