• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DOM - Document Object Model
 

DOM - Document Object Model

on

  • 1,974 views

 

Statistics

Views

Total Views
1,974
Views on SlideShare
1,972
Embed Views
2

Actions

Likes
1
Downloads
1
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DOM - Document Object Model DOM - Document Object Model Presentation Transcript

    • DOM Isidro Vila Verde http://www.fe.up.pt/~jvv/DOM/ 29-09-10 Document Object Model
    • O que é?
      • É uma especificação de uma API, numa linguagem neutra, para documentos XML e HTML
        • Define um modelo, em árvore, para representar os elementos, os atributos e o texto
        • Define vários tipos de Nós
        • Define a relação entre os nós da árvore
        • Define métodos e propriedades parta cada tipo de Nó
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
    • Para que serve?
      • Permite, programaticamente, criar, alterar e navegar em documentos HTML/XML
          • Fornece os alicerces para as páginas dinâmicas
          • Permite a interacção entre o utilizador e a estrutura e os conteúdos
          • Fornece mecanismos para integrar (partes) de documentos noutros documentos, quer sejam XML quer HTML
          • Fornece mecanismos de pesquisa e filtragem de partes de documentos
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
    • Representação em Árvore
      • <html>
      • <head>
      • <title>
      • A tree example
      • </title>
      • </head>
      • <body>
        • <div id=“a1”>
        • some text
        • </div>
      • <body>
      • </html>
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ html head body title div A tree example Some text id = “a1”
    • Nós
      • Numa representação em árvore tudo é um Nó
        • Vários tipos de Nós
          • Nó Raiz (o documento)
          • Nó elemento
            • Ex: div, body, title, html, etc
          • Nó atrivuto
            • Ex: id
          • Nó texto
            • Ex: A tree example
          • Nó elemento Raiz (só pode existir um e um só)
            • Ex: html
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
    • Relação entre Nós 29-09-10 http://www.fe.up.pt/~jvv/DOM/ FirstChild PreviousSibling ChildNodes NextSibling LastChild() ParentNode
    • Interfaces DOM 29-09-10 http://www.fe.up.pt/~jvv/DOM/ DocumentFragment Document CharacterData Text Comment CDATASection Attr Element DocumentType Notation Entity EntityReference ProcessingInstruction Node NodeList NamedNodeMap DocumentType
    • Alguns Métodos de Node
      • Interface Node
      • String getNodeName();
      • String getNodeValue()
      • void setNodeValue(String nodeValue)
      • short getNodeType();
      • Node getParentNode();
      • NodeList getChildNodes();
      • Node getFirstChild();
      • Node getLastChild();
      • Node getPreviousSibling();
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
      • http://www.w3.org/TR/REC-DOM-Level-1/
    • Alguns Métodos de Node (cont…) 29-09-10 http://www.fe.up.pt/~jvv/DOM/ … Interface Node Node getNextSibling() NamedNodeMap getAttributes(); Document getOwnerDocument() Node insertBefore(Node newChild, Node refChild) Node replaceChild(Node newChild, Node oldChild) Node removeChild(Node oldChild) Node appendChild(Node newChild) boolean hasChildNodes(); Node cloneNode(boolean deep)
      • http://www.w3.org/TR/REC-DOM-Level-1/
    • Algumas Propriedades de Node 29-09-10 http://www.fe.up.pt/~jvv/DOM/ Interface Node nodeName nodeValue NodeType childNodes parentNode firstChild lastChild nextSibling previousSibling attributes
      • http://www.w3.org/TR/REC-DOM-Level-1/
    • Alguns Métodos de Element 29-09-10 http://www.fe.up.pt/~jvv/DOM/ Interface Element String getTagName() String getAttribute(String name) void setAttribute(String name, String value) void removeAttribute(String name) Attr getAttributeNode(String name) Attr setAttributeNode(Attr newAttr) Attr removeAttributeNode(Attr oldAttr) NodeList getElementsByTagName(String name) void normalize(); Interface NodeList Node item(int index) int getLength()
      • http://www.w3.org/TR/REC-DOM-Level-1/
    • Alguns Métodos de Document 29-09-10 http://www.fe.up.pt/~jvv/DOM/ Interface Document DocumentType getDoctype() DOMImplementation getImplementation() Element getDocumentElement() Element createElement(String tagName) DocumentFragment createDocumentFragment() Text createTextNode(String data) Comment createComment(String data) CDATASection createCDATASection(String data) ProcessingInstruction createProcessingInstruction(String target, String data) Attr createAttribute(String name) EntityReference createEntityReference(String name) NodeList getElementsByTagName(String tagname)
      • http://www.w3.org/TR/REC-DOM-Level-1/
    • Alguns Métodos Attr e Char… 29-09-10 http://www.fe.up.pt/~jvv/DOM/ Interface Attr String getName() boolean getSpecified() String getValue() void setValue(String value)
      • http://www.w3.org/TR/REC-DOM-Level-1/
      Interface CharacterData String getData() void setData(String data) int getLength() String substringData(int offset, int count) void appendData(String arg) void insertData(int offset, String arg) void deleteData(int offset, int count) void replaceData(int offset, int count, String arg)
    • 0 0
    • Exemplo 1 - XML
      • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
      • <PI>
      • Lista de Equipamento Informatico
      • <computador>
      • sp01pt
      • <ip>192.168.6.7 </ip>
      • <marca>IBM
      • <site url=&quot;http://www.ibm.pt&quot;/>
      • </marca>
      • </computador>
      • <computador>
      • sp03pt
      • <ip>192.168.6.9 </ip>
      • <marca>Linha Branca</marca>
      • </computador>
      • </PI>
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
    • Exemplo 1 – Representação em Árvore 29-09-10 http://www.fe.up.pt/~jvv/DOM/ Ex1.xml Lista de Equipamento Informático sp01pt sp02pt Nó (filho de PI) Texto Atributo compu t ador marca ip PI compu t ador marca ip 192.168.6.9 Linha Branca 192.168.6.7 href : http://www.ibm.pt site IBM
    • Exemplo 1 – DOM em Perl
      • use XML::DOM;
      • use strict ;
      • my ($file, $nodes) = @ARGV;
      • my $parser = new XML::DOM::Parser;
      • my $doc = $parser->parsefile ($file);
      • my $nodes = $doc-> getElementsByTagName($nodes);
      • &printtree($nodes,0);
      • sub printtree{
      • my ($nodelist,$t) = @_;
      • return undef unless $nodelist;
      • my $n = $nodelist-> getLength ;
      • my $ts = &quot;t&quot; x $t;
      • for (my $i = 0; $i < $n; $i++){
      • my $node = $nodelist-> item ($i);
      • my $childs = $node-> getChildNodes
      • if $node-> getNodeType eq XML::DOM::ELEMENT_NODE ;
      • &printtree($childs,$t+1) if $childs;
      • print $ts,$node-> getData
      • if $node-> getNodeType eq XML::DOM::TEXT_NODE ;
      • }
      • }
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ Modulo de perl que implementa uma interface DOM O DOM não define qualquer interface para abrir e fazer o “parsing” de documentos XML. Esta função é específica deste módulo Obtém a lista de nós ( NodeList ) cujo nome é passado como parâmetro A função getLenhgth , definida na interface NodeList , devolve o número de elementos da lista Obtém o element $i da lista. O elemento devolvido é do tipo Node Obtém a lista de nós ( NodeList ) filhos deste Nó. Devolve o tipo de nó Os tipos de nós estão definidos na Interface Node Obtém o valor do atributo DOM, data , definido em CharacterData
    • Exemplo 1 – DOM em Java
      • import java.io.*;
      • import org.w3c.dom.*;
      • import javax.xml.parsers.*;
      • import org.xml.sax.SAXException;
      • import org.xml.sax.SAXParseException;
      • public class ex1 {
      • private static void printtree( NodeList nodelist, String s){
      • int n = nodelist. getLength() ;
      • for ( int i = 0; i < n; i++){
      • Node node = nodelist. item(i);
      • if (node. getNodeType() == Node.ELEMENT_NODE ){
      • NodeList childs = node. getChildNodes() ;
      • if (childs. getLength() > 0) printtree(childs, s + &quot;t&quot;);
      • }
      • if (node. getNodeType() == Node.TEXT_NODE ){
      • System.out.println(s + (( Text )node). getData() );
      • }
      • }
      • }
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ Package java que implementa as interfaces DOM A função getLenhgth , definida na interface NodeList , devolve o número de elementos da lista Obtém o element node da lista. O elemento devolvido é do tipo Node Obtém a lista de nós ( NodeList ) filhos deste Nó. Devolve o tipo de nó Os tipos de nós estão definidos na Interface Node Obtém o valor do atributo DOM, data , definido em CharacterData
    • Exemplo 1 – DOM em Java (2)
      • public static void main(String[] argv){
      • DocumentBuilderFactory factory =
      • DocumentBuilderFactory.newInstance();
      • try {
      • DocumentBuilder builder = factory.newDocumentBuilder();
      • Document doc = builder.parse( new File(argv[0]));
      • NodeList nodes = doc. getElementsByTagName( argv[1] ) ;
      • printtree(nodes, &quot;&quot;);
      • }
      • catch (SAXParseException spe) {}
      • catch (SAXException sxe) {}
      • catch (ParserConfiguratioException pce) {}
      • catch (IOException ioe) {}
      • }
      • }
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ O DOM não define qualquer interface para abrir e fazer o “parsing” de documentos XML. Esta função é específica da package java usada Obtém a lista de nós ( NodeList ) cujo nome é passado como parâmetro
      • Exemplo 1 – Resultado 1
      • C:Documents and SettingsjvvMy
      • DocumentsaulasDOM> ex1.pl ex1.xml PI
      • Lista de Equipamento Informatico
      • sp01pt
      • 192.168.6.7
      • IBM
      • sp03pt
      • 192.168.6.9
      • Linha Branca
      • C:Documents and SettingsjvvMy DocumentsaulasDOM>
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
    • Exemplo 1 – Resultado 2
      • C:Documents and SettingsjvvMy DocumentsaulasDOM> ex1.pl ex1.xml computador
      • sp01pt
      • 192.168.6.7
      • IBM
      • sp03pt
      • 192.168.6.9
      • Linha Branca
      • C:Documents and SettingsjvvMy DocumentsaulasDOM>
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
    • Exemplo 2 – DOM em Perl
      • use XML::DOM;
      • use strict ;
      • my ($file, $nome, $ip, $marca, $href) = @ARGV;
      • my $parser = new XML::DOM::Parser;
      • my $doc = $parser->parsefile ($file);
      • my $comp = $doc-> createElement ('computador');
      • my $cip = $doc-> createElement ('ip');
      • my $cmarc = $doc-> createElement ('marca');
      • my $cn = $doc-> createTextNode ($nome);
      • my $txt = $doc-> createTextNode ($ip);
      • $cip-> appendChild ($txt);
      • my $txt = $doc-> createTextNode ($marca);
      • $cmarc-> appendChild ($txt);
      • $comp-> appendChild ($cn);
      • $comp-> appendChild ($cip);
      • $comp-> appendChild ($cmarc);
      • my $attr = $doc-> createAttribute ('href');
      • $attr-> setValue ($href);
      • $cmarc-> setAttributeNode ($attr);
      • my $node = $doc-> getDocumentElement ();
      • $ node-> appendChild ($comp);
      • print $doc->toString;
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ Cria os elementos e o Nó Texto do elemento computador Cria os Nós Texto de cada Nó e anexa-os ao Nó respectivo Anexa os Nós Filho e o respectivo Nó Texto ao elemento computador Cria o Atributo href e anexa-o ao Nó marca Obtém o Nó raiz e anexa-lhe o novo Nó computador
      • import java.io.*;
      • import org.w3c.dom.*;
      • import javax.xml.parsers.*;
      • import org.xml.sax.SAXException;
      • import org.xml.sax.SAXParseException;
      • import javax.xml.transform.*;
      • import javax.xml.transform.dom.*;
      • import javax.xml.transform.stream.*;
      • public class ex2 {
      • public static void main(String[] argv) {
      • DocumentBuilderFactory factory =
      • DocumentBuilderFactory.newInstance();
      • try {
      • String file = argv[0], nome = argv[1], ip = argv[2], marca = argv[3],
      • href = argv[4];
      • DocumentBuilder builder = factory.newDocumentBuilder();
      • Document doc = builder.parse( new File(argv[0]));
      • Element comp = doc. createElement (&quot;computador&quot;);
      • Element cip = doc. createElement (&quot;ip&quot;);
      • Element cmarc = doc. createElement (&quot;marca&quot;);
      • Text cn = doc. createTextNode (nome);
      Exemplo 2 – DOM em Java 29-09-10 http://www.fe.up.pt/~jvv/DOM/ Cria os elementos e o Nó Texto do elemento computador
    • Exemplo 2 – DOM em Java (2)
      • Text txt = doc. createTextNode (ip);
      • cip. appendChild (txt);
      • txt = doc. createTextNode (marca);
      • cmarc. appendChild (txt);
      • comp. appendChild (cn);
      • comp. appendChild (cip);
      • comp. appendChild (cmarc);
      • Attr attr = doc. createAttribute (&quot;href&quot;);
      • attr. setValue (href);
      • cmarc. setAttributeNode (attr);
      • Element node = doc. getDocumentElement ();
      • node. appendChild (comp);
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ Cria os Nós Texto de cada Nó e anexa-os ao Nó respectivo Anexa os Nós Filho e o respectivo Nó Texto ao elemento computador Cria o Atributo href e anexa-o ao Nó marca Obtém o Nó raiz e anexa-lhe o novo Nó computador
    • Exemplo 2 – DOM em Java (3)
      • TransformerFactory tfactory = TransformerFactory.newInstance();
      • Transformer trans= tfactory.newTransformer();
      • Source src = new DOMSource(doc);
      • Result dst = new StreamResult(System.out);
      • trans.transform(src,dst);
      • }
      • catch (SAXParseException spe) {
      • }
      • catch (SAXException sxe) {
      • }
      • catch (ParserConfigurationException pce) {
      • }
      • catch (TransformerConfigurationException tce){
      • }
      • catch (TransformerException te){
      • }
      • catch (IOException ioe) {
      • }
      • }
      • }
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ Não faz parte da especificação DOM package javax.xml.transform package javax.xml.transform.dom package javax.xml.transform.stream package javax.xml.transform package javax.xml.transform
    • Exemplo 2 - resultado
      • C:Documents and SettingsjvvMy DocumentsaulasDOM>ex2.pl ex1.xml xpto 192.168
      • .0.1 dell http://www.dell.pt
      • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
      • <PI>
      • Lista de Equipamento Informatico
      • <computador>
      • sp01pt
      • <ip>192.168.6.7 </ip>
      • <marca>IBM
      • <site url=&quot;http://www.ibm.pt&quot;/>
      • </marca>
      • </computador>
      • <computador>
      • sp03pt
      • <ip>192.168.6.9 </ip>
      • <marca>Linha Branca</marca>
      • </computador>
      • <computador>xpto<ip>192.168.0.1</ip><marca href=&quot;http://www.dell.pt&quot;>dell</marca
      • ></computador> </PI>
      • C:Documents and SettingsjvvMy DocumentsaulasDOM>
      29-09-10 http://www.fe.up.pt/~jvv/DOM/ Exemplo 1 Novo Elemento
    • Referências
      • http://www.pageresource.com/dhtml/ryan/part4-1.html
      • http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/
      29-09-10 http://www.fe.up.pt/~jvv/DOM/
    • Falta
      • Exemplo em Javascript
        • Com XML (usando o processador XML da Microsoft)
        • Com HTML
      • DOM HTML
      • DOM em PHP
      • DOM v2
      29-09-10 http://www.fe.up.pt/~jvv/DOM/