Document Object Model
(DOM)
Programação na Internet
Secção de Programação
ISEL-DEETC-LEIC
Carlos Guedes – [email protected]
Paulo Pereira – [email protected]
Autores e contributos
• Autores
– Luís Falcão
• Contributos
–
–
–
–
–
Paulo Pereira
Pedro Félix
Jorge Martins
Carlos Guedes
Nuno Datia
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
2
DOM – Introdução
• API para acesso aos elementos de um documento HTML e
XML, bem formado (well-formed).
• Define a estrutura lógica dos documentos e a forma de acesso
e manipulação.
• O DOM permite:
–
–
–
–
Criar documentos
Navegar através da sua estrutura
Adicionar, remover e modificar elementos e o seu conteúdo
Aceder a todo (com algumas excepções, por enquanto) o conteúdo de um documento
(HTML e XML)
• A especificação DOM define uma interface independente de
qualquer linguagem e plataforma (definida em IDL da OMG,
definido no CORBA 2.2).
• URL da especificação DOM: http://www.w3.org/DOM/
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
3
Características básicas do DOM
1.
O modelo de objectos é independente de qualquer linguagem e plataforma.
2.
Existência de uma interface base no DOM que é aplicável a documentos HTML,
CSS e XML.
3.
O modelo de objectos pode ser utilizado para construir e destruir um documento.
4.
Não exclui a possibilidade de utilização do modelo de objectos por agentes
externos ao documento, ou a script embebido no documento.
5.
Utilização de convenções de nomes entre os vários níveis de DOM.
6.
Uma implementação DOM não necessita de criar componentes visuais.
7.
Os objectos específicos para documentos HTML, CSS e XML são definidos pelos
elementos dessas linguagens.
8.
Permitir ler um documento e criar outro com a mesma estrutura.
9.
Não expõe o utilizador a problemas relacionados com segurança, validade, ou
privacidade.
10.
Não exclui a possibilidade de existência de outros mecanismos para manipular os
documentos.
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
4
Níveis de DOM
• Actividades iniciadas em Agosto de 1997.
• A especificação DOM foi dividida em vários níveis (actualmente 3). Cada
nível trata de um conjunto de funcionalidades.
• Os níveis 1, 2 e 3 já são recomendações.
• O DOM Working Group não é o único do W3C que produz APIs e extensões
à arquitectura DOM. Outros módulos do DOM incluem:
• DOM para MathML 2.0: API genérica para documentos MathML 2.0.
• DOM para animações SMIL (Synchronized Multimedia Integration
Language): API genérica para animações SMIL.
• DOM para SVG 1.0: API genérica para documentos SVG 1.0.
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
5
Arquitectura DOM
• A arquitectura do DOM está dividida em módulos.
• Cada módulo endereça um domínio específico.
• Os domínios cobertos actualmente API DOM são:
– DOM Core
– DOM XML
– DOM HTML
– DOM Events
– DOM CSS
– DOM Load and Save
– DOM Validation
– DOM XPath
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
6
DOM Nível 1
• DOM Nível1 (especificação desde Outubro de 1998)
– Navegação sobre a estrutura do documento
– Manipulação do documento
– Manipulação do conteúdo
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
7
DOM Nível 2
• DOM Nível2 (recomendação desde Novembro de 2000)
– Extensões ao nível 1 para suportar XML 1.0 Namespaces
(Document Object Model Level 2 Core )
– Modelo de objectos para as Cascading StyleSheets
(Document Object Model Level 2 Style)
– Modelo de eventos para user interfaces e de manipulação do documento
(Document Object Model Level 2 Events)
– Possibilidade de ter visão linear e filtrada um documento
(Document Object Model Level 2 Traversal and Range)
– Especificação baseada no DOM Nível 2 Core e não compatível com a DOM Nível
1 HTML
(Document Object Model Level 2 HTML)
– Manipulação do aspecto visual de um documento
(Document Object Model Level 2 Views)
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
8
DOM Nível 2 - Arquitectura
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
9
DOM Nível 3
• DOM Nível3 (já é uma recomendação)
– Extensões ao nível 2 para suporte total dos Namespaces XML 1.0
(Document Object Model Level 3 Core)
– Load and Save
(Document Object Model Level 3 Load and Save)
– Validações
(Document Object Model Level 3 Validation)
– Eventos
(Document Object Model Level 3 Events)
– XPath
(Document Object Model Level 3 XPath)
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
10
DOM Nível 3 Arquitectura
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
11
DOM Nível 3 Arquitectura (final)
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
12
DOM – O que é?
• API para acesso ao conteúdo de um documento.
• Estrutura de objectos que espelha a estrutura do
documento original.
• O modelo de objectos DOM define:
– As interfaces e os objectos utilizados para representar os elementos de um documento.
– A semântica dessas interfaces.
– As relações e colaborações entre interfaces e objectos.
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
13
DOM – O que não é?
• Embora fortemente influenciado pelo “Dynamic HTML Object Model”
(DOM Nível 0), não implementa toda a sua funcionalidade no Nível 1.
• Não é uma especificação binária (tipo COM ou CORBA). Tem que ser feita
uma adaptação (mapeamento) para cada linguagem.
• Não define como é que objectos são representados em XML ou HTML. Em
vez disso define como é que documentos HTML e XML são representados
na forma de objectos.
• Não é um conjunto de estruturas de dados. É um modelo de objectos que
define interfaces. A API define apenas relações lógicas entre interfaces, não
sugerindo nenhuma estrutura física para a implementação.
• Não define qual a informação que é relevante num documento, nem como
esta deve ser estruturada.
• Não é um competidor do COM ou CORBA. Pode ser implementado
utilizando qualquer um destes sistemas de objectos (ou não).
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
14
Tipos e interfaces Básicas (1)
DOMString
typedef sequence<unsigned short> DOMString;
DOMException
DOMImplementation
interface DOMImplementation {
boolean hasFeature(
in DOMString feature,
in DOMString version);
};
exception DOMException {
unsigned short code;
};
// ExceptionCode
const unsigned short INDEX_SIZE_ERR = 1;
DOMFragment
const unsigned short DOMSTRING_SIZE_ERR = 2;
interface DocumentFragment : Node
const unsigned short HIERARCHY_REQUEST_ERR = 3;
{
const unsigned short WRONG_DOCUMENT_ERR = 4;
};
const unsigned short INVALID_CHARACTER_ERR = 5;
const unsigned short NO_DATA_ALLOWED_ERR = 6;
const unsigned short NO_MODIFICATION_ALLOWED_ERR =
7;
const unsigned short NOT_FOUND_ERR = 8;
const unsigned short NOT_SUPPORTED_ERR = 9;
const unsigned short INUSE_ATTRIBUTE_ERR = 10;
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
15
Interface Document
Document
interface Document : Node {
// Attributes
readonly attribute DocumentType doctype;
readonly attribute DOMImplementation implementation;
readonly attribute Element documentElement;
Node
Document
// Methods
Element createElement(in DOMString tagName) raises(DOMException);
DocumentFragment createDocumentFragment();
Text createTextNode(in DOMString data);
Comment createComment(in DOMString data);
CDATASection createCDATASection(in DOMString data) raises(DOMException);
ProcessingInstruction createProcessingInstruction(in DOMString target, in
DOMString data) raises(DOMException);
Attr createAttribute(in DOMString name) raises(DOMException);
EntityReference createEntityReference(in DOMString name)
raises(DOMException);
Element getElementById(in DOMString idname);
// DOM Level 2
NodeList getElementsByTagName(in DOMString tagname);
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
16
Interface Node - Constantes
Node
interface Node {
// Constants
// NodeType
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
const unsigned
...
};
short
short
short
short
short
short
short
short
short
short
short
short
Node
ELEMENT_NODE = 1;
ATTRIBUTE_NODE = 2;
TEXT_NODE = 3;
CDATA_SECTION_NODE = 4;
ENTITY_REFERENCE_NODE = 5;
ENTITY_NODE = 6;
PROCESSING_INSTRUCTION_NODE = 7;
COMMENT_NODE = 8;
DOCUMENT_NODE = 9;
DOCUMENT_TYPE_NODE = 10;
DOCUMENT_FRAGMENT_NODE = 11;
NOTATION_NODE = 12;
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
17
Interface Node - Atributos
Node
interface Node {
...
// Attributes
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
readonly attribute
attribute
readonly attribute
};
Valores de nodeName, nodeValue e
attributes, consoante o tipo de elemento
unsigned short nodeType;
Node
parentNode;
NodeList childNodes;
Node
firstChild;
Node
lastChild;
Node
previousSibling;
Node
nextSibling;
Document ownerDocument;
DOMString
nodeName;
DOMString
nodeValue;
NamedNodeMap attributes;
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
18
Interface Node - Métodos
Node
interface Node {
...
// Methods
Node
insertBefore(in Node newChild, in Node refChild) raises(DOMException);
Node
replaceChild(in Node newChild, in Node oldChild) raises(DOMException);
Node
removeChild(in Node oldChild) raises(DOMException);
Node
appendChild(in Node newChild)
raises(DOMException);
boolean hasChildNodes();
Node
cloneNode(in boolean deep)
raises(DOMException);
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
19
Interfaces NodeList e NamedNodeMap
NodeList
interface NodeList {
// Attributes
readonly attribute unsigned long length;
// Methods
Node item(in unsigned long index); // x[index]
};
NamedNodeMap
interface NamedNodeMap {
// Attributes
readonly attribute unsigned long length;
// Methods
Node getNamedItem(in DOMString name);
Node setNamedItem(in Node arg)
raises(DOMException);
Node removeNamedItem(in DOMString name) raises(DOMException);
Node item(in unsigned long index); // x[index]
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
20
Interface Attr
Node
Attr
interface Attr : Node {
readonly attribute DOMString name;
readonly attribute boolean specified;
// Modified in DOM Level 1:
attribute DOMString value;
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
Attr
21
Interface Element
Node
Element
Element
interface Element : Node {
readonly attribute DOMString tagName;
DOMString getAttribute(in DOMString name);
void setAttribute(in DOMString name, in DOMString value)
raises(DOMException);
void removeAttribute(in DOMString name) raises(DOMException);
Attr getAttributeNode(in DOMString name);
Attr setAttributeNode(in Attr newAttr) raises(DOMException);
Attr removeAttributeNode(in Attr oldAttr) raises(DOMException);
NodeList getElementsByTagName(in DOMString name); // * means all Tags
void normalize();
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
22
Interface CharacterData
Node
CharacterData
CharacterData
interface CharacterData : Node {
attribute DOMString data;
// raises(DOMException) on setting and retrieval
readonly attribute unsigned long length;
DOMString substringData(in unsigned long offset, in unsigned long count)
raises(DOMException);
void appendData(in DOMString arg) raises(DOMException);
void insertData(in unsigned long offset, in DOMString arg) raises(DOMException);
void deleteData(in unsigned long offset, in unsigned long count)
raises(DOMException);
void replaceData(in unsigned long offset, in unsigned long count, in DOMString arg)
raises(DOMException);
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
23
Interfaces Text e Comment
Node
Text
interface Text : CharacterData {
Text splitText(in unsigned long offset)
raises(DOMException);
};
CharacterData
Text
Comment
Comment
interface Comment : CharacterData {
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
24
Interfaces DOM para HTML
• Extensões às interfaces básicas DOM, específicas para documentos HTML.
• Na interface básica, são disponibilizadas todas as funcionalidades que
permitem:
– Manipulação da estrutura hierárquica dos documentos.
– Manipulação de elementos.
– Manipulação de atributos.
• Na interface DOM para HTML são disponibilizadas funcionalidades que
dependem das especificidades dos elementos do HTML. Os objectivos
desta API são:
– Especialização de funcionalidades relacionadas com os elementos HTML.
– Manutenção de compatibilidade com DOM Nível 0 (DHTML).
– Oferecer mecanismos para implementar as operações mais frequentes sobre documentos
HTML (sempre que se justifique).
• Esta API não é obrigatória, numa implementação DOM nível 1. Caso a
implementação suporte estas interfaces, deve responder true no método
hasFeature de DOMImplementation, quando recebe como parâmetros as
strings “HTML” e “1.0”.
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
25
Interface HTMLCollection
HTMLCollection
interface HTMLCollection {
readonly attribute unsigned long length;
Node item(in unsigned long index);
// nodeName corresponds to HTML attribute “id” or “name”
Node namedItem(in DOMString nodeName);
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
26
Interface HTMLDocument
HTMLDocument
interface HTMLDocument : Document {
attribute DOMString title;
readonly attribute DOMString referrer;
readonly attribute DOMString domain;
readonly attribute DOMString URL;
attribute HTMLElement body;
readonly attribute HTMLCollection images;
readonly attribute HTMLCollection applets;
readonly attribute HTMLCollection links;
readonly attribute HTMLCollection forms;
readonly attribute HTMLCollection anchors;
attribute DOMString cookie;
Node
Document
HTMLDocument
void open();
void close();
void write(in DOMString text);
void writeln(in DOMString text);
Element getElementById(in DOMString elementId);
NodeList getElementsByName(in DOMString elementName);
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
27
Interface HTMLElement
Node
HTMLElement
interface HTMLElement : Element {
attribute DOMString id;
attribute DOMString title;
attribute DOMString lang;
attribute DOMString dir;
attribute DOMString className;
};
Element
HTMLElement
Elementos HTML que apenas disponibilizam a interface básica
HTMLElement:
–
–
–
–
–
–
–
HEAD
special: SUB, SUP, SPAN, BDO
font: TT, I, B, U, S, STRIKE, BIG, SMALL
phrase: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ACRONYM, ABBR
list: DD, DT
NOFRAMES, NOSCRIPT
ADDRESS, CENTER
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
Document Object Model (DOM)
28
Interfaces para outros elementos do HTML
Node
Element
HTMLElement
HTMLHtmlElement
HTMLHeadElement
HTMLBaseElement
HTMLLinkElement
HTMLStyleElement
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
HTMLMetaElement
HTMLBodyElement
HTMLTitleElement
Document Object Model (DOM)
HTMLFormElement
29
DOM 2 – Modelo de Eventos
• Sistema de eventos genérico que
– Permite o registo de handlers de eventos
– Fornece conjuntos de eventos para a controlo da UI e para
notificação da alteração da estrutura do documento
– Define a informação contextual para cada um dos tipos de
eventos
– Contém como subconjunto, os eventos utilizados no DOM
nível 0
• Existem várias técnicas possíveis para gerir a captura
de eventos
• É possível a um evento ser capturado ao longo de um
caminho na árvore DOM
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
30
Event Flow
• Existem duas fases no processamento de eventos:
– Capture – A primeira das fases, onde o evento percorre a
árvore do documento, desde a raiz até ao elemento a que é
destinado o evento
– Bubble – Processo contrário, onde o evento depois de
processado pelo elemento a que se destinava, é passado
para o nó pai, afim de ser processado
...
DIV
SPAN
Capture
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
SPAN
SPAN
Bubbling
31
Interfaces de registo de Eventos
EventTarget
interface CharacterData : Node {
void addEventListener(in DOMString type, in EventListener listener,
in boolean useCapture);
void removeEventListener(in DOMString type, in EventListener listener,
in boolean useCapture);
boolean dispatchEvent(in Event evt) raises(EventException);
};
EventListener
interface EventListener {
void handleEvent(in Event evt);
};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
32
Registo de Handlers
• O registo de handlers é efectuado sobre o objecto
“gerador” de eventos:
– node.["on" + type] = f;
Da forma clássica
window.onload = function () { alert(“página carregada!”);}
W3C DOM
– node.addEventListener(type, f, false);
window.addEventListener(“load”,
function () { alert(“página carregada!”);}, false);
Atenção!
– Nos browsers que não implementam o especificação DOM
nível 2 para eventos (e.g. Microsoft ie), a forma de registo
anterior não funciona
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
33
Captura de Eventos
• No registo dos handlers, é possível especificar se é
pretendido capturar o evento antes de ele ser processado
pelo nó destinatário
div.addEventListener(“click”,
function () { alert(“página carregada!”);}, true);
...
1
DIV
SPAN
SPAN
2
SPAN
• Qualquer evento que seja gerado no
nó <div> ou em algum dos seus
descendentes, é, em primeiro lugar,
notificado o nó <div>
• Só depois serão notificados os nós
descendentes (que tiverem capturado
o evento) e finalmente o nó
destinatário
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
34
Bubbling
• Uma vez processado o evento pelo nó destinatário, são
evocados os handlers dos nós ascendentes, pela ordem
inversa da fase anterior (captura)
div.addEventListener(“click”,
function () { alert(“página carregada!”);}, false);
• É possível evitar que o evento seja
propagado para os ascendentes –
evocando o método stopPropagation
• Note-se que nem todos os eventos
suportam bubbling (e.g load) e nem
todos podem ser cancelados (e.g.
mousemove )
...
DIV
3
SPAN
SPAN
SPAN
2
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
35
Interface Evento
Event
interface // PhaseType
const unsigned short
const unsigned short
const unsigned short
readonly
readonly
readonly
readonly
readonly
readonly
readonly
void
void
void
attribute
attribute
attribute
attribute
attribute
attribute
attribute
CAPTURING_PHASE
AT_TARGET
BUBBLING_PHASE
= 1;
= 2;
= 3;
DOMString
type;
EventTarget
target;
EventTarget
currentTarget;
unsigned short
eventPhase;
boolean
bubbles;
boolean
cancelable;
DOMTimeStamp
timeStamp;
stopPropagation();
preventDefault();
initEvent(in DOMString eventTypeArg,
in boolean canBubbleArg,
in boolean cancelableArg);};
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
36
Handlers e eventos
• De acordo com a especificação DOM, é sempre
passado como parâmetro ao handler o evento
– Atenção!!! Nos browsers da Microsoft não é passado
nenhum evento como parâmetro – tem de ser consultado o
objecto global window.event
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
37
Eventos DOM
• Na especificação DOM nível 2, estão definidos 3 tipos de
eventos:
Event
– Eventos da User Interface
• e.g. DomFocusIn
UIEvent
– Eventos de rato
• e.g. click
MutationEvent
MouseEvent
– Eventos de alteração da estrutura do documento (Mutation Events)
• e.g. DOMNodeInserted
• A especificação DOM nível três define também eventos de
teclado
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
38
Eventos de Rato
• Os eventos de rato são aqueles que são mais
utilizados:
– click, mousedown, mouseup, mouseover, mouseout,
mousemove
• Quando são deste tipo, os eventos contêm também
as propriedades:
Propriedade
altKey, ctrlKey,
metaKey, shiftKey
Descrição
true, quando a tecla estava premida no momento da ocorrência do evento
button
Um inteiro que indica qual dos botões do rato foi premido: 1 = left, 2 =
middle, 3 = right.
relatedTarget
MouseEnter e MouseLeave
screenX, screenY
A coordenada do ponteiro do rato relativa ao ecrã
clientX, clientY
A coordenada do ponteiro do rato relativa à área de cliente (e.g browser)
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
39
Bibliografia
• W3C Document Object Model
(http://www.w3.org/DOM/)
• Dom Technical Reports
(http://www.w3.org/DOM/DOMTR)
2007 - 2011
©ISEL/DEETC/SP – Programação na Internet
40