Java script aula 06 - dom

799 visualizações

Publicada em

Java script aula 06 - dom

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
799
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
70
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Java script aula 06 - dom

  1. 1. Document Object Model - DOM Cristiano Pires Martins 1 Referência: JavaScript - Guia do Programador - MAUJOR http://www.w3c.br/cursos/html5 http://www.devmedia.com.br
  2. 2. Introdução • O navegador armazena sua interpretação do código HTML como uma estrutura de objetos; • Essa estrutura é chamada de Document Object Model - DOM; • Cada elemento do documento HTML torna-se um objeto: atributos e textos; • O JavaScript pode acessar cada objeto independentemente. 2
  3. 3. Árvore DOM 3 documento html head body title h1 p a a a
  4. 4. 4 Árvore DOM
  5. 5. Nó • Para criar o DOM de um documento, cada elemento do HTML é conhecido como nó; • O nó de elemento é distinguido pelo nome do elemento: head, body, h1…; • Os elementos não são sempre únicos, então é possível identificar pelo atributo id; • Nó de documento: início da árvore; 5
  6. 6. Tipos de Nós • Nós de elemento: são um tipo de nó e definem a maior parte da estrutura do DOM; • O conteúdo real de um documento está contido em dois outros tipos de nós: • Nós de texto; • Nós de atributos. 6
  7. 7. Nós de Texto • Tudo que não estiver entre <>…<>, é um nó de texto no DOM; • Nós de texto não tem filhos; • Espaço em branco pode produzir nós de texto. • Como mostra a figura a seguir… 7
  8. 8. 8 documento html head body title texto h1 p texto texto a texto texto a texto a texto texto
  9. 9. Nós de Atributo • Se as tags e texto estão cobertos pelos nós de elemento e de texto, faltam os atributos; • Por mais que eles façam parte dos elementos, os atributos têm seus próprios nós; • Os nós de atributos estão sempre ligados a um nó de elemento, mas não são nós de elemento ou de texto, dentro do DOM; • Como mostra a figura a seguir… 9
  10. 10. 10 a texto href rel Nós de Atributo
  11. 11. Exemplo da árvore DOM<!DOCTYPE html> <html> <head> <title>Título da página</title> </head> <body> <h1> Parágrafo 1 da página <h1> <p>Parágrafo 1 da página <em>pedaço do text node com elemento em</em> volta para o elemento parágrafo</p> <p>Parágrafo 2 da página</p> </body> </html> 11
  12. 12. Acessando os Nós • Manipular elementos por meio do DOM é parecido com aplicar estilos de documento por meio de CSS: • Especificar o elemento (ou grupo); • Especificar o efeito a ser aplicado. 12
  13. 13. Localizando um elemento pelo "id" • Para acessar um elemento pelo id em JS, utilize o método: • getElementById(“string_com_id”); • Esse método está disponível no nó elemento document; • Ex.: var objeto = document.getElementById(“identificador”); 13
  14. 14. getElementById 14 var objeto = document.getElementById(“identificador”); if (objeto != NULL) { alert(objeto.NodeName); {
  15. 15. Localizando elementos pelo nome da tag getElementByTagName var lista = document.getElementByTagName(“li”); var segundo_elemento = lista[1]; var numItens = lista.length; for(i=0;i<lista.length;i++) alert(lista[i].nodeName); 15
  16. 16. <!DOCTYPE html> <html> <head> <script> function getElements() { var x=document.getElementsByTagName("input"); alert("Resposta = "+x.length); } </script> </head> <body> Nome: <input type="text" size="20"></input><br/> Endereço: <input type="text" size="20"></input><br/> Telefone: <input type="text" size="20"></input><br/><br/> <input type="button" onclick="getElements()" value="Clique e veja quantos elementos inputs estão nessa página?"/> </body> </html> 16
  17. 17. <body> <form name="formulario" method="post" action=""> <p> <label for="nome">Nome</label> <input type="text" name="nome" id="nome"> </p> </form> <div id="id_div">Texto qualquer</div> <ul> <li>Primeiro valor</li> <li>Segundo valor</li> <li>Terceiro valor</li> <li>Quarto valor</li> </ul> <button onClick="caixa_texto()">Valor caixa de texto</button> <button onClick="lista()">Valor da lista</button> <script> function caixa_texto() { var nome = document.getElementById("nome").value; document.getElementById("id_div").innerHTML = nome; } function lista() { var lista_itens = document.getElementsByTagName("li"); document.getElementById("id_div").innerHTML += " - " + lista_itens.length; msg=""; for(i=0;i<lista_itens.length;i++) msg+=lista_itens[i].innerHTML+"<br/>"; document.getElementById("id_div").innerHTML=msg; } </script> 17
  18. 18. 18
  19. 19. Restringir seleção de nome de Tag • Se tiver 2 listas (ul) em um código, e apenas a 2ª lista interessar: var lista = document.getElementByTagName(“ul”); var segundaLista = lista[1]; var itensSegundaLista = segundaLista.getElementByTagName(“li”); 19
  20. 20. Localizando pelo nome da classe destaques = document.getElementsByClassName(‘destaque’); • E isso retornará todos os elementos do HTML que possuem a classe "destaque". 20
  21. 21. Características especiais de DomNodeList • As listas de elementos retornadas pelos métodos do DOM não são Arrays comuns, são objetos DomNodeList: pode usar list[0] ou list(0) para obter um elemento da lista. • Também pode usar list["name"] ou list("name") para obter um objeto por seu nome. • Duas adições interessantes do HTML5 ao usar este último método: • O objeto é buscado pelos atributos name ou id. • Uma lista de campos de formulário com o mesmo valor no atributo name (uma lista de radio buttons, por exemplo) será retornada caso mais de um objeto seja encontrado. • Essa lista contém um atributo especial, value, muito conveniente. Ele contém o valor do radio marcado e, ao ser setado, marca o radio correspondente. 21
  22. 22. ZEBRAR Tabela querySelectorAll() <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Zebra</title> <style> .zebraon{background:silver} </style> <script> window.onload=function(){ var zebrar=document.querySelectorAll('.zebra tbody tr') for(var i=0;i<zebrar.length;i+=2) zebrar[i].className='zebraon' } </script> </head> <body> <table class="zebra"> <thead><tr> <th>Vendedor</th> <th>Total</th> </tr></thead> <tbody><tr> <td>Manoel</td> <td>12.300,00</td> </tr><tr> <td>Joaquim</td> <td>21.300,00</td> </tr><tr> <td>Maria</td> <td>13.200,00</td> </tr><tr> <td>Marta</td> <td>32.100,00</td> </tr><tr> <td>Antonio</td> <td>23.100,00</td> </tr><tr> <td>Pedro</td> <td>31.200,00</td> </tr></tbody> </table> </body> </html> 22
  23. 23. document.querySelector() <div id="outerdiv" style="padding:50px; width:100px; height:100px; border:1px solid black"> <div id="innerdiv" style="width:100%; height:100%; border: 1px solid black; background:silver;"> </div> </div> <script type="text/javascript"> if (document.querySelector){ var outerdiv=document.querySelector('#outerdiv') outerdiv.onmouseover=function(){ this.querySelector('#innerdiv').style.background="yellow" } outerdiv.onmouseout=function(){ this.querySelector('#innerdiv').style.background="silver" } } </script> 23
  24. 24. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>querySelectorAll</title> </head> <body> <h1>A H1 element</h1> <h2>A H2 element</h2> <div>A DIV element</div> <p>A p element.</p> <p>A p element with a <span style="color:brown;">span</span> element inside.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var x = document.querySelectorAll("h2, div, span"); var i; for (i = 0; i < x.length; i++) x[i].style.backgroundColor = "red"; } </script> </body> </html> Selecionar elementos com querySelectorAll 24
  25. 25. innerHTML • Exemplo: function adicionaItem(nome){ document.getElementById('lista').innerHTML += '<li>'+nome+'</li>' } 25
  26. 26. Hierarquia do elemento “div” <html> <head> <title>Hieraquia do elemento div por JavaScript</title> <script type="text/JavaScript"> 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> 26
  27. 27. Exemplo temporizador <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Notifier</title> <script type="text/javascript"> function notify(text){ document.getElementById("msg").innerHTML += "<p>" + text + "</p>"; titleFlick(); } function titleFlick(){ if(document.hasFocus()){ document.title='Notifier' return } document.title=document.title=='Notifier'?'* Notifier':'Notifier' setTimeout('titleFlick()',500) } </script> </head> <body> <input type="button" id="notify" value="Notificação em 5 segundos" onclick="notify('Você será notificado em 5 segundos…');setTimeout('notify('Ok!!!')',5000)" /> <div id="msg"></div> </body> </html> 27
  28. 28. Exemplo usando getElementById()<!DOCTYPE html> <html> <head> <title>getElementById example</title> <script> function changeColor(newColor) { var elem = document.getElementById("para1"); elem.style.color = newColor; } </script> </head> <body> <p id="para1">Some text here</p> <button onclick="changeColor('blue');">blue</button> <button onclick="changeColor('red');">red</button> </body> </html> 28
  29. 29. Número de âncoras no texto <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</ a><br> <a name="css">CSS Tutorial</a><br> <a name="xml">XML Tutorial</a><br> <p id="demo"></p> <script> document.getElementById("demo").inn erHTML = "Number of anchors are: " + document.anchors.length; </script> </body> </html> 29 <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a><br> <a name="xml">XML Tutorial</a><br> <p>Click the button to display the innerHTML of the first anchor in the document.</p> <button onclick="myFunction()">Try it</ button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = document.anchors[0].innerHTML; } </script> </body> </html>
  30. 30. links <!DOCTYPE html> <html> <body> <p> <a href="/html/ default.asp">HTML</a> <br> <a href="/css/ default.asp">CSS</a> </p> <p id="demo"></p> <script> document.getElementById("demo") .innerHTML = "Number of links: " + document.links.length; </script> </body> </html> 30 <!DOCTYPE html> <html> <body> <p> <a href="/html/default.asp">HTML</a> <br> <a href="/css/default.asp">CSS</a> </p> <p id="demo"></p> <script> document.getElementById("demo").inne rHTML = "The href of the first link is " + document.links[0].href; </script> </body> </html>
  31. 31. formulários <!DOCTYPE html> <html> <body> <form action=""> First name: <input type="text" name="fname" value="Donald"> <input type="submit" value="Submit"> </form> <p id="demo"></p> <script> document.getElementById("demo").inner HTML = "Number of forms: " + document.forms.length; </script> </body> </html> 31 <!DOCTYPE html> <html> <body> <form name="Form1"></form> <form name="Form2"></form> <form name="Form3"></form> <p id="demo"></p> <script> document.getElementById("demo").i nnerHTML = "The name of the first for is " + document.forms[0].name; </script> </body> </html>
  32. 32. imagens <!DOCTYPE html> <html> <body> <img src="pic_htmltree.gif"> <img src="pic_navigate.gif"> <p id="demo"></p> <script> document.getElementById("demo") .innerHTML = "Number of images: " + document.images.length; </script> </body> </html> 32 <!DOCTYPE html> <html> <body> <img id="img1" src="pic_htmltree.gif"> <img id="img2" src="pic_navigate.gif"> <p id="demo"></p> <script> document.getElementById("demo").in nerHTML = "The id of the first image is " + document.images[0].id; </script> </body> </html>
  33. 33. CSS <!DOCTYPE html> <html> <body> <img id="img1" src="pic_htmltree.gif"> <img id="img2" src="pic_navigate.gif"> <p id="demo"></p> <script> document.getElementById("demo"). innerHTML = "The id of the first image is " + document.images[0].id; </script> </body> </html> 33 <!DOCTYPE html> <html> <head> <script> function bgChange(bg) { document.body.style.background = bg; } </script> </head> <body> <h2>Change background color</h2> <p>Mouse over the squares!</p> <table style="width:300px;height:100px"> <tr> <td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')" style="background-color:Khaki"> </td> <td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')" style="background-color:PaleGreen"> </td> <td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')" style="background-color:Silver"> </td> </tr> </table> </body> </html>
  34. 34. Métodos usados para percorrer o documento • hasChildNodes - retorna true se o elemento possui filhos; • firstChild - retorna uma referência ao primeiro elemento filho; • lastChild - retorna uma referência ao último elemento filho; • nextSibling - retorna uma referência ao irmão posterior ao elemento; • previousSibling - retorna uma referência ao irmão 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 referência ao elemento pai. Essas propriedades são a chave para ser capaz de manipular a árvore de documentos para acessar dados específicos do nó. 34
  35. 35. Exemplo usando Propriedades Elementos DOM <html> <head> <title> Propriedades da árvore DOM </title> <script> var el; var nome; var tipo; var valor; function start() { el = document.documentElement; nome = document.getElementById("nome"); tipo = document.getElementById("tipo"); valor = document.getElementById("valor"); mostra(); } function mostra() { nome.value = el.nodeName; tipo.value = el.nodeType; valor.value = el.nodeValue; } function restart() { el = document.documentElement; mostra(); } function primeiroFilho() { if(el.firstChild){ el = el.firstChild; mostra(); } else alert("O Elemento não possui filhos !"); } 35
  36. 36. cont… function ultimoFilho() { if(el.lastChild){ el = el.lastChild; mostra(); } else alert("O Elemento não possui filhos !"); } function obterPai() { if(el.parentNode){ el = el.parentNode; mostra(); } else alert("O Elemento não possui Pai !"); } function proximoIrmao() { if(el.nextSibling){ el = el.nextSibling; mostra(); } else alert("O Elemento não possui um próximo irmão !"); } function irmaoAnterior() { if(el.previousSibling){ el = el.previousSibling; mostra(); } else alert("O Elemento não possui um irmão anterior !"); } </script> </head> 36
  37. 37. cont… <body> <form> <fieldset> <input type="button" name="next" value="Next Irmão" onClick="proximoIrmao();" /> <input type="button" name="prev" value="Prev Irmão" 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 37
  38. 38. Criar um novo elemento e adicioná-lo à árvore do documento <html> <head> <script> // run this function when the document is loaded window.onload = function() { // create a couple of elements // in an otherwise empty HTML page heading = document.createElement("h1"); heading_text = document.createTextNode("Big Head!"); heading.appendChild(heading_text); document.body.appendChild(heading); } </script> </head> <body> </body> </html> 38
  39. 39. Interfaces e Objetos var table = document.getElementById("table"); var tableAttrs = table.attributes; // Node/Element interface for (var i = 0; i < tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border"; 39

×