Embed Size (px)
DESCRIPTION
Citation preview
DOM
DOM (Document Object Model)
<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
function alerta(a) alert(a); titulo texto
title
html
head body
script div
function alerta(a) alert(a); titulo texto
childNodes
firstChild lastChild
parentNode
childNodes
docum
ent
win
dow
title
html
head body
script div
function alerta(a) alert(a); titulo texto
childNodes
firstChild lastChild
parentNode
childNodes
Atributo Descrição
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
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
<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>
O DOM e o JavaScript - O que 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 â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"); }
• var anchorTags = : irá criar a variável JavaScript chamada "anchorTags".
• document.getElementsByTagName("a") : o documento armazena tudo
que está em sua página. O DOM1 Core define o método getElementsByTagName() na inteface Document. Ele recupera
uma 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, em ordem 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 da
interface NodeList. Isso retorna um inteiro que é o número de nós contidos
no NodeList.
• ; i++) { : típico incremento de 1 em variável JavaScript.
• 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 de
interfaces suportada por alguns browsers, mas que não é parte da
especificação DOM.
• "Href desse elemento a é: " + : string e um operador de concatenação de
string. JavaScript. • anchorTags[i].href : "href" é uma propriedade da
interface HTMLAnchorElement definida na especificação HTML DOM1. Ela
retorna o valor do atributo href do elemento âncora, se existir.
• + "\n"); : mais concatenação de string. Insere um retorno de linha ao fim
da string.
• } : fim do laço de repetição "for".
Manipulação de pop-up
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>
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
Mais manipulações
<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()” />
function alterar() {
var obj = document.getElementById(“aqui”).getElementByTagName(“p”);
obj[0].style.color=“#FFFFFF”;
obj[0].style.backgroundColor = “#000000”;
obj[1].style.backgroundColor = “#EEEEEE”;
}
<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>
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); } }
