Java script - document object model

 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

titulo function alerta(a) alert(a); texto

html
lastChild
firstChild

childNodes
childNodes
head body

title script div

parentNode


html
lastChild
firstChild

childNodes childNodes
document
head body
window

title script div
parentNode


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".

 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

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>
</div>
<input type=“button” value=“CLIQUE”
onclick=“alterar()” />

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”;
}

<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>

Java script - document object model

Java script - document object model

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Destacado

Destacado (10)

Similar a Java script - document object model

Similar a Java script - document object model (20)

Java script - document object model