javascript mini-curso de introdução a javascript promoção: pet-si slides em :

Post on 07-Apr-2016

216 Views

Category:

Documents

1 Downloads

Preview:

Click to see full reader

TRANSCRIPT

JavaScriptMini-curso de introdução a JavaScript

Promoção: PET-SISlides em : http://www-pet-si.inf.ufsm.br/cursojavascript2011/JavaScript_Aula03.pptMinistrantes: Rodrigo Comassetto da Silva

Rodrigo Castro Gil Leonardo Nicorena

Aula 03 – Estrutura DOMEstrutura HTML

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

Aula 03 – Estrutura DOMEstrutura HTML

html

head body

title script div

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

Aula 03 – Estrutura DOM

title

html

head body

script div

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

childNodes

firstChildlastChild

parentNode

childNodes

firstChild lastChild

Aula 03 – Estrutura DOMdocument

window

title

html

head body

script div

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

childNodes

firstChildlastChild

parentNode

childNodes

Aula 03 – Estrutura DOM

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

Aula 03 – Estrutura DOMa sintaxe window. é normalmente suprimida pois lidamos

normalmente direto com o document.

document.body.innerHTML = “<div>inner html</div>”;

Document.form1.input2.value = “valor”;

Document.nomeform.nomeinput.css.border = “1px solid #888”;

Document.getElementById(“id”).parentNode.firstChild.name

Aula 03 – Estrutura DOM

Referênciahttps://developer.mozilla.org/en/XUL_Reference

top related