DOM
   DOM (Document Object Model)
<html>   <head>      <title>titulo</title>          <script id=h>             function alerta(a) alert(a);          </scri...
html                                                   lastChild                      firstChild                          ...
html                                                                     lastChild                                        ...
Atributo                            DescriçãohasChildNodes     retorna true se o elemento possui filhosfirstChild        r...
   document.body.innerHTML = “<div>inner    html</div>”;   Document.form1.input2.value =    “valor”;   Document.nomefor...
<html>  <head>       <title>Exemplo DOM</title>  </head>  <body>       <p id=“paragrafo”>texto <strong>negrito</strong> te...
O DOM e o JavaScript - Oque está fazendo o que?
   O código irá recuperar todas as tags <a> em    uma NodeList que chamamos de    "anchorTags". Então para cada tag de ân...
• var anchorTags = : irá criar a variável JavaScript chamada "anchorTags".• document.getElementsByTagName("a") : o documen...
• alert( : método DOM que faz surgir uma caixa de diálogo com o parâmetro(string) . Parte do chamado DOM nível 0, ou DOM0....
Manipulação de pop-up
   window.open(URL,nomeJanela,formaJanela)   window.open("http://univali.br" , "janela1" ,    "width=120,height=300,scro...
   Top: Indica a posição da janela com relação ao    topo   Left: Indica a posição da janela na esquerda   Scrollbars: ...
Mais manipulações
http://www.scriptfacil.com.br/topscript.html
<p>Exemplo</p><div id=“aqui”> <b>Minha DIV</b> <p>Primeiro parágrafo</p> <p>Segundo parágrafo</p> <p>Terceiro parágrafo</p...
function alterar() {  var obj =  document.getElementById(“aqui”).getElement  ByTagName(“p”);    obj[0].style.color=“#FFFFF...
<div id=“excluir”> <p>Este é um parágrafo</p> <p>Este é um outro parágrafo</p></div><p> O texto será alterado <i id=“troca...
function excluir() {  var excluir = document.getElementById(„excluir‟);  if (excluir.hasChildNodes()) {        excluir.rem...
Java script - document object model
Upcoming SlideShare
Loading in …5
×

Java script - document object model

1,376 views
1,242 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,376
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Java script - document object model

  1. 1. DOM
  2. 2.  DOM (Document Object Model)
  3. 3. <html> <head> <title>titulo</title> <script id=h> function alerta(a) alert(a); </script> </head> <body onload=alerta(document.getElementById(h).innerHTML);> <div> texto </div> </body></html> html head body title script div titulo function alerta(a) alert(a); texto
  4. 4. html lastChild firstChild childNodeschildNodes head body title script div parentNode titulo function alerta(a) alert(a); texto
  5. 5. html lastChild firstChild childNodes childNodes document head bodywindow title script div parentNode titulo function alerta(a) alert(a); texto
  6. 6. Atributo DescriçãohasChildNodes retorna true se o elemento possui filhosfirstChild retorna uma referência ao primeiro elemento filholastChild retorna uma referência ao último elemento filhonextSibling retorna uma referência ao irmão posterior ao elementopreviousSibling retorna uma referência ao irmão anterior ao elementonodeName 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 elementoparentNode retorna uma referência ao elemento pai
  7. 7.  document.body.innerHTML = “<div>inner html</div>”; Document.form1.input2.value = “valor”; Document.nomeform.nomeinput.css.borde r = “1px solid #888”; Document.getElementById(“id”).parentN ode.firstChild.name
  8. 8. <html> <head> <title>Exemplo DOM</title> </head> <body> <p id=“paragrafo”>texto <strong>negrito</strong> texto </p> <script language=“javascript” type=“text/javascript”> var elementoPai document.getElementById(„paragrafo‟); var mensagem = “nodeName: “ + elementoPai.nodeName + “n”; mensagem+= “nodeType: “ + elementoPai.nodeType + “n”; mensagem+= “nodeValue: ” + elementoPai.nodeValue + “n”; window.alert(mensagem); </script> </body></html>
  9. 9. O DOM e o JavaScript - Oque está fazendo o que?
  10. 10.  O código irá recuperar todas as tags <a> em uma NodeList que chamamos de "anchorTags". Então para cada tag de âncora, ele vai mostrar um alert como valor do atributo "href" da tag. var anchorTags = document.getElementsByTagName("a"); for (var i = 0; i < anchorTags.length ; i++) { alert("Href desse elemento a é : " + anchorTags[i].href + "n"); }
  11. 11. • var anchorTags = : irá criar a variável JavaScript chamada "anchorTags".• document.getElementsByTagName("a") : o documento armazena tudoque está em sua página. O DOM1 Core define ométodo getElementsByTagName() na inteface Document. Ele recuperauma NodeList (uma espécie de array específico do DOM que armazena nós)de todas as tags que coincidem com o parâmetro passado para a função, emordem de ocorrência no documento fonte. A variável anchorTags agora éum NodeList.• ; : o básico ponto e vírgula de fim de instrução. Coisa do JavaScript.• for (var i = 0; i < : típica repetição "for" de uma linguagem de programação.Note a declaração da variável "i". Também JavaScript.• anchorTags.length: o DOM1 Core define a propriedade length dainterface NodeList. Isso retorna um inteiro que é o número de nós contidosno NodeList.• ; i++) { : típico incremento de 1 em variável JavaScript.
  12. 12. • alert( : método DOM que faz surgir uma caixa de diálogo com o parâmetro(string) . Parte do chamado DOM nível 0, ou DOM0. DOM0 é um conjunto deinterfaces suportada por alguns browsers, mas que não é parte daespecificação DOM.• "Href desse elemento a é: " + : string e um operador de concatenação destring. JavaScript.• anchorTags[i].href : "href" é uma propriedade dainterface HTMLAnchorElement definida na especificação HTML DOM1. Elaretorna o valor do atributo href do elemento âncora, se existir.• + "n"); : mais concatenação de string. Insere um retorno de linha ao fimda string.• } : fim do laço de repetição "for".
  13. 13. Manipulação de pop-up
  14. 14.  window.open(URL,nomeJanela,formaJanela) window.open("http://univali.br" , "janela1" , "width=120,height=300,scrollbars=NO") <script language=javascript> function abreJanela(URL){ window.open(URL,"janela1","width=99,height=99") } </script> <a href="javascript:abreJanela(http://univali.br)"> link</a>
  15. 15.  Top: Indica a posição da janela com relação ao topo Left: Indica a posição da janela na esquerda Scrollbars: Para definir de forma exata se saem ou não as barras de deslocamento. ◦ scrollbars=NO fazem com que nunca saiam. ◦ scrollbars=YES faz com que sempre saiam (sempre em IE e somente se forem necessárias em outros). Resizable: Establece se pode ou não modificar o tamanho da janela. Directories, Location , Menubar, Status, Titlebar e Toolbar
  16. 16. Mais manipulações
  17. 17. http://www.scriptfacil.com.br/topscript.html
  18. 18. <p>Exemplo</p><div id=“aqui”> <b>Minha DIV</b> <p>Primeiro parágrafo</p> <p>Segundo parágrafo</p> <p>Terceiro parágrafo</p></div><input type=“button” value=“CLIQUE” onclick=“alterar()” />
  19. 19. function alterar() { var obj = document.getElementById(“aqui”).getElement ByTagName(“p”); obj[0].style.color=“#FFFFFF”; obj[0].style.backgroundColor = “#000000”; obj[1].style.backgroundColor = “#EEEEEE”;}
  20. 20. <div id=“excluir”> <p>Este é um parágrafo</p> <p>Este é um outro parágrafo</p></div><p> O texto será alterado <i id=“trocar”>aqui</i></p><a href=“#” onclick=“excluir();” />Excluir</a><br/><a href=“javascript:trocar();” />Trocar</a>
  21. 21. function excluir() { var excluir = document.getElementById(„excluir‟); if (excluir.hasChildNodes()) { excluir.removeChild(excluir.lastChild); }}function trocar() { var trocar = document.getElementById(„trocar‟); if (trocar) { var novoNo = document.createElement(“strong”); var novoTexto = document.createTextNode(“foi trocado”); novoNo.appendChild(novoTexto); trocar.parentNode.replaceChild(novoNo, trocar); }}

×