Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • SIW Aula07

    Enviado por

    Ednaldo Cunha
    15 visualizações17 páginas

    Título original

    SIW_Aula07

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    15 visualizações17 páginas

    SIW Aula07

    Enviado por

    Ednaldo Cunha

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 17

    Sistemas

    Web
    Prof.: Cssio Prazeres (prazeres@dcc.u:a.br) DOM e DHTML

    Introduo (1)
    DOM (Document Object Model) um padro W3C denido para acessar e manipular documentos HTML e XML
    "The W3C Document Object Model (DOM) is a pla<orm and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

    Introduo (2)
    O DOM dene os objetos e as propriedades de todos os elementos do documento, e os mtodos (interface) para acess-los dividido em trs diferentes partes/nveis
    Core DOM: modelo padro para qualquer documento estruturado XML DOM: modelo padro para documentos XML HTML DOM: modelo padro para documentos HTML e XHTML

    DOM HTML
    Modelo de objeto padro para HTML Interface de programao padro para HTML Independente de plataforma e linguagem
    Vamos usar JavaScript

    O HTML DOM um padro W3C para como obter, alterar, adicionar ou excluir elementos HTML

    rvore DOM HTML exemplo

    Ns DOM
    De acordo com DOM tudo em um documento HTML um n
    Todo o documento um n do ^po document Cada elemento HTML um n do ^po element O texto em elementos HTML um n do ^po text Todo atributo HTML um n do ^po aFribute Comentrios so ns do ^po comment

    Ns texto
    Texto sempre armazenada em ns do ^po texto
    Um erro comum no processamento do DOM o de esperar um n de elemento conter texto
    O texto de um elemento armazenado em um n texto

    <^tle>DOM Tutorial</^tle>
    O elemento <^tle> tem um n texto com o valor "DOM Tutorial Ou seja, "DOM Tutorial" no o valor do elemento <^tle>

    rvore de ns (1)
    O DOM HTML trata um documento HTML como uma estrutura de rvore
    Chamada node-tree (rvore de ns)

    Qualquer n pode ser acessado por meio da rvore de ns


    Modicar, excluir e inserir ns

    rvore de ns (2)

    Ns pais, lhos e irmos (1)


    Relacionamento hierrquico
    Os termos pais, lhos e irmos so u^lizados para descrever esses relacionamentos Ns pais tm lhos que, no mesmo nvel, so irmos

    Ns pais, lhos e irmos (2)


    O n do topo chamado de raiz Cada n, exceto a raiz, tem exatamente um n pai Um n pode ter qualquer nmero de lhos Uma folha um n sem lhos Irmos so os ns com o mesmo pai

    Ns pais, lhos e irmos (2)

    Exemplo
    <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html>

    O n <html> no tem n pai, o n raiz O pai dos ns <head> e <body> o n <html> <p> o n pai do n texto "Hello world! O n <html> tem dois ns lhos: <head> e <body> O n <head> tem um n lho: <^tle> O n <^tle> tem um n lho: o n texto DOM Tutorial Os ns <h1> e <p> so irmos, ambos lhos de <body>

    Propriedades e mtodos
    Denem a interface de programao
    Documentos HTML consistem de um conjunto de objetos de n Os ns podem ser acessados com JavaScript ou outras linguagens de programao BODY o nome do n <body> remover o n <body>

    Propriedades so muitas vezes referidas como algo que

    Mtodos so muitas vezes referidos como algo que feito

    Algumas propriedades
    Dado x, um objeto n que um elemento de HTML:
    x.innerHTML: o valor do texto do n x
    Forma mais fcil de obter ou modicar o contedo de um elemento HTML No faz parte da especicao DOM W3C

    x.nodeName: o nome do n x x.nodeValue: o valor do n x x.nodeType: o ^po do n x x.parentNode: o n pai de x x.childNodes: uma lista com os ns lhos de x x.arributes: uma lista com os atributos de x

    Alguns mtodos
    Dado x, um objeto n que um elemento de HTML:
    x.getElementById(id): retorna o elemento com o id passado como parmetro x.getElementsByTagName(name): retorna todos os elementos com um determinado nome de tag x.appendChild(node): insere um n lho no n x x.removeChild(node): remove um n lho de x
    http://www.w3schools.com/htmldom/dom_nodes_access.asp

    Referncias dessa aula


    Todos os exemplos dessa aula so do W3Schools
    HTML DOM Tutorial DHTML Tutorial
    hrp://www.w3schools.com/htmldom/default.asp hrp://www.w3schools.com/dhtml/default.asp

    Sugestes de leitura

    Deitel, P. J., Deitel, H. M. Ajax, rich internet applica0ons e desenvolvimento web para programadores. Pearson, 1. Edio, 2008.
    Captulos 4 a 9

    Você também pode gostar