tópicos avançados em internet b

Download Tópicos avançados em internet B

Post on 03-Jan-2016

29 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

Tópicos avançados em internet B. Carlos Oberdan Rolim Ciência da Computação. DOM (Document Object Model). Introdução. DOM é um padrão W3C (World Wide Web Consortium) Define um padrão para acesso a elementos de documentos como HTML e XML - PowerPoint PPT Presentation

TRANSCRIPT

  • Tpicos avanados em internet BCarlos Oberdan Rolim

    Cincia da Computao

  • DOM (Document Object Model)

  • IntroduoDOM um padro W3C (World Wide Web Consortium) Define um padro para acesso a elementos de documentos como HTML e XMLDocument Object Model (DOM) uma plataforma e uma interface de linguagem-neutra que possibilita aos programas e scritps acessarem e atualizarem dinmicamente o contedo e o estilo de um documento.

  • IntroduoSeparado em 3 partes / nveis:Core DOM modelo padro para qualquer estrutura de documentoXML DOM modelo padro para documentos XML HTML DOM - modelo padro para documentos HTML

    DOM define objetos e propriedades para todos elementos do documentos e mtodos (interfaces) para acesso a eles

  • IntroduoDOM fornece a representao estrutural de documentos HTML e XML, definindo a forma como a estrutura que pode ser acessada por programas e scripts, possibilitando a modificao na estrutura do documento, do estilo e do contedo

    HTML DOM o padro de como acessar, alterar, acrescer e deletar elementos HTML.

  • NodosDe acordo com DOM tudo em documento HTML so nodosO documento todo um nodoTags html so element nodesTexto dentro de tags so text nodesAtributos so attributes nodesComentrios so comment nodes

  • Nodos

    root node tm dois filhos Erro comum esperar que um element node contm textoO Texto de um element node armazenado em um text nodeTitulo no o o valor do elemento

    Titulo/title> Texto Hello world!

  • DOM Nodes treeDOM Representa o documento atravs de uma rvore de ns (tree of node) em que cada objeto possui sua propriedade e mtodo

  • DOM Nodes treeNode-tree

  • DOM Nodes treeHierarquia de nodosNodo top chamado de nodo raiz (root)Cada nodo, exceto root, tm exatamente um paiUm nodo pode ter qualquer nmero de filhosUm nodo leaf um nodo sem filhosIrmos (siblings) so nodos com o mesmo pai Titulo/title> Texto Hello world!

  • Acesso aos nodos3 maneiras1. Usando getElementById()2. Usando getElementsByTagName()3. Navegando pela pela rvore de nodos usando os relacionamentos entre nodos

    W3Schools example The DOM is very useful This example demonstrates node relationships var x=document.getElementById("intro"); var text=x.firstChild.nodeValue;

  • Root nodesDuas propriedades que permitem acesso as tagsdocument.documentElement Retorna o nodo root do documento e existe em todos documentos XML e HTMLdocument.body Acesso direto a tag

  • Mtodos e propriedadesDOM modelo o HTML como um conjunto de objetos (cada nodo um objeto)Estes nodos pode ser acessados por JavaScript ou qualquer outra linguagem de programaoA API definida pelo conjunto de mtodos e propriedades

    Propriedades: referenciado como algo que (ex. nodename p)Mtodos: referenciado como algo que feito (ex. deletar p)

  • Mtodos e propriedadesPropriedades:Sendo x um objeto (elemento HTML)x.innerHTML o contedo (texto) de x x.nodeName o nome de x x.nodeValue o valor de x x.parentNode o pai de x x.childNodes os filhos de x x.attributes os nodos atributos de x

  • Mtodos e propriedadesMtodos:Sendo x um objeto (elemento HTML)x.getElementByID(id) obtm o elemento especificado pela ID x.getElementsByTagName(name) obtm todos os elementos especificados pelo nome x.appendChild(node) insere um elemento filho no node x x.removeChild(node) remove um elemento filho do node x

  • MtodosgetElementByIdProvavelmente o mais utilizado do DOMRetorna o elemento cujo atributo ID foi especificado Criando um campo em um formulrio

    Pode ser acessado via javascript atravs de

    Se for usado o mtodo pode ser acessado somente pela ID

  • MtodosgetElementById

  • MtodosgetElementsByTagNameRetorna diversos objetos com a tag especficada no mtodo. Pode retornar vrios objetos Acessar via indicex=document.getElementsByTagName("p"); y = x[1]

  • MtodosgetElementsByTagNameExemplo de script que altera a propriedade textDecoration de tags

  • MtodosstyleAltera o estilo de um objetoExemplo de funo usada para alterar a propriedade display de um objeto ocultando-ofunction showHide(id) { var obj = document.getElementById(id); if(obj.style.display == "") { obj.style.display = "none"; } else { obj.style.display = ""; } }

  • MtodosclassNameSemelhante ao style tem a funo de alterar o estilo de um objeto definido por uma classe CSS A vantagem do mtodo className que podemos alterar as propriedades do estilo na folha de estilo vinculada pgina, ou seja, no precisamos alterar o script quando desejarmos alterar o estilo e sim as propriedades da classe CSS.

  • MtodosclassName

    Script usado para ocultar o objeto

    Estilo usado

    function showHide(id) { var obj = document.getElementById(id); if(obj.className == "") { obj.className = "ocultaObj"; } else { obj.className = ""; } } .ocultaObj { display: none; } Ocultar / Exibir o box. Teste.

  • MtodosinnerHTMLPara alterarmos ou inserirmos contedo ou uma marcao HTML em um objeto, utilizamos o mtodo innerHTML

  • MtodosinnerHTML

    Script usadoscript type="text/javascript">

  • MtodoscreateElementCria um elemento

    appendChildAcresce um filho a um elemento

    //1 - Referencia o elemento onde deseja-se criar var conteudo = document.getElementById("box"); // 2 - Define nova tag a ser criada var newElement = document.createElement(what); // 3 - Cria o elemento texto newElement.appendChild(document.createTextNode(Elemento criado")); // 4 - Inclui novo elemento conteudo.appendChild(newElement);

  • MtodosinsertBeforeappendChild insere o objeto sempre como o ltimo filho (child) de um elemeto pai (parent) insertBefore insere um elemento em um local especfico

    // 1 var newElement = document.createElement(what); // 2 newElement.appendChild(document.createTextNode("Ttulo do pargrafo")); // 3 var referencia = document.getElementById("paragrafo"); // 4 var parentTag = referencia.parentNode; // 5 parentTag.insertBefore(newElement, referencia);

  • MtodosinsertAfterMtodos no existeGambiarra para seu uso

  • Mtodos Texto Criar novo elemento Gambiarra

  • MtodossetAttributeInsere ou modifica um atributo em um determinado elemento existente Texto existente Criar novo elemento

  • MtodosgetAttributeObtm atributo de um elemento Texto dentro da div Atributo do elemento

  • PropriedadesInformaes dos nodosTrs propriedades dos nodos importantes:nodeName nodeValue nodeType

  • PropriedadesnodeNameEspecifica o nome do nodonodeName somente leituranodeName de um elemento o mesmo que sua tag namenodeName de um atributo o nome do atributonodeName de um texto sempre #text nodeName de um documento sempre #document

    Nota: nodeName sempre contm a tag de um elemento HTML em maisculo

  • PropriedadesnodeValue Especifica o valor de um nodo

    nodeValue de um node element indefinidonodeValue de um elemento texto o prprio textonodeValue de um atributo o valor do atributo

    x=document.getElementById("intro").firstChild; txt=x.nodeValue;

  • PropriedadesnodeType Retorna o tipo do nodoOs mais importantes so

    ElementType NodeType Element 1 Attribute 2 Text 3 Comment 4 Document 5

Recommended

View more >